Add logout button - closes #1653

src/frontend/src/components/Header/index.tsx

@@ -1,36 +1,62 @@
 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";
 
-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"
+type HeaderProps = {
+  isLoggedIn: boolean;
+};
+
+const mapStateToProps = (state: RootState) => ({
+  isLoggedIn: state.auth.loggedIn,
+});
+
+function Header({ isLoggedIn }: HeaderProps) {
+  const handleLogOut = () => {
+    oeciLogout();
+    store.dispatch(setLoggedIn(false));
+  };
+
+  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>
+          {isLoggedIn && (
+            <button
+              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"
             >
-              Search
-            </Link>
-          </div>
-        </nav>
-      </div>
-    );
-  }
+              Log Out
+            </button>
+          )}
+        </div>
+      </nav>
+    </div>
+  );
 }
+
+export default connect(mapStateToProps)(Header);

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;

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

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,13 @@ export function checkOeciRedirect() {
     history.replace("/oeci");
   }
 }
+
+export function isLoggedIn() {
+  return hasOeciToken();
+}
+
+export function oeciLogout() {
+  removeCookie();
+  store.dispatch(clearAllData());
+  history.replace("/oeci");
+}

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");
     }
   });