Merge pull request #21 from Chamindu36/dev

[T18] Add redux-async libraries to handle fetching of categories

.eslintrc.js

@@ -1,6 +1,13 @@
+// parserOptions: {
+//     parser: '@babel/eslint-parser',
+//         requireConfigFile: false, // <== ADD THIS
+//             ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
+//                 sourceType: 'module' // Allows for the use of imports
+// }
+
 parserOptions: {
-    parser: '@babel/eslint-parser',
-        requireConfigFile: false, // <== ADD THIS
-            ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
-                sourceType: 'module' // Allows for the use of imports
+    parser: '@babel/eslint-parser';
+    requireConfigFile: false; // <== ADD THIS
+    ecmaVersion: 2018; // Allows for the parsing of modern ECMAScript features
+    sourceType: 'module' // Allows for the use of imports
 }

package.json

@@ -17,6 +17,7 @@
     "redux": "^4.2.1",
     "redux-logger": "^3.0.6",
     "redux-persist": "^6.0.0",
+    "redux-thunk": "^2.4.2",
     "reselect": "^4.1.8",
     "sass": "^1.63.6",
     "styled-components": "^6.0.4",

src/routes/shop/shop.component.jsx

@@ -2,8 +2,7 @@ import { Routes, Route } from "react-router-dom";
 import { useEffect } from "react";
 import { useDispatch } from "react-redux";
 
-import { getCategoriesAndDocuments } from '../../utils/firebase/firebase.utils';
-import { setCategories } from "../../store/category/category.action";
+import { fetchCategoriesAsync } from "../../store/category/category.action";
 
 import CategoriesPreview from "../categories-preview/categories-preview.component";
 import Category from "../category/category.component";
@@ -15,12 +14,7 @@ const Shop = () => {
     const dispatch = useDispatch();
 
     useEffect(() => {
-        const getCategoriesMap = async () => {
-            const categoriesArray = await getCategoriesAndDocuments('categories');
-            dispatch(setCategories(categoriesArray));
-        };
-
-        getCategoriesMap();
+        dispatch(fetchCategoriesAsync());
     }, [dispatch]);
 
     return (

src/store/category/category.action.js

@@ -1,5 +1,28 @@
 import CATEGORIES_ACTION_TYPES from './category.types';
 import { createAction } from '../../utils/reducer/reducer.utils';
 
+import { getCategoriesAndDocuments } from '../../utils/firebase/firebase.utils';
+
 export const setCategories = (categoriesArray) =>
     createAction(CATEGORIES_ACTION_TYPES.SET_CATEGORIES, categoriesArray);
+
+export const fetchCategoriesStart = () =>
+    createAction(CATEGORIES_ACTION_TYPES.FETCH_CATEGORY_START);
+
+export const fetchCategoriesSuccess = (categoriesArray) =>
+    createAction(CATEGORIES_ACTION_TYPES.FETCH_CATEGORY_SUCCESS, categoriesArray);
+
+export const fetchCategoriesFailed = (error) =>
+    createAction(CATEGORIES_ACTION_TYPES.FETCH_CATEGORY_FAILURE, error);
+
+// Actual thunk async call to handle fetch
+export const fetchCategoriesAsync = () => async (dispatch) => {
+    dispatch(fetchCategoriesStart());
+    try {
+        const categoriesArray = await getCategoriesAndDocuments('categories');
+
+        dispatch(fetchCategoriesSuccess(categoriesArray));
+    } catch (error) {
+        dispatch(fetchCategoriesFailed(error));
+    }
+}

src/store/category/category.reducer.js

@@ -2,6 +2,8 @@ import CATEGORIES_ACTION_TYPES from './category.types';
 
 export const CATEGORIES_INITIAL_STATE = {
     categories: [],
+    isLoading: false,
+    error: null
 };
 
 export const categoriesReducer = (
@@ -11,8 +13,12 @@ export const categoriesReducer = (
     const { type, payload } = action;
 
     switch (type) {
-        case CATEGORIES_ACTION_TYPES.SET_CATEGORIES:
-            return { ...state, categories: payload };
+        case CATEGORIES_ACTION_TYPES.FETCH_CATEGORY_START:
+            return { ...state, isLoading: true };
+        case CATEGORIES_ACTION_TYPES.FETCH_CATEGORY_SUCCESS:
+            return { ...state, categories: payload, isLoading: false };
+        case CATEGORIES_ACTION_TYPES.FETCH_CATEGORY_FAILURE:
+            return { ...state, error: payload, isLoading: false };
         default:
             return state;
     }

src/store/category/category.types.js

@@ -1,5 +1,8 @@
 const CATEGORIES_ACTION_TYPES = {
     SET_CATEGORIES: 'categories/SET_CATEGORIES',
+    FETCH_CATEGORY_START: 'categories/FETCH_CATEGORY_START',
+    FETCH_CATEGORY_SUCCESS: 'categories/FETCH_CATEGORY_SUCCESS',
+    FETCH_CATEGORY_FAILURE: 'categories/FETCH_CATEGORY_FAILURE',
 };
 
 export default CATEGORIES_ACTION_TYPES;

src/store/store.js

@@ -4,6 +4,7 @@ import { persistStore, persistReducer } from 'redux-persist';
 import storage from 'redux-persist/lib/storage';
 
 import logger from 'redux-logger';
+import thunk from 'redux-thunk';
 
 import { rootReducer } from './root-reducer';
 
@@ -15,7 +16,7 @@ const persistConfig = {
 
 const persistedReducer = persistReducer(persistConfig, rootReducer);
 
-const middleWares = [process.env.NODE_ENV !== 'production' && logger].filter(Boolean);
+const middleWares = [process.env.NODE_ENV !== 'production' && logger, thunk].filter(Boolean);
 
 // Add dev tool extension in chrome to see states, acions and changes
 const composeEnhancer =