From f3724e8dc86d855d8109fd3e28034f35f0a10616 Mon Sep 17 00:00:00 2001
From: Ellen Duong <shi.ellenduong@gmail.com>
Date: Tue, 6 Feb 2024 16:09:27 -0500
Subject: [PATCH] feat: basic logging in

---
 src/App.js                                    |  4 ++--
 src/components/LoginButton.tsx                | 12 +++++++++++
 .../react-ccv-components/Navbar.tsx           | 14 +++++++------
 src/store/slice/appState.js                   |  7 ++++++-
 src/utils/firebase.ts                         | 20 ++++++++++++++++---
 5 files changed, 45 insertions(+), 12 deletions(-)
 create mode 100644 src/components/LoginButton.tsx

diff --git a/src/App.js b/src/App.js
index 0b3ab43..3d97839 100755
--- a/src/App.js
+++ b/src/App.js
@@ -4,10 +4,10 @@ import { Navbar } from './components/react-ccv-components/Navbar.tsx';
 import Footer from './components/react-ccv-components/Footer';
 
 import { ContentPage } from './components/ContentPage';
-// import { useAuthStateChanged } from './utils/firebase.ts';
+import { useAuthStateChanged } from './utils/firebase.ts';
 
 export function App() {
-  // useAuthStateChanged()
+  useAuthStateChanged();
 
   return (
     <div aria-live="polite">
diff --git a/src/components/LoginButton.tsx b/src/components/LoginButton.tsx
new file mode 100644
index 0000000..073dfd8
--- /dev/null
+++ b/src/components/LoginButton.tsx
@@ -0,0 +1,12 @@
+import { Button, ButtonProps } from 'react-bootstrap';
+import { handleLogin } from '../utils/firebase.ts';
+
+type LoginButtonProps = ButtonProps;
+
+export const LoginButton = ({ ...buttonProps }: LoginButtonProps) => {
+  return (
+    <Button onClick={handleLogin} {...buttonProps}>
+      Log In
+    </Button>
+  );
+};
diff --git a/src/components/react-ccv-components/Navbar.tsx b/src/components/react-ccv-components/Navbar.tsx
index cd54956..d475e78 100644
--- a/src/components/react-ccv-components/Navbar.tsx
+++ b/src/components/react-ccv-components/Navbar.tsx
@@ -2,12 +2,15 @@ import React from 'react';
 import Container from 'react-bootstrap/Container';
 import { Nav, Navbar as DefaultNavbar } from 'react-bootstrap';
 
+import { useSelector } from 'react-redux';
+import { handleLogin, handleLogout } from '../../utils/firebase.ts';
+import { selectUser } from '../../store/slice/appState';
 import { ReactComponent as CCVLogo } from './assets/svg/ccv-logo.svg';
 import { ReactComponent as BrownLogo } from './assets/svg/brown-logo.svg';
 
-import '../../styles/custom.scss';
-
 export const Navbar = () => {
+  const user = useSelector(selectUser);
+
   return (
     <DefaultNavbar expand="lg" className="bg-body-tertiary">
       <Container>
@@ -20,10 +23,9 @@ export const Navbar = () => {
         <DefaultNavbar.Toggle aria-controls="basic-navbar-nav" />
         <DefaultNavbar.Collapse id="basic-navbar-nav" role="" className="justify-content-end">
           <Nav className="ml-auto">
-            {/*<Navbar.Text>*/}
-            {/*  Signed in as: <a href="#login">Mark Otto</a>*/}
-            {/*</Navbar.Text>*/}
-            <Nav.Link href="#link">Login</Nav.Link>
+            <DefaultNavbar.Text>Signed in as: {user.displayName}</DefaultNavbar.Text>
+            <Nav.Link onClick={handleLogin}>Login</Nav.Link>
+            <Nav.Link onClick={handleLogout}>Logout</Nav.Link>
           </Nav>
         </DefaultNavbar.Collapse>
       </Container>
diff --git a/src/store/slice/appState.js b/src/store/slice/appState.js
index fdf1e26..856af4f 100644
--- a/src/store/slice/appState.js
+++ b/src/store/slice/appState.js
@@ -4,15 +4,20 @@ export const appStateSlice = createSlice({
   name: 'appState',
   initialState: {
     publications: [],
+    user: {},
   },
   reducers: {
     setPublications: (state, action) => {
       state.publications = action.payload;
     },
+    setUser: (state, action) => {
+      state.user = action.payload;
+    },
   },
 });
 
-export const { setPublications } = appStateSlice.actions;
+export const { setPublications, setUser } = appStateSlice.actions;
 export const selectPublications = (state) => state.publications;
+export const selectUser = (state) => state.user;
 
 export default appStateSlice.reducer;
diff --git a/src/utils/firebase.ts b/src/utils/firebase.ts
index 42b04be..a258c63 100644
--- a/src/utils/firebase.ts
+++ b/src/utils/firebase.ts
@@ -10,7 +10,7 @@ import {
 } from 'firebase/auth';
 import { getFirestore, doc, setDoc, collection, onSnapshot } from 'firebase/firestore';
 
-import { setPublications } from '../store/slice/appState';
+import { setPublications, setUser } from '../store/slice/appState';
 
 const firebaseConfig = {
   apiKey: 'AIzaSyBlu1GzA5jvM6mh6taIcjtNgcSEVxlxa1Q',
@@ -53,12 +53,26 @@ export const handleLogout = async () => {
  * Custom Reach hook to subscribe to Authentication changes
  */
 export const useAuthStateChanged = () => {
+  const dispatch = useDispatch();
+
   useEffect(() => {
     const unsubscribe = onAuthStateChanged(auth, (user) => {
       if (user) {
-        console.log(user);
+        const { displayName, email } = user;
+
+        dispatch(
+          setUser({
+            displayName,
+            email,
+          })
+        );
       } else {
-        console.log('Signed Out');
+        dispatch(
+          setUser({
+            displayName: '',
+            email: '',
+          })
+        );
       }
     });