Fetching ingredients Asynchronously from the Firebase-Backend

README.md

@@ -119,3 +119,4 @@ Dependency Installation: **`npm i --save redux-thunk`**
 2. Preparing the Folder Structure to use **`ACTION CREATORS`**: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/dc431d4c3cf4b3151498a2457e9fd2a5d075bca3)
 3. Creating **`ACTION CREATORS`** for `<BurgerBuilder />` Component: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/77ee57ca9edb8bfe4462daba114f537c31bde8a2)
 4. Setting Up **[`redux-thunk`](https://github.com/reduxjs/redux-thunk#installation)** & **[`Redux DevTools`](https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup)** to Execute Asynchronous Code: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/91ed3a4478ac6b568f09beb98c1a60d6acde97ce)
+5. Fetching `ingredients` Asynchronously from the **[Firebase-Backend](https://burger-builder-ram.firebaseio.com/ingredients.json)**: [Commit Details]()

src/containers/BurgerBuilder/BurgerBuilder.component.jsx

@@ -17,18 +17,8 @@ import * as burgerBuilderActions from "../../store/actions/index"; // we can als
 class BurgerBuilder extends Component {
   state = {
     orderNow: false,
-    loading: false,
-    error: false,
   };
 
-  /**
-   * Fetch the default ingredients data from the DB here:
-   *  https://burger-builder-ram.firebaseio.com/ingredients
-   * 
-   * NOTE: we have to append `.json` at the end of the API
-   * endpoint in case of firebase db.
-   */
-
   /**
    * In componentDidMount(), we are fetching some data from 
    * the backend asynchronously, and so, we can fetch data
@@ -45,27 +35,9 @@ class BurgerBuilder extends Component {
    * For now, we'll use Way #2, to understand how Async Code 
    * can be handled using `redux-thunk`.
    */
-  // componentDidMount() {
-  //   axios.get("https://burger-builder-ram.firebaseio.com/ingredients.json")
-  //     .then(response => {
-  //       this.setState({ ingredients: response.data },
-  //         () => {
-  //           const purchasableInfo = { ...this.state.ingredients };
-  //           for (let key in purchasableInfo) {
-  //             if (this.state.purchasable) {
-  //               break;
-  //             }
-  //             if (purchasableInfo[key] > 0) {
-  //               this.setState({ purchasable: true });
-  //             }
-  //           }
-  //         });
-  //     })
-  //     .catch(error => {
-  //       this.setState({ error: true }, () => console.log(error));
-  //       return error;
-  //     });
-  // }
+  componentDidMount() {
+
+  }
 
   updatePurchasableState() {
     const ingredients = { ...this.props.ings };
@@ -113,7 +85,7 @@ class BurgerBuilder extends Component {
       );
     }
 
-    orderSummary = this.state.loading ? <Spinner /> : orderSummary;
+    // orderSummary = this.state.loading ? <Spinner /> : orderSummary;
 
     return (
       <Aux>

src/store/actions/actionTypes.js

@@ -1,2 +1,5 @@
 export const ADD_INGREDIENT = "ADD_INGREDIENT";
 export const REMOVE_INGREDIENT = "REMOVE_INGREDIENT";
+export const SET_INGREDIENTS = "SET_INGREDIENTS";
+export const FETCH_INGREDIENTS_FAILED = "FETCH_INGREDIENTS_FAILED";
+

src/store/actions/burgerBuilder.js

@@ -1,15 +1,50 @@
 import * as actionTypes from "./actionTypes";
+import axios from "../../axios-orders";
 
 export const addIngredient = ingName => {
   return {
     type: actionTypes.ADD_INGREDIENT,
     ingredientName: ingName,
-  }
-}
+  };
+};
 
 export const removeIngredient = ingName => {
   return {
     type: actionTypes.REMOVE_INGREDIENT,
     ingredientName: ingName,
+  };
+};
+
+export const setIngredients = ingredients => {
+  return {
+    type: actionTypes.SET_INGREDIENTS,
+    ingredients
+  };
+};
+
+export const fetchIngredientsFailed = () => {
+  return {
+    type: actionTypes.FETCH_INGREDIENTS_FAILED,
   }
 }
+
+/**
+ * Fetch the default ingredients data from the DB here:
+ *  https://burger-builder-ram.firebaseio.com/ingredients
+ * 
+ * NOTE: we have to append `.json` at the end of the API
+ * endpoint in case of firebase db.
+ */
+export const initIngredients = () => {
+  return dispatch => {
+    axios
+      .get("https://burger-builder-ram.firebaseio.com/ingredients.json")
+      .then(response => {
+        dispatch(setIngredients(response.data));
+      })
+      .catch(error => {
+        dispatch(fetchIngredientsFailed());
+        return error;
+      });
+  };  
+};

src/store/reducers/burgerBuilder.js

@@ -1,13 +1,9 @@
 import * as actionTypes from "../actions/actionTypes";
 
 const initialState = {
-  ingredients: {
-    salad: 0,
-    bacon: 0,
-    cheese: 0,
-    meat: 0
-  },
+  ingredients: null,
   totalPrice: 4,
+  error: false,
 };
 
 const INGREDIENT_PRICES = {