From e939f7d1c81f1eeb1054d898938e01a3bebb1415 Mon Sep 17 00:00:00 2001
From: Treasure Porth <treasure@scrimba.com>
Date: Wed, 22 Mar 2023 12:58:38 -0700
Subject: [PATCH 1/5] add function for logout and to check login status

---
 src/frontend/src/service/cookie-service.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/frontend/src/service/cookie-service.ts b/src/frontend/src/service/cookie-service.ts
index f1c14a85f..e76701224 100644
--- a/src/frontend/src/service/cookie-service.ts
+++ b/src/frontend/src/service/cookie-service.ts
@@ -1,4 +1,5 @@
 import history from "../service/history";
+import store, {clearAllData} from "../redux/store";
 
 interface Cookie {
   [key: string]: string;
@@ -38,3 +39,14 @@ export function checkOeciRedirect() {
     history.replace("/oeci");
   }
 }
+
+export function isLoggedIn() {
+  return hasOeciToken();
+}
+
+export function oeciLogout() {
+  removeCookie();
+  store.dispatch(clearAllData());
+  history.replace("/oeci");
+}
+

From 8e3a16c76d6b7e883a08c33534b9799d2641b2b0 Mon Sep 17 00:00:00 2001
From: Treasure Porth <treasure@scrimba.com>
Date: Wed, 22 Mar 2023 13:31:41 -0700
Subject: [PATCH 2/5] Add button to header

---
 src/frontend/src/components/Header/index.tsx | 79 ++++++++++++--------
 1 file changed, 47 insertions(+), 32 deletions(-)

diff --git a/src/frontend/src/components/Header/index.tsx b/src/frontend/src/components/Header/index.tsx
index 1866e5602..3ff6afa3d 100644
--- a/src/frontend/src/components/Header/index.tsx
+++ b/src/frontend/src/components/Header/index.tsx
@@ -1,36 +1,51 @@
-import React from "react";
-import { Link } from "react-router-dom";
+import React, {useState, useEffect} from "react";
+import { Link, useLocation } from "react-router-dom";
 import Logo from "../Logo";
+import { isLoggedIn, oeciLogout } from "../../service/cookie-service";
 
-export default class Header extends React.Component {
-  public render() {
-    return (
-      <div className="bg-white shadow">
-        <nav 
-          className="mw8 relative center flex flex-wrap justify-between pa3"
-          aria-label="Primary"
-        >
-          <div className="logo mb4 mb0-ns">
-            <Link to="/" aria-label="Home">
-              <Logo />
-            </Link>
-          </div>
-          <div className="mt5 mt2-ns">
-            <Link
-              to="/manual"
-              className="link hover-blue f5 fw6 pv2 ph0 ph3-ns mr4-ns"
-            >
-              Manual
-            </Link>
-            <Link
-              to="/record-search"
-              className="absolute top-1 right-1 static-ns bg-blue white bg-animate hover-bg-dark-blue f5 fw6 br2 pv2 ph3"
+
+export default function Header (){
+  const [loggedIn, setLoggedIn] = useState(isLoggedIn());
+  const location = useLocation();
+
+  useEffect(() => {
+    setLoggedIn(isLoggedIn());
+  }, [location]);
+  
+  return (
+    <div className="bg-white shadow">
+      <nav 
+        className="mw8 relative center flex flex-wrap justify-between pa3"
+        aria-label="Primary"
+      >
+        <div className="logo mb4 mb0-ns">
+          <Link to="/" aria-label="Home">
+            <Logo />
+          </Link>
+        </div>
+        <div className="mt5 mt2-ns">
+          <Link
+            to="/manual"
+            className="link hover-blue f5 fw6 pv2 ph0 ph3-ns mr4-ns"
+          >
+            Manual
+          </Link>
+          <Link
+            to="/record-search"
+            className="absolute top-1 right-1 static-ns bg-blue white bg-animate hover-bg-dark-blue f5 fw6 br2 pv2 ph3"
+          >
+            Search
+          </Link>
+          {loggedIn && (
+            <button
+              onClick={oeciLogout}
+              className="absolute top-1 left-2 static-ns bg-white f5 fw6 br2 ba b--blue blue link hover-dark-blue pv2 ph3 ml2"
             >
-              Search
-            </Link>
-          </div>
-        </nav>
-      </div>
-    );
-  }
+              Log Out
+            </button>
+          )}
+        </div>
+      </nav>
+    </div>
+  );
 }

From c0458d30d4abf63526c0ffc6a0aa688a360cf38a Mon Sep 17 00:00:00 2001
From: Treasure Porth <treasure@scrimba.com>
Date: Thu, 23 Mar 2023 20:21:13 -0700
Subject: [PATCH 3/5] run prettier

---
 src/frontend/src/components/Header/index.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/components/Header/index.tsx b/src/frontend/src/components/Header/index.tsx
index 3ff6afa3d..f9650b978 100644
--- a/src/frontend/src/components/Header/index.tsx
+++ b/src/frontend/src/components/Header/index.tsx
@@ -1,20 +1,19 @@
-import React, {useState, useEffect} from "react";
+import React, { useState, useEffect } from "react";
 import { Link, useLocation } from "react-router-dom";
 import Logo from "../Logo";
 import { isLoggedIn, oeciLogout } from "../../service/cookie-service";
 
-
-export default function Header (){
+export default function Header() {
   const [loggedIn, setLoggedIn] = useState(isLoggedIn());
   const location = useLocation();
 
   useEffect(() => {
     setLoggedIn(isLoggedIn());
   }, [location]);
-  
+
   return (
     <div className="bg-white shadow">
-      <nav 
+      <nav
         className="mw8 relative center flex flex-wrap justify-between pa3"
         aria-label="Primary"
       >

From 219af29da0fbe7a55c655cadf3f0c128377a80f1 Mon Sep 17 00:00:00 2001
From: Treasure Porth <treasure@scrimba.com>
Date: Thu, 23 Mar 2023 20:32:46 -0700
Subject: [PATCH 4/5] minor formatting fix

---
 src/frontend/src/service/cookie-service.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/frontend/src/service/cookie-service.ts b/src/frontend/src/service/cookie-service.ts
index e76701224..9ed6928b3 100644
--- a/src/frontend/src/service/cookie-service.ts
+++ b/src/frontend/src/service/cookie-service.ts
@@ -1,5 +1,5 @@
 import history from "../service/history";
-import store, {clearAllData} from "../redux/store";
+import store, { clearAllData } from "../redux/store";
 
 interface Cookie {
   [key: string]: string;
@@ -49,4 +49,3 @@ export function oeciLogout() {
   store.dispatch(clearAllData());
   history.replace("/oeci");
 }
-

From 9501855dc66a4503c7dc189c596aceb7065a835c Mon Sep 17 00:00:00 2001
From: Treasure Porth <treasure@scrimba.com>
Date: Fri, 24 Mar 2023 14:32:52 -0700
Subject: [PATCH 5/5] add auth state redux and update relevent files

---
 src/frontend/src/components/Header/index.tsx | 34 +++++++++++++-------
 src/frontend/src/redux/authSlice.ts          | 20 ++++++++++++
 src/frontend/src/redux/store.tsx             |  2 ++
 src/frontend/src/service/oeci.ts             |  3 ++
 4 files changed, 48 insertions(+), 11 deletions(-)
 create mode 100644 src/frontend/src/redux/authSlice.ts

diff --git a/src/frontend/src/components/Header/index.tsx b/src/frontend/src/components/Header/index.tsx
index f9650b978..5dcc81e4e 100644
--- a/src/frontend/src/components/Header/index.tsx
+++ b/src/frontend/src/components/Header/index.tsx
@@ -1,15 +1,25 @@
-import React, { useState, useEffect } from "react";
-import { Link, useLocation } from "react-router-dom";
+import React from "react";
+import { Link } from "react-router-dom";
+import { connect } from "react-redux";
+import { oeciLogout } from "../../service/cookie-service";
+import store, { RootState } from "../../redux/store";
+import { setLoggedIn } from "../../redux/authSlice";
+
 import Logo from "../Logo";
-import { isLoggedIn, oeciLogout } from "../../service/cookie-service";
 
-export default function Header() {
-  const [loggedIn, setLoggedIn] = useState(isLoggedIn());
-  const location = useLocation();
+type HeaderProps = {
+  isLoggedIn: boolean;
+};
+
+const mapStateToProps = (state: RootState) => ({
+  isLoggedIn: state.auth.loggedIn,
+});
 
-  useEffect(() => {
-    setLoggedIn(isLoggedIn());
-  }, [location]);
+function Header({ isLoggedIn }: HeaderProps) {
+  const handleLogOut = () => {
+    oeciLogout();
+    store.dispatch(setLoggedIn(false));
+  };
 
   return (
     <div className="bg-white shadow">
@@ -35,9 +45,9 @@ export default function Header() {
           >
             Search
           </Link>
-          {loggedIn && (
+          {isLoggedIn && (
             <button
-              onClick={oeciLogout}
+              onClick={handleLogOut}
               className="absolute top-1 left-2 static-ns bg-white f5 fw6 br2 ba b--blue blue link hover-dark-blue pv2 ph3 ml2"
             >
               Log Out
@@ -48,3 +58,5 @@ export default function Header() {
     </div>
   );
 }
+
+export default connect(mapStateToProps)(Header);
diff --git a/src/frontend/src/redux/authSlice.ts b/src/frontend/src/redux/authSlice.ts
new file mode 100644
index 000000000..b1449bd4a
--- /dev/null
+++ b/src/frontend/src/redux/authSlice.ts
@@ -0,0 +1,20 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { hasOeciToken } from '../service/cookie-service';
+
+const initialState = {
+  loggedIn: hasOeciToken(),
+};
+
+const authSlice = createSlice({
+  name: 'auth',
+  initialState,
+  reducers: {
+    setLoggedIn: (state, action) => {
+      state.loggedIn = action.payload;
+    },
+  },
+});
+
+export const { setLoggedIn } = authSlice.actions;
+
+export default authSlice.reducer;
diff --git a/src/frontend/src/redux/store.tsx b/src/frontend/src/redux/store.tsx
index 7e56d8a4f..9a1ad83fd 100644
--- a/src/frontend/src/redux/store.tsx
+++ b/src/frontend/src/redux/store.tsx
@@ -9,6 +9,7 @@ import summarySlice from "./summarySlice";
 import editingSlice from "./editingSlice";
 import statsSlice from "./statsSlice";
 import searchFormSlice from "./searchFormSlice";
+import authSlice from "./authSlice";
 
 export const clearAllData = createAction("CLEAR_ALL_DATA");
 
@@ -19,6 +20,7 @@ const appReducer = combineReducers({
   editing: editingSlice,
   stats: statsSlice,
   searchForm: searchFormSlice,
+  auth: authSlice,
 });
 
 // https://stackoverflow.com/questions/35622588/how-to-reset-the-state-of-a-redux-store
diff --git a/src/frontend/src/service/oeci.ts b/src/frontend/src/service/oeci.ts
index 5c195fd99..837d3091c 100644
--- a/src/frontend/src/service/oeci.ts
+++ b/src/frontend/src/service/oeci.ts
@@ -1,6 +1,8 @@
 import apiService from "./api-service";
 import { hasOeciToken } from "./cookie-service";
 import history from "./history";
+import store from "../redux/store";
+import { setLoggedIn } from "../redux/authSlice";
 
 export default function oeciLogIn(username: string, password: string): any {
   return apiService(() => {}, {
@@ -10,6 +12,7 @@ export default function oeciLogIn(username: string, password: string): any {
     withCredentials: true,
   }).then((response: any) => {
     if (hasOeciToken()) {
+      store.dispatch(setLoggedIn(true));
       history.push("/record-search");
     }
   });