use redux for PrivateRoute

client/src/components/App/index.jsx

@@ -6,18 +6,18 @@ import MainRouter from "../../routes";
 
 const App = () => {
   // for testing only. Transfer Session to store.
-  const [authUser, setAuthUser] = useState(null);
-  const firebase = useFirebase();
+  // const [authUser, setAuthUser] = useState(null);
+  // const firebase = useFirebase();
 
-  useEffect(() => {
-    firebase.auth.onAuthStateChanged((authUser) =>
-      authUser ? setAuthUser(authUser) : setAuthUser(null)
-    );
-  }, [firebase.auth]);
+  // useEffect(() => {
+  //   firebase.auth.onAuthStateChanged((authUser) =>
+  //     authUser ? setAuthUser(authUser) : setAuthUser(null)
+  //   );
+  // }, [firebase.auth]);
 
   return (
     <Router>
-      <MainNavbar authUser={authUser} />
+      <MainNavbar />
       <MainRouter />
     </Router>
   );

client/src/components/MainNavbar/index.jsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
 import { useSelector, useDispatch } from "react-redux";
-import PropTypes from "prop-types";
 import {
   Collapse,
   Container,
@@ -12,16 +11,16 @@ import {
   NavItem,
   NavLink,
 } from "reactstrap";
+import { selectLoggedIn, getAuthUserAsync } from "../../store/sessionSlice";
 import SignOutButton from "../SignOutButton";
 import * as ROUTES from "../../constants/routes";
-import { selectLoggedIn, getAuthUserAsync } from "../../store/sessionSlice";
 
-//{ authUser }
 const MainNavbar = () => {
   const [isOpen, setIsOpen] = useState(false);
   const toggle = () => setIsOpen(!isOpen);
 
-  const authUser = useSelector(selectLoggedIn);
+  //fetch logIn status from store
+  const isAuthenticated = useSelector(selectLoggedIn);
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -32,12 +31,12 @@ const MainNavbar = () => {
     <Navbar color="dark" dark expand="sm">
       <Container>
         <NavbarBrand>
-          <Link to={authUser ? ROUTES.APP : ROUTES.LANDING}>App</Link>
+          <Link to={isAuthenticated ? ROUTES.APP : ROUTES.LANDING}>App</Link>
         </NavbarBrand>
         <NavbarToggler onClick={toggle} />
         <Collapse isOpen={isOpen} navbar>
           <Nav className="ml-auto" navbar>
-            {authUser && (
+            {isAuthenticated && (
               <NavItem>
                 <NavLink>
                   <Link to={ROUTES.ACCOUNT}>Account</Link>
@@ -60,7 +59,7 @@ const MainNavbar = () => {
             </NavItem>
             <NavItem>
               <NavLink>
-                {authUser ? (
+                {isAuthenticated ? (
                   <SignOutButton />
                 ) : (
                   <Link to={ROUTES.SIGN_IN}>Sign In</Link>
@@ -74,8 +73,4 @@ const MainNavbar = () => {
   );
 };
 
-MainNavbar.propTypes = {
-  authUser: PropTypes.any.isRequired,
-};
-
 export default MainNavbar;

client/src/routes/PrivateRoute.jsx

@@ -2,6 +2,12 @@ import React, { useEffect, useState } from "react";
 import { withRouter, Route } from "react-router-dom";
 import { useFirebase } from "../services/auth";
 import * as ROUTES from "../constants/routes";
+import { useSelector, useDispatch } from "react-redux";
+import {
+  selectAuthUser,
+  getAuthUserAsync,
+  selectLoggedIn,
+} from "../store/sessionSlice";
 
 const PrivateRoute = ({
   component: Component,
@@ -10,21 +16,31 @@ const PrivateRoute = ({
   history,
   ...rest
 }) => {
-  const [authUser, setAuthUser] = useState(null);
-  const firebase = useFirebase();
+  // const [authUser, setAuthUser] = useState(null);
+  // const firebase = useFirebase();
+  const authUser = useSelector(selectAuthUser);
+
+  const dispatch = useDispatch();
 
   useEffect(() => {
-    firebase.auth.onAuthStateChanged((authUser) => {
-      if (!condition(authUser)) {
-        history.push(ROUTES.SIGN_IN);
-      } else {
-        setAuthUser(authUser);
-      }
-    });
-  }, [firebase.auth, condition, history]);
+    // dispatch(getAuthUserAsync())
+
+    if (!condition(authUser)) {
+      history.push(ROUTES.SIGN_IN);
+    }
+    // else {
+    //   setAuthUser(authUser);
+    // }
+  }, [
+    // firebase.auth,
+    condition,
+    history,
+  ]);
 
   const render = (props) => <Component {...props} />;
-  return authUser ? <Route path={path} render={render} {...rest} /> : null;
+  return condition(authUser) ? (
+    <Route path={path} render={render} {...rest} />
+  ) : null;
 };
 
 export default withRouter(PrivateRoute);

client/src/store/sessionSlice.js

@@ -57,6 +57,7 @@ export const getAuthUserAsync = () => async (dispatch) => {
 
 export const { getAuthUser, getToken, logIn, logOut } = sessionSlice.actions;
 
+// selectors
 export const selectAuthUser = (state) => state.session;
 export const selectLoggedIn = (state) => state.session.loggedIn;