Merge pull request #107 from tahmid-saj/dev-redux-user

user reducers

src/App.js

@@ -14,7 +14,28 @@ import DashboardRouteSignedIn from "./routes/signed-in/dashboard/dashboard.compo
 import NutritionTrackerRouteSignedIn from "./routes/signed-in/nutrition-tracker/nutrition-tracker.component";
 import CaloriesBurnedRouteSignedIn from "./routes/signed-in/calories-burned/calories-burned.component"
 
+import { useEffect } from "react";
+import { useDispatch } from "react-redux"
+import { setCurrentUser } from "./store/shared/user/user.action";
+
+import { onAuthStateChangedListener,
+  createUserDocumentFromAuth
+} from "./utils/firebase/firebase.utils";
+
 function App() {
+  const dispatch = useDispatch()
+
+  useEffect(() => {
+    const unsubscribe = onAuthStateChangedListener((user) => {
+      if (user) {
+        createUserDocumentFromAuth(user)
+      }
+      dispatch(setCurrentUser(user))
+    })
+
+    return unsubscribe
+  }, [dispatch])
+
   return (
     <Routes>
       <Route path="/" element={ <Navigation/> }>

src/components/shared/mui/drawer/drawer.component.jsx

@@ -35,13 +35,15 @@ import GitHubIcon from '@mui/icons-material/GitHub';
 import LinkedInIcon from '@mui/icons-material/LinkedIn';
 
 import { Link, useNavigate } from 'react-router-dom';
-import { UserContext } from "../../../../contexts/shared/user/user.context";
 import { NutritionTrackerContext } from "../../../../contexts/signed-in/nutrition-tracker/nutrition-tracker.context";
 import { CaloriesBurnedContext } from "../../../../contexts/signed-in/calories-burned/calories-burned.context";
 import { signOutUser } from '../../../../utils/firebase/firebase.utils';
 
 import { NAV_LINKS } from '../../../../utils/constants/shared.constants';
 
+import { useSelector } from "react-redux"
+import { selectCurrentUser } from "../../../../store/shared/user/user.selector";
+
 const drawerWidth = 240;
 
 const openedMixin = (theme) => ({
@@ -114,7 +116,7 @@ export default function MiniDrawer({ navLinksHeaders, children }) {
   const theme = useTheme();
   const [open, setOpen] = useState(true);
 
-  const { currentUser } = useContext(UserContext)
+  const currentUser = useSelector(selectCurrentUser)
   const { updateNutritionTrackedDaysAndSummary } = useContext(NutritionTrackerContext);
   const { updateTrackedCaloriesBurned } = useContext(CaloriesBurnedContext)
   const navigate = useNavigate();

src/index.js

@@ -32,13 +32,13 @@ root.render(
               <NutritionTrackerProviderSignedOut>
                 <CaloriesBurnedProviderSignedOut>
                   <RecipesProvider>
-                    <UserProvider>
+                    {/* <UserProvider> */}
                       <NutritionTrackerProviderSignedIn>
                         <CaloiriesBurnedProviderSignedIn>
                           <App />
                         </CaloiriesBurnedProviderSignedIn>
                       </NutritionTrackerProviderSignedIn>
-                    </UserProvider>
+                    {/* </UserProvider> */}
                   </RecipesProvider>
                 </CaloriesBurnedProviderSignedOut>
               </NutritionTrackerProviderSignedOut>

src/routes/shared/navigation/navigation.component.jsx

@@ -7,14 +7,18 @@ import { OutletContainer } from "./navigation.styles.jsx";
 import { signOutUser } from "../../../utils/firebase/firebase.utils";
 import MiniDrawer from "../../../components/shared/mui/drawer/drawer.component.jsx";
 
-import { UserContext } from "../../../contexts/shared/user/user.context";
+// import { UserContext } from "../../../contexts/shared/user/user.context";
 import { NutritionTrackerContext } from "../../../contexts/signed-in/nutrition-tracker/nutrition-tracker.context";
 import { CaloriesBurnedContext } from "../../../contexts/signed-in/calories-burned/calories-burned.context";
 
 import { NAV_LINKS } from "../../../utils/constants/shared.constants.js";
 
+import { useSelector } from "react-redux"
+import { selectCurrentUser } from "../../../store/shared/user/user.selector.js";
+
 const Navigation = () => {
-  const { currentUser } = useContext(UserContext);
+  // const { currentUser } = useContext(UserContext);
+  const currentUser = useSelector(selectCurrentUser)
 
   // const { updateNutritionTrackedDaysAndSummary } = useContext(NutritionTrackerContext);
   // const { updateTrackedCaloriesBurned } = useContext(CaloriesBurnedContext)

src/store/root-reducer.js

@@ -1,5 +1,7 @@
 import { combineReducers } from "redux"
 
+import { userReducer } from "./shared/user/user.reducer"
+
 export const rootReducer = combineReducers({
-
+  user: userReducer
 })

src/store/shared/user/user.action.js

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

src/store/shared/user/user.reducer.js

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

src/store/shared/user/user.selector.js

@@ -0,0 +1 @@
+export const selectCurrentUser = (state) => state.user.currentUser

src/store/shared/user/user.types.js

@@ -0,0 +1,3 @@
+export const USER_ACTION_TYPES = {
+  SET_CURRENT_USER: "user/SET_CURRENT_USER"
+}