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"
+}