Merge pull request #17 from Chamindu36/dev

Add optimizations and memoization with redux to categories context.

.eslintrc.js

@@ -3,4 +3,4 @@ parserOptions: {
         requireConfigFile: false, // <== ADD THIS
             ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
                 sourceType: 'module' // Allows for the use of imports
-};
+}

package.json

@@ -16,6 +16,7 @@
     "react-scripts": "5.0.1",
     "redux": "^4.2.1",
     "redux-logger": "^3.0.6",
+    "reselect": "^4.1.8",
     "sass": "^1.63.6",
     "styled-components": "^6.0.4",
     "web-vitals": "^2.1.4"

src/routes/shop/shop.component.jsx

@@ -3,7 +3,7 @@ import { useEffect } from "react";
 import { useDispatch } from "react-redux";
 
 import { getCategoriesAndDocuments } from '../../utils/firebase/firebase.utils';
-import { setCategoriesMap } from "../../store/category/category.action";
+import { setCategories } from "../../store/category/category.action";
 
 import CategoriesPreview from "../categories-preview/categories-preview.component";
 import Category from "../category/category.component";
@@ -16,8 +16,8 @@ const Shop = () => {
 
     useEffect(() => {
         const getCategoriesMap = async () => {
-            const categoryMap = await getCategoriesAndDocuments('categories');
-            dispatch(setCategoriesMap(categoryMap));
+            const categoriesArray = await getCategoriesAndDocuments('categories');
+            dispatch(setCategories(categoriesArray));
         };
 
         getCategoriesMap();

src/store/category/category.action.js

@@ -1,5 +1,5 @@
 import CATEGORIES_ACTION_TYPES from './category.types';
 import { createAction } from '../../utils/reducer/reducer.utils';
 
-export const setCategoriesMap = (categoriesMap) =>
-    createAction(CATEGORIES_ACTION_TYPES.SET_CATEGORIES_MAP, categoriesMap);
+export const setCategories = (categoriesArray) =>
+    createAction(CATEGORIES_ACTION_TYPES.SET_CATEGORIES, categoriesArray);

src/store/category/category.reducer.js

@@ -1,7 +1,7 @@
 import CATEGORIES_ACTION_TYPES from './category.types';
 
 export const CATEGORIES_INITIAL_STATE = {
-    categoriesMap: {},
+    categories: [],
 };
 
 export const categoriesReducer = (
@@ -11,8 +11,8 @@ export const categoriesReducer = (
     const { type, payload } = action;
 
     switch (type) {
-        case CATEGORIES_ACTION_TYPES.SET_CATEGORIES_MAP:
-            return { ...state, categoriesMap: payload };
+        case CATEGORIES_ACTION_TYPES.SET_CATEGORIES:
+            return { ...state, categories: payload };
         default:
             return state;
     }

src/store/category/category.selector.js

@@ -1 +1,17 @@
-export const selectCategoriesMap = (state) => state.categories.categoriesMap;
+import { createSelector } from "reselect";
+
+const selectCategoryReducer = (state) => state.categories;
+
+export const selectCategories = createSelector(
+    [selectCategoryReducer],
+    (categoriesSlice) => categoriesSlice.categories
+);
+
+export const selectCategoriesMap = createSelector(
+    [selectCategories],
+    (categories) =>
+        categories.reduce((acc, { title, items }) => {
+            acc[title.toLowerCase()] = items;
+            return acc;
+        }, {})
+);

src/store/category/category.types.js

@@ -1,5 +1,5 @@
 const CATEGORIES_ACTION_TYPES = {
-    SET_CATEGORIES_MAP: 'categories/SET_CATEGORIES_MAP',
+    SET_CATEGORIES: 'categories/SET_CATEGORIES',
 };
 
 export default CATEGORIES_ACTION_TYPES;

src/utils/firebase/firebase.utils.js

@@ -71,13 +71,16 @@ export const getCategoriesAndDocuments = async () => {
 
     // get all documents and create a map
     const querySnapshot = await getDocs(q);
-    const categoryMap = querySnapshot.docs.reduce((acc, docSnapshot) => {
-        const { title, items } = docSnapshot.data();
-        acc[title.toLowerCase()] = items;
-        return acc;
-    }, {});
 
-    return categoryMap;
+    return querySnapshot.docs.map(docSnapshot => docSnapshot.data());
+
+    // const categoryMap = querySnapshot.docs.reduce((acc, docSnapshot) => {
+    //     const { title, items } = docSnapshot.data();
+    //     acc[title.toLowerCase()] = items;
+    //     return acc;
+    // }, {});
+
+    // return categoryMap;
 };
 
 export const createUserDocumentFromAuth = async (userAuth, additionalInfo) => {