adds sessionSlice; adds sessionReducer to store; use redux in MainNavBar;

client/src/components/MainNavbar/index.jsx

@@ -1,5 +1,6 @@
-import React, { useState } from "react";
+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,
@@ -13,11 +14,20 @@ import {
 } from "reactstrap";
 import SignOutButton from "../SignOutButton";
 import * as ROUTES from "../../constants/routes";
+import { selectLoggedIn, getAuthUserAsync } from "../../store/sessionSlice";
 
-const MainNavbar = ({ authUser }) => {
+//{ authUser }
+const MainNavbar = () => {
   const [isOpen, setIsOpen] = useState(false);
   const toggle = () => setIsOpen(!isOpen);
 
+  const authUser = useSelector(selectLoggedIn);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(getAuthUserAsync());
+  }, [dispatch]);
+
   return (
     <Navbar color="dark" dark expand="sm">
       <Container>

client/src/services/auth/firebase.js

@@ -1,4 +1,4 @@
-import app from "firebase/app";
+import * as firebase from "firebase/app";
 // import "firebase/firestore";
 import "firebase/auth";
 import config from "./config.json";
@@ -18,11 +18,11 @@ const CONFIG = {
 // Firebase services as auth and firestore.
 export default class Firebase {
   constructor() {
-    app.initializeApp(CONFIG);
-    this.auth = app.auth();
+    // firebase.initializeApp(CONFIG);
+    this.auth = firebase.auth();
   }
 
-  provider = new app.auth.GoogleAuthProvider();
+  provider = new firebase.auth.GoogleAuthProvider();
 
   signInWithGoogle = () =>
     this.auth
@@ -40,4 +40,13 @@ export default class Firebase {
   resetPassword = (email) => this.auth.sendPasswordResetEmail(email);
 
   updatePassword = (password) => this.auth.currentUser.updatePassword(password);
+
+  // getAuthState = async () =>
+  //   this.auth.onAuthStateChanged((authUser) =>
+  //     authUser ? setAuthUser(authUser) : setAuthUser(null)
+  //   );
 }
+
+firebase.initializeApp(CONFIG);
+
+export { firebase };

client/src/services/auth/index.js

@@ -1,6 +1,6 @@
 // This file centralize all Firebase related exports
-import Firebase from "./firebase";
+import Firebase, { firebase } from "./firebase";
 import FirebaseContext, { useFirebase } from "./context";
 
 export default Firebase;
-export { FirebaseContext, useFirebase };
+export { FirebaseContext, useFirebase, firebase };

client/src/store/index.js

@@ -1,8 +1,10 @@
 import { configureStore } from "@reduxjs/toolkit";
 import itemReducer from "./itemSlice";
+import sessionReducer from "./sessionSlice";
 
 export default configureStore({
   reducer: {
     item: itemReducer,
+    session: sessionReducer,
   },
 });

client/src/store/sessionSlice.js

@@ -0,0 +1,63 @@
+import { createSlice } from "@reduxjs/toolkit";
+import { firebase } from "../services/auth";
+
+export const sessionSlice = createSlice({
+  name: "session",
+  initialState: {
+    username: "",
+    email: "",
+    photoURL: "",
+    phoneNumber: "",
+    roles: {},
+    token: "",
+    loggedIn: false,
+    error: null,
+  },
+  reducers: {
+    getAuthUser: (state, action) => ({
+      ...state,
+      ...action.payload,
+    }),
+    addAuthUser: (state, action) => {},
+    getToken: (state, action) => ({
+      ...state,
+      token: action.payload,
+    }),
+    logIn: (state) => ({
+      ...state,
+      loggedIn: true,
+    }),
+    logOut: (state) => ({
+      ...state,
+      loggedIn: false,
+    }),
+  },
+});
+
+/**
+ * Use Auth provider to get credentials
+ */
+export const getAuthUserAsync = () => async (dispatch) => {
+  firebase.auth().onAuthStateChanged((user) => {
+    if (user) {
+      const newUser = {
+        username: user.displayName,
+        email: user.email,
+        photoURL: user.photoURL,
+        phoneNumber: user.phoneNumber,
+        loggedIn: true,
+        error: null,
+      };
+      dispatch(getAuthUser(newUser));
+    } else {
+      dispatch(logOut);
+    }
+  });
+};
+
+export const { getAuthUser, getToken, logIn, logOut } = sessionSlice.actions;
+
+export const selectAuthUser = (state) => state.session;
+export const selectLoggedIn = (state) => state.session.loggedIn;
+
+export default sessionSlice.reducer;