Merge pull request #26 from Muhtoyyib/redux

created catrgories-reducer

src/main.jsx

@@ -5,7 +5,7 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
 import { store } from './store/store';
 // import { UserProvider } from './context/user';
-import { CategoriesProvider } from './context/categories-map';
+// import { CategoriesProvider } from './context/categories-map';
 import { CartProvider } from './context/cart-context';
 import Root from './routes/root';
 import Shop from './routes/shop/shop';
@@ -48,11 +48,11 @@ ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
   <Provider store={store}>
 {/*<UserProvider> */}
-      <CategoriesProvider>
+{/*<CategoriesProvider> */}
         <CartProvider>
           <RouterProvider router={router} />
         </CartProvider>
-      </CategoriesProvider>
+{/*</CategoriesProvider> */}
    {/* </UserProvider> */}
   </Provider>
   </React.StrictMode>,

src/routes/category-shop/category-shop.jsx

@@ -1,8 +1,10 @@
-import { useContext, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useLoaderData} from 'react-router-dom';
+import { useSelector } from "react-redux";
+
+import { selectCategoriesMap } from "../../store/categories/categories-selector";
 
 import ProductCard from "../../components/product-card/product-card";
-import { CategoriesContext } from "../../context/categories-map";
 import '../shop/shop.scss';
 import './category-shop.scss'
 
@@ -15,7 +17,7 @@ export function loader({ params }){
 
 export default function CategoryShop (){
     const { categoryName } = useLoaderData();
-    const { categoriesMap } = useContext( CategoriesContext);
+    const categoriesMap  = useSelector(selectCategoriesMap);
     const [products, setProducts] = useState(categoriesMap[categoryName]);
 
     useEffect(() => {

src/routes/root.jsx

@@ -5,9 +5,13 @@ import { useDispatch } from "react-redux";
 
 
 import { setCurrentUser } from "../store/user/user.action";
+import { setCategoriesMap } from "../store/categories/categories-action";
 
 
 import { onAuthStateChangedListerner, createUserDocFromAuth } from "../utils/firebase/firebase.js";
+import { getCategoriesAndDocuments } from "../utils/firebase/firebase";
+
+
 
 
 import Navigation from "../components/navigation/navigation";
@@ -28,6 +32,16 @@ const Root = () => {
 // eslint-disable-next-line react-hooks/exhaustive-deps
 }, [dispatch]);
 
+  useEffect(()=>{
+      const getCategoriesMap = async () => {
+          const categoryMap = await getCategoriesAndDocuments();
+
+          dispatch(setCategoriesMap(categoryMap))
+      }
+
+      getCategoriesMap();
+  }, [dispatch])
+
   return (
     <>
         <Navigation />

src/routes/shop/shop.jsx

@@ -1,12 +1,13 @@
-import { useContext } from "react";
+import { useSelector } from "react-redux";
+
+import { selectCategoriesMap } from "../../store/categories/categories-selector";
 
 import ProductCard from "../../components/product-card/product-card";
-import { CategoriesContext } from "../../context/categories-map";
 import './shop.scss';
 import { Link } from "react-router-dom";
 
 const Shop = () => {
-  const { categoriesMap } = useContext( CategoriesContext);
+  const categoriesMap = useSelector( selectCategoriesMap );
   const currentPath = window.location.pathname;
 
   return (

src/store/categories/categories-action-type.js

@@ -0,0 +1,3 @@
+export const CATEGORIES_ACTION_TYPES = {
+    SET_CATEGORIES_MAP: 'SET_CATEGORIES_MAP',
+}

src/store/categories/categories-action.js

@@ -0,0 +1,5 @@
+import { createAction } from "../../utils/reducer/reducer-utils";
+import { CATEGORIES_ACTION_TYPES } from "./categories-action-type";
+
+const { SET_CATEGORIES_MAP } = CATEGORIES_ACTION_TYPES;
+export const setCategoriesMap = ( categoriesMap ) => createAction(SET_CATEGORIES_MAP, categoriesMap)

src/store/categories/categories-reducer.js

@@ -0,0 +1,19 @@
+import { CATEGORIES_ACTION_TYPES } from "./categories-action-type";
+
+export const CATEGORIES_INITIAL_STATE = {
+    categoriesMap: {}
+}
+
+export const categoriesReducer = (state = CATEGORIES_INITIAL_STATE, action = {}) => {
+    const { type, payload } = action;
+
+    switch(type){
+        case CATEGORIES_ACTION_TYPES.SET_CATEGORIES_MAP: 
+        return{
+            ...state,
+            categoriesMap: payload
+        }
+        default:
+            return state;
+    }
+}

src/store/categories/categories-selector.js

@@ -0,0 +1 @@
+export const selectCategoriesMap = (state) => state.categories.categoriesMap;

src/store/root-reducer.js

@@ -1,6 +1,8 @@
 import { combineReducers } from "redux";
 import { userReducer } from "./user/user-reducer";
+import { categoriesReducer } from "./categories/categories-reducer";
 
 export const rootReducer = combineReducers({
     user: userReducer,
+    categories: categoriesReducer
 })

src/store/user/user-reducer.js

@@ -1,10 +1,10 @@
 import { USER_ACTION_TYPES } from "./user-action-types";
 
-const INITIAL_STATE = {
+const USER_INITIAL_STATE = {
     currentUser: null
 }
 
-export const userReducer = (state = INITIAL_STATE, action) => {
+export const userReducer = (state = USER_INITIAL_STATE, action = {}) => {
     const {type, payload} = action;
 
     switch(type){

src/store/user/user.action.js

@@ -1,6 +1,6 @@
 import { USER_ACTION_TYPES } from "./user-action-types";
 import { createAction } from "../../utils/reducer/reducer-utils";
 
-const SET_CURRENT_USER = USER_ACTION_TYPES.SET_CURRENT_USER;
+const {SET_CURRENT_USER} = USER_ACTION_TYPES
 export const setCurrentUser = (user) => 
     createAction(SET_CURRENT_USER , user);