use redux to obtain token on List and ItemModal

client/src/components/App/index.jsx

@@ -1,20 +1,9 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import { BrowserRouter as Router } from "react-router-dom";
-import { useFirebase } from "../../services/auth";
 import MainNavbar from "../MainNavbar";
 import MainRouter from "../../routes";
 
 const App = () => {
-  // for testing only. Transfer Session to store.
-  // const [authUser, setAuthUser] = useState(null);
-  // const firebase = useFirebase();
-
-  // useEffect(() => {
-  //   firebase.auth.onAuthStateChanged((authUser) =>
-  //     authUser ? setAuthUser(authUser) : setAuthUser(null)
-  //   );
-  // }, [firebase.auth]);
-
   return (
     <Router>
       <MainNavbar />

client/src/components/ItemModal/index.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import {
   Button,
   Modal,
@@ -11,6 +11,7 @@ import {
   Input,
 } from "reactstrap";
 import { addItemAsync } from "../../store/itemSlice";
+import { selectToken } from "../../store/sessionSlice";
 
 const useStyles = () => ({
   button: {
@@ -22,12 +23,13 @@ const useStyles = () => ({
 export default function ItemModal() {
   const [modal, setModal] = useState(false);
   const [name, setName] = useState("");
+  const token = useSelector(selectToken);
   const dispatch = useDispatch();
 
   const toggle = () => setModal(!modal);
   const handleSubmit = (e) => {
     e.preventDefault();
-    dispatch(addItemAsync(name));
+    dispatch(addItemAsync(name, token));
     toggle();
   };
   const handleChange = (e) => setName(e.target.value);

client/src/components/List/index.jsx

@@ -6,7 +6,7 @@ import {
   deleteItemAsync,
   getItemsAsync,
 } from "../../store/itemSlice";
-import { useFirebase } from "../../services/auth";
+import { selectToken } from "../../store/sessionSlice";
 
 const useStyles = () => ({
   removeBtn: {
@@ -17,44 +17,42 @@ const useStyles = () => ({
 export default function List() {
   // useSelector links the component to the store data.
   const items = useSelector(selectItems);
+  const token = useSelector(selectToken);
   // useDispatch allows to emit actions.
   const dispatch = useDispatch();
 
   const styles = useStyles();
-  const firebase = useFirebase();
+
   // UseEffect loads items from the db when component renders.
   // Precising dependencies so it doesn't render infinitely.
   useEffect(() => {
-    firebase.auth.onAuthStateChanged(async (user) => {
-      if (user) {
-        const token = await firebase.auth.currentUser.getIdToken();
-        dispatch(getItemsAsync(token));
+    if (token) dispatch(getItemsAsync(token));
 
-        // push to authslice ...
-        //import axios from "axios";
-        // import * as URL from "../../constants/urls";
-        // const u = await firebase.auth.currentUser;
-        // console.log(u);
-        // await axios.post(
-        //   URL.USERS,
-        //   {
-        //     username: u.displayName,
-        //     email: u.email,
-        //     roles: {
-        //       ADMIN: true,
-        //     },
-        //     photoUrl: u.photoURL,
-        //     phoneNumber: u.phoneNumber,
-        //   },
-        //   {
-        //     headers: {
-        //       authorization: `Bearer ${token}`,
-        //     },
-        //   }
-        // );
-      }
-    });
-  }, [dispatch, firebase.auth]);
+    // push to authslice ...
+    //import axios from "axios";
+    // import * as URL from "../../constants/urls";
+    // const u = await firebase.auth.currentUser;
+    // console.log(u);
+    // await axios.post(
+    //   URL.USERS,
+    //   {
+    //     username: u.displayName,
+    //     email: u.email,
+    //     roles: {
+    //       ADMIN: true,
+    //     },
+    //     photoUrl: u.photoURL,
+    //     phoneNumber: u.phoneNumber,
+    //   },
+    //   {
+    //     headers: {
+    //       authorization: `Bearer ${token}`,
+    //     },
+    //   }
+    // );
+    // }
+    // });
+  }, [dispatch, token]);
 
   return (
     <ListGroup>
@@ -64,7 +62,7 @@ export default function List() {
             style={styles.removeBtn}
             color="danger"
             size="small"
-            onClick={() => dispatch(deleteItemAsync(_id))}
+            onClick={() => dispatch(deleteItemAsync(_id, token))}
           >
             &times;
           </Button>

client/src/components/MainNavbar/index.jsx

@@ -11,7 +11,11 @@ import {
   NavItem,
   NavLink,
 } from "reactstrap";
-import { selectLoggedIn, getAuthUserAsync } from "../../store/sessionSlice";
+import {
+  selectLoggedIn,
+  getAuthUserAsync,
+  getTokenAsync,
+} from "../../store/sessionSlice";
 import SignOutButton from "../SignOutButton";
 import * as ROUTES from "../../constants/routes";
 
@@ -25,7 +29,8 @@ const MainNavbar = () => {
 
   useEffect(() => {
     dispatch(getAuthUserAsync());
-  }, [dispatch]);
+    if (isAuthenticated) dispatch(getTokenAsync());
+  }, [dispatch, isAuthenticated]);
 
   return (
     <Navbar color="dark" dark expand="sm">

client/src/store/sessionSlice.js

@@ -55,10 +55,19 @@ export const getAuthUserAsync = () => async (dispatch) => {
   });
 };
 
+/**
+ * Use auth provider to get jwt token to access backend
+ */
+export const getTokenAsync = () => async (dispatch) => {
+  const token = await firebase.auth().currentUser.getIdToken();
+  dispatch(getToken(token));
+};
+
 export const { getAuthUser, getToken, logIn, logOut } = sessionSlice.actions;
 
 // selectors
 export const selectAuthUser = (state) => state.session;
 export const selectLoggedIn = (state) => state.session.loggedIn;
+export const selectToken = (state) => state.session.token;
 
 export default sessionSlice.reducer;