component: retrieve data from backend and handle error

src/containers/BurgerBuilder/BurgerBuilder.js

@@ -19,16 +19,22 @@ const INGREDIENT_PRICE = {
 class BurgerBuilder extends Component {
 
     state = {
-        ingredients: {
+        ingredients: null,
-            meat: 0,
-            cheese: 0,
-            salad: 0,
-            bacon: 0,
-        },
         totalPrice: 0,
         purchasable: false,
         purchasing: false,
         loading: false,
+        error: false,
+    }
+
+    componentDidMount() {
+        axios.get('https://react-my-burger-e4645.firebaseio.com/ingredients.json') // remove .json to throw error
+            .then(res => {
+                this.setState({ ingredients: res.data });
+            })
+            .catch(error => { 
+                this.setState({ error: true});
+            })
     }
 
     updatePurchaseState(ingredients) {
@@ -108,7 +114,7 @@ class BurgerBuilder extends Component {
             }
         };
 
-        axios.post('/order.json', order)
+        axios.post('/order.json', order) // remove .json to throw error
             .then(response => {
                 this.setState({ loading: false, purchasing: false }); // set purchasing: false can close Order Summary dialog
             })
@@ -126,11 +132,29 @@ class BurgerBuilder extends Component {
             disabledInfo[key] = disabledInfo[key] <= 0;
         }
 
-        let orderSummary = <OrderSummary
+        let orderSummary = null;
-            ingredients={this.state.ingredients}
+        let burger = this.state.error ? <p>Ingredients can't be loaded!</p> : <Spinner />;
-            price={this.state.totalPrice}
+
-            purchaseCancalled={this.purchaseCancelHandler}
+        if (this.state.ingredients) {
-            purchaseContinued={this.purchaseContinueHandler}></OrderSummary>;
+            orderSummary = <OrderSummary
+                ingredients={this.state.ingredients}
+                price={this.state.totalPrice}
+                purchaseCancalled={this.purchaseCancelHandler}
+                purchaseContinued={this.purchaseContinueHandler}></OrderSummary>;
+
+            burger = (
+                <Aux>
+                    <Burger ingredients={this.state.ingredients} />
+                    <BuildControls
+                        ingredientAdded={this.addIngredientHandler}
+                        ingredientRemoved={this.removeIngredientHandler}
+                        ordered={this.purchaseHandler}
+                        disabled={disabledInfo}
+                        purchasable={this.state.purchasable}
+                        price={this.state.totalPrice} />
+                </Aux>
+            );
+        }
 
         if (this.state.loading) {
             orderSummary = <Spinner />
@@ -143,14 +167,7 @@ class BurgerBuilder extends Component {
                     modalClosed={this.purchaseCancelHandler}>
                     {orderSummary}
                 </Modal>
-                <Burger ingredients={this.state.ingredients} />
+                {burger}
-                <BuildControls
-                    ingredientAdded={this.addIngredientHandler}
-                    ingredientRemoved={this.removeIngredientHandler}
-                    ordered={this.purchaseHandler}
-                    disabled={disabledInfo}
-                    purchasable={this.state.purchasable}
-                    price={this.state.totalPrice} />
             </Aux>
         );
     };

src/hoc/withErrorHandler/withErrorHandler.js

@@ -9,7 +9,7 @@ const withErrorHandler = (WrappedComponent, axios) => {
             error: null,
         }
 
-        componentDidMount() {
+        componentWillMount() {  // This will happen before child component rendering
             axios.interceptors.request.use(req => {
                 this.setState({ error: null });
                 return req;