diff --git a/src/App.js b/src/App.js index c938813..09fb4be 100644 --- a/src/App.js +++ b/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 ( }> diff --git a/src/components/shared/mui/drawer/drawer.component.jsx b/src/components/shared/mui/drawer/drawer.component.jsx index f25e8b6..5a39656 100644 --- a/src/components/shared/mui/drawer/drawer.component.jsx +++ b/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(); diff --git a/src/index.js b/src/index.js index cd71f06..637e1e0 100644 --- a/src/index.js +++ b/src/index.js @@ -32,13 +32,13 @@ root.render( - + {/* */} - + {/* */} diff --git a/src/routes/shared/navigation/navigation.component.jsx b/src/routes/shared/navigation/navigation.component.jsx index 8352e5f..d0e4a73 100644 --- a/src/routes/shared/navigation/navigation.component.jsx +++ b/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) diff --git a/src/store/root-reducer.js b/src/store/root-reducer.js index 3268aae..00cc7e4 100644 --- a/src/store/root-reducer.js +++ b/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 }) \ No newline at end of file diff --git a/src/store/shared/user/user.action.js b/src/store/shared/user/user.action.js new file mode 100644 index 0000000..67a7c1e --- /dev/null +++ b/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) +} \ No newline at end of file diff --git a/src/store/shared/user/user.reducer.js b/src/store/shared/user/user.reducer.js new file mode 100644 index 0000000..9efc5b9 --- /dev/null +++ b/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 + } +} \ No newline at end of file diff --git a/src/store/shared/user/user.selector.js b/src/store/shared/user/user.selector.js new file mode 100644 index 0000000..4249515 --- /dev/null +++ b/src/store/shared/user/user.selector.js @@ -0,0 +1 @@ +export const selectCurrentUser = (state) => state.user.currentUser \ No newline at end of file diff --git a/src/store/shared/user/user.types.js b/src/store/shared/user/user.types.js new file mode 100644 index 0000000..cc7839a --- /dev/null +++ b/src/store/shared/user/user.types.js @@ -0,0 +1,3 @@ +export const USER_ACTION_TYPES = { + SET_CURRENT_USER: "user/SET_CURRENT_USER" +} \ No newline at end of file