From 3595c7e87bbad04fc21f1f0cdf6f98f21a4c8288 Mon Sep 17 00:00:00 2001
From: Forrest Longanecker <ForrLong.Tech@gmail.com>
Date: Mon, 25 Nov 2019 11:07:46 -0800
Subject: [PATCH 1/4] user component now integrated with /api/users GET
 endpoint

---
 .../scripts/initial_credentials.dev.sql       |  2 +-
 .../expungeservice/endpoints/usersview.py     |  4 +-
 .../src/components/LoadingSpinner/index.tsx   | 17 +++++
 src/frontend/src/components/LogIn/index.tsx   |  2 +-
 .../src/components/NotAuthorized/index.tsx    | 14 ++++
 .../src/components/OeciLogin/index.tsx        |  2 +-
 src/frontend/src/components/Spinner/index.tsx |  9 ---
 .../TechnicalDifficulties/index.tsx           | 14 ++++
 src/frontend/src/components/User/index.tsx    | 24 +++++--
 .../src/components/UserList/index.tsx         | 68 +++++++++++++------
 src/frontend/src/containers/AllRecords.tsx    | 11 +--
 src/frontend/src/containers/AllStatus.tsx     |  8 ++-
 src/frontend/src/redux/groups/actions.ts      | 50 +++++++++-----
 src/frontend/src/redux/users/actions.ts       | 52 +++-----------
 src/frontend/src/redux/users/types.ts         |  3 +-
 15 files changed, 174 insertions(+), 106 deletions(-)
 create mode 100644 src/frontend/src/components/LoadingSpinner/index.tsx
 create mode 100644 src/frontend/src/components/NotAuthorized/index.tsx
 delete mode 100644 src/frontend/src/components/Spinner/index.tsx
 create mode 100644 src/frontend/src/components/TechnicalDifficulties/index.tsx

diff --git a/config/postgres/initdb/scripts/initial_credentials.dev.sql b/config/postgres/initdb/scripts/initial_credentials.dev.sql
index dbedf5d47..323a2d8f0 100644
--- a/config/postgres/initdb/scripts/initial_credentials.dev.sql
+++ b/config/postgres/initdb/scripts/initial_credentials.dev.sql
@@ -1,2 +1,2 @@
 SELECT * FROM USERS_CREATE( 'admin@email.com', 'pbkdf2:sha256:150000$c30CjWVB$d1d6d544dfffd2dee5488cfe89cc2f965a8c4cddbf9180ad206f272237a5fa1a', 'Ima Admin', 'Ima Group', true);
-SELECT * FROM USERS_CREATE('user@email.com', 'pbkdf2:sha256:150000$K5efuBwy$fcaa41a3203fd8f64b5d4aee241365ffa35e0a3a1c02f605bbc20cbea701cf89', 'Ima User', 'Ima Group' , true);
+SELECT * FROM USERS_CREATE('user@email.com', 'pbkdf2:sha256:150000$K5efuBwy$fcaa41a3203fd8f64b5d4aee241365ffa35e0a3a1c02f605bbc20cbea701cf89', 'Ima User', 'Ima Group' , false);
diff --git a/src/backend/expungeservice/endpoints/usersview.py b/src/backend/expungeservice/endpoints/usersview.py
index 203d1b379..85b15b365 100644
--- a/src/backend/expungeservice/endpoints/usersview.py
+++ b/src/backend/expungeservice/endpoints/usersview.py
@@ -107,10 +107,10 @@ def get(self, user_id):
             response_data: Dict[str, List[Dict[str, str]]] = {"users": []}
             for user_entry in user_db_data:
                 response_data["users"].append({
-                    "user_id": user_entry["user_id"],
+                    "id": user_entry["user_id"],
                     "email": user_entry["email"],
                     "name": user_entry["name"],
-                    "group_name": user_entry["group_name"],
+                    "group": user_entry["group_name"],
                     "admin": user_entry["admin"],
                     "timestamp": user_entry["date_created"]
                     })
diff --git a/src/frontend/src/components/LoadingSpinner/index.tsx b/src/frontend/src/components/LoadingSpinner/index.tsx
new file mode 100644
index 000000000..582526fee
--- /dev/null
+++ b/src/frontend/src/components/LoadingSpinner/index.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+interface Props {
+  inputString: string;
+}
+
+class LoadingSpinner extends React.Component<Props> {
+  render() {
+    return (
+      <p className="bg-white mv4 pa4 br3 fw6 tc">
+        <span className="spinner mr2"></span>Loading {this.props.inputString}...
+      </p>
+    );
+  }
+}
+
+export default LoadingSpinner;
diff --git a/src/frontend/src/components/LogIn/index.tsx b/src/frontend/src/components/LogIn/index.tsx
index 9f345c66e..a150129e0 100644
--- a/src/frontend/src/components/LogIn/index.tsx
+++ b/src/frontend/src/components/LogIn/index.tsx
@@ -153,7 +153,7 @@ class LogIn extends React.Component<Props, State> {
               ) : null}
               {this.state.invalidResponse === true ? (
                 <p id="no_match_msg" className="bg-washed-red mv4 pa3 br3 fw6">
-                  Technical difficulties try again later.
+                  Technical difficulties, please contact system administrator.
                 </p>
               ) : null}
             </div>
diff --git a/src/frontend/src/components/NotAuthorized/index.tsx b/src/frontend/src/components/NotAuthorized/index.tsx
new file mode 100644
index 000000000..6ebe14c10
--- /dev/null
+++ b/src/frontend/src/components/NotAuthorized/index.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+class NotAuthorized extends React.Component {
+  render() {
+    return (
+      <p className="bg-white mv4 pa4 br3 fw6 tc shadow br3">
+        You are not authorized to view this content, please contact system
+        administraitor.
+      </p>
+    );
+  }
+}
+
+export default NotAuthorized;
diff --git a/src/frontend/src/components/OeciLogin/index.tsx b/src/frontend/src/components/OeciLogin/index.tsx
index dc9457986..a69b547cf 100644
--- a/src/frontend/src/components/OeciLogin/index.tsx
+++ b/src/frontend/src/components/OeciLogin/index.tsx
@@ -133,7 +133,7 @@ class OeciLogin extends React.Component<Props, State> {
               ) : null}
               {this.state.invalidResponse === true ? (
                 <p id="no_match_msg" className="bg-washed-red mv4 pa3 br3 fw6">
-                  Technical difficulties try again later.
+                  Technical difficulties, please contact system administrator.
                 </p>
               ) : null}
             </div>
diff --git a/src/frontend/src/components/Spinner/index.tsx b/src/frontend/src/components/Spinner/index.tsx
deleted file mode 100644
index d27c2fa07..000000000
--- a/src/frontend/src/components/Spinner/index.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-
-export default function() {
-  return (
-    <p className="bg-white mv4 pa4 br3 fw6">
-      <span className="spinner mr2"></span>Loading your search results...
-    </p>
-  );
-}
diff --git a/src/frontend/src/components/TechnicalDifficulties/index.tsx b/src/frontend/src/components/TechnicalDifficulties/index.tsx
new file mode 100644
index 000000000..096156ac7
--- /dev/null
+++ b/src/frontend/src/components/TechnicalDifficulties/index.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+class TechnicalDifficulties extends React.Component {
+  render() {
+    return (
+      <p className="bg-white mv4 pa4 br3 fw6 tc shadow br3">
+        Something went wrong, please contact system administraitor to report
+        technical difficulties.
+      </p>
+    );
+  }
+}
+
+export default TechnicalDifficulties;
diff --git a/src/frontend/src/components/User/index.tsx b/src/frontend/src/components/User/index.tsx
index a557ec950..7679188af 100644
--- a/src/frontend/src/components/User/index.tsx
+++ b/src/frontend/src/components/User/index.tsx
@@ -8,14 +8,28 @@ interface Props {
 class User extends React.Component<Props> {
   public render() {
     return (
-      <tr>
-        <td className="pa3 bb b--black-20">
-          <a href="#" className="underline">
+      <tr className="bt b--black-20">
+        <td className="pa3">
+          <a href="/admin" className="underline">
             {this.props.user.name}
           </a>
         </td>
-        <td className="pa3 bb b--black-20">{this.props.user.role}</td>
-        <td className="pa3 bb b--black-20">{this.props.user.group}</td>
+        <td className="pa3">{this.props.user.admin ? 'Admin' : 'Search'}</td>
+        <td className="pa3">{this.props.user.group}</td>
+        <td className="pa3 flex justify-end">
+          <button
+            aria-label={`edit user: ${this.props.user.name}`}
+            className="navy hover-dark-blue"
+          >
+            <i aria-hidden="true" className="fa fa-pen pr3" />
+          </button>
+          <button
+            aria-label={`delete user: ${this.props.user.name}`}
+            className="navy hover-dark-blue"
+          >
+            <i aria-hidden="true" className="fa fa-trash" />
+          </button>
+        </td>
       </tr>
     );
   }
diff --git a/src/frontend/src/components/UserList/index.tsx b/src/frontend/src/components/UserList/index.tsx
index c8e65620a..11d088d6c 100644
--- a/src/frontend/src/components/UserList/index.tsx
+++ b/src/frontend/src/components/UserList/index.tsx
@@ -2,32 +2,57 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { AppState } from '../../redux/store';
 import { loadUsers } from '../../redux/users/actions';
-import { User as UserTypes, UserState } from '../../redux/users/types';
+import { UserState } from '../../redux/users/types';
 import User from '../User';
+import LoadingSpinner from '../LoadingSpinner';
+import NotAuthorized from '../NotAuthorized';
+import TechnicalDifficulties from '../TechnicalDifficulties';
 
 interface Props {
   users: UserState;
-  loadUsers: Function;
+  loadUsers: () => Promise<void>;
+}
+
+interface State {
+  errorType: string;
 }
 
 class UserList extends React.Component<Props> {
-  public componentWillMount() {
+  state: State = {
+    errorType: 'none'
+  };
+  componentDidMount() {
     // this will call the axios request to populate the component with userList
-    this.props.loadUsers();
+    this.props.loadUsers().catch(error => {
+      if (error.response.status === 403) {
+        // error if user is not admin
+        this.setState({ errorType: 'unauthorized' });
+      } else {
+        this.setState({ errorType: 'technical' });
+      }
+    });
   }
 
-  public displayUsers = (inputUsers: UserTypes[]) => {
-    if (inputUsers) {
-      const returnList = inputUsers.map(user => {
-        return <User key={user.id} user={user} />;
-      });
+  displayNoUsers = () => {
+    return this.state.errorType === 'none' ? (
+      <LoadingSpinner inputString={'Users'} />
+    ) : this.state.errorType === 'unauthorized' ? (
+      <NotAuthorized />
+    ) : (
+      <TechnicalDifficulties />
+    );
+  };
+
+  displayUsers = () => {
+    const returnList = this.props.users.userList.map(user => {
+      return <User key={user.id} user={user} />;
+    });
 
-      return returnList;
-    }
+    return returnList;
   };
 
-  public render() {
-    return (
+  render() {
+    return this.props.users.userList.length > 0 ? (
       <section className="cf bg-white shadow br3 mb5">
         <div className="pv4 ph3">
           <h1 className="f3 fw6 dib">Users</h1>
@@ -37,20 +62,21 @@ class UserList extends React.Component<Props> {
         </div>
 
         <div className="overflow-auto">
-          <table className="f6 w-100 mw8 center" data-cellspacing="0">
-            <thead>
+          <table className="f6 w-100 mw8 center collapse">
+            <thead className="bb b--black-20">
               <tr>
-                <th className="fw6 bb b--black-20 tl pb3 ph3 bg-white">Name</th>
-                <th className="fw6 bb b--black-20 tl pb3 ph3 bg-white">Role</th>
-                <th className="fw6 bb b--black-20 tl pb3 ph3 bg-white">Group</th>
+                <th className="fw6 tl pb3 ph3 bg-white">Name</th>
+                <th className="fw6 tl pb3 ph3 bg-white">Role</th>
+                <th className="fw6 tl pb3 ph3 bg-white">Group</th>
               </tr>
             </thead>
-            {this.props.users
-              ? this.displayUsers(this.props.users.userList)
-              : null}
+
+            <tbody className="lh-copy">{this.displayUsers()}</tbody>
           </table>
         </div>
       </section>
+    ) : (
+      this.displayNoUsers()
     );
   }
 }
diff --git a/src/frontend/src/containers/AllRecords.tsx b/src/frontend/src/containers/AllRecords.tsx
index d10e10737..fc5937ddd 100644
--- a/src/frontend/src/containers/AllRecords.tsx
+++ b/src/frontend/src/containers/AllRecords.tsx
@@ -44,7 +44,10 @@ const mapStateToProps = (state: AppState) => {
   };
 };
 
-export default connect(mapStateToProps, {
-  fetchRecords: loadSearchRecords,
-  clearRecords: clearSearchRecords
-})(AllRecords);
+export default connect(
+  mapStateToProps,
+  {
+    fetchRecords: loadSearchRecords,
+    clearRecords: clearSearchRecords
+  }
+)(AllRecords);
diff --git a/src/frontend/src/containers/AllStatus.tsx b/src/frontend/src/containers/AllStatus.tsx
index 877882a75..4baae5910 100644
--- a/src/frontend/src/containers/AllStatus.tsx
+++ b/src/frontend/src/containers/AllStatus.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { AppState } from '../redux/store';
-import Spinner from '../components/Spinner';
+import LoadingSpinner from '../components/LoadingSpinner';
 import NoSearchResults from '../components/NoSearchResults';
 
 type Props = {
@@ -12,7 +12,11 @@ class AllStatus extends React.Component<Props> {
   render() {
     return (
       <section>
-        {this.props.loading ? <Spinner /> : <NoSearchResults />}
+        {this.props.loading ? (
+          <LoadingSpinner inputString={'your search results'} />
+        ) : (
+          <NoSearchResults />
+        )}
       </section>
     );
   }
diff --git a/src/frontend/src/redux/groups/actions.ts b/src/frontend/src/redux/groups/actions.ts
index 542eab867..8ccc8609e 100644
--- a/src/frontend/src/redux/groups/actions.ts
+++ b/src/frontend/src/redux/groups/actions.ts
@@ -11,12 +11,12 @@ export const loadGroups = () => (dispatch: Dispatch) => {
           type: LOAD_GROUPS,
           groups
         })
-      )
-
+      );
     }, 1000);
   });
 };
 
+const date = () => new Date();
 // Data for loadGroups action to populate the store with group data
 const placeholderGroupData: Group[] = [
   {
@@ -28,21 +28,24 @@ const placeholderGroupData: Group[] = [
         group: 'Metropolitan Public Defender',
         id: 1,
         name: 'Jane Dolby',
-        role: 'Search'
+        admin: false,
+        timestamp: date()
       },
       {
         email: 'michael@email.com',
         group: 'Metropolitan Public Defender',
         id: 2,
         name: 'Michael Zhang',
-        role: 'Admin'
+        admin: true,
+        timestamp: date()
       },
       {
         email: 'melissa@email.com',
         group: 'Royce, Jennings & Coldwater',
         id: 3,
         name: 'Melissa Jennings',
-        role: 'Search'
+        admin: false,
+        timestamp: date()
       }
     ]
   },
@@ -55,42 +58,48 @@ const placeholderGroupData: Group[] = [
         group: 'Metropolitan Public Defender',
         id: 1,
         name: 'Jane Dolby',
-        role: 'Search'
+        admin: false,
+        timestamp: date()
       },
       {
         email: 'michael@email.com',
         group: 'Metropolitan Public Defender',
         id: 2,
         name: 'Michael Zhang',
-        role: 'Admin'
+        admin: true,
+        timestamp: date()
       },
       {
         email: 'melissa@email.com',
         group: 'Royce, Jennings & Coldwater',
         id: 3,
         name: 'Melissa Jennings',
-        role: 'Search'
+        admin: false,
+        timestamp: date()
       },
       {
         email: 'michael@email.com',
         group: 'Metropolitan Public Defender',
         id: 2,
         name: 'Michael Zhang',
-        role: 'Admin'
+        admin: true,
+        timestamp: date()
       },
       {
         email: 'melissa@email.com',
         group: 'Royce, Jennings & Coldwater',
         id: 3,
         name: 'Melissa Jennings',
-        role: 'Search'
+        admin: false,
+        timestamp: date()
       },
       {
         email: 'terri@email.com',
         group: 'Royce, Jennings & Coldwater',
         id: 4,
         name: 'Terri Royce',
-        role: 'Search'
+        admin: false,
+        timestamp: date()
       }
     ]
   },
@@ -103,28 +112,32 @@ const placeholderGroupData: Group[] = [
         group: 'Metropolitan Public Defender',
         id: 1,
         name: 'Jane Dolby',
-        role: 'Search'
+        admin: false,
+        timestamp: date()
       },
       {
         email: 'michael@email.com',
         group: 'Metropolitan Public Defender',
         id: 2,
         name: 'Michael Zhang',
-        role: 'Admin'
+        admin: true,
+        timestamp: date()
       },
       {
         email: 'melissa@email.com',
         group: 'Royce, Jennings & Coldwater',
         id: 3,
         name: 'Melissa Jennings',
-        role: 'Search'
+        admin: false,
+        timestamp: date()
       },
       {
         email: 'terri@email.com',
         group: 'Royce, Jennings & Coldwater',
         id: 4,
         name: 'Terri Royce',
-        role: 'Search'
+        admin: false,
+        timestamp: date()
       }
     ]
   },
@@ -137,16 +150,17 @@ const placeholderGroupData: Group[] = [
         group: 'Metropolitan Public Defender',
         id: 1,
         name: 'Jane Dolby',
-        role: 'Search'
+        admin: false,
+        timestamp: date()
       },
       {
         email: 'michael@email.com',
         group: 'Metropolitan Public Defender',
         id: 2,
         name: 'Michael Zhang',
-        role: 'Admin'
+        admin: true,
+        timestamp: date()
       }
     ]
   }
-
 ];
diff --git a/src/frontend/src/redux/users/actions.ts b/src/frontend/src/redux/users/actions.ts
index fbfb18a39..fad226def 100644
--- a/src/frontend/src/redux/users/actions.ts
+++ b/src/frontend/src/redux/users/actions.ts
@@ -1,47 +1,17 @@
 import { Dispatch } from 'redux';
-import { LOAD_USERS, User } from './types';
+import { LOAD_USERS } from './types';
+import apiService from '../../service/api-service';
 
-export const loadUsers = () => (dispatch: Dispatch) => {
-  return new Promise(resolve => {
-    setTimeout(() => {
-      // placeholderUserData will be replaced with the payload from the axios request
-      const users: User[] = placeholderUserData;
+export const loadUsers = () => {
+  return (dispatch: Dispatch) => {
+    return apiService(dispatch, {
+      url: '/api/users',
+      method: 'get'
+    }).then((response: any) => {
       dispatch({
         type: LOAD_USERS,
-        users
+        users: response.data.users
       });
-    }, 1000);
-  });
+    });
+  };
 };
-
-// Data for loadUsers action to populate the store with user data
-const placeholderUserData: User[] = [
-  {
-    email: 'jane@email.com',
-    group: 'Metropolitan Public Defender',
-    id: 1,
-    name: 'Jane Dolby',
-    role: 'Search'
-  },
-  {
-    email: 'michael@email.com',
-    group: 'Metropolitan Public Defender',
-    id: 2,
-    name: 'Michael Zhang',
-    role: 'Admin'
-  },
-  {
-    email: 'melissa@email.com',
-    group: 'Royce, Jennings & Coldwater',
-    id: 3,
-    name: 'Melissa Jennings',
-    role: 'Search'
-  },
-  {
-    email: 'terri@email.com',
-    group: 'Royce, Jennings & Coldwater',
-    id: 4,
-    name: 'Terri Royce',
-    role: 'Search'
-  }
-];
diff --git a/src/frontend/src/redux/users/types.ts b/src/frontend/src/redux/users/types.ts
index 3d8ccabf8..f6248d2df 100644
--- a/src/frontend/src/redux/users/types.ts
+++ b/src/frontend/src/redux/users/types.ts
@@ -3,11 +3,12 @@ export interface UserState {
 }
 
 export interface User {
+  admin: boolean;
   email: string;
   group: string;
   id: number;
   name: string;
-  role: string;
+  timestamp: Date;
 }
 
 export const LOAD_USERS = 'LOAD_USERS';

From acd3f4c52a8017c2d609ea7e52b0d7056118d819 Mon Sep 17 00:00:00 2001
From: Forrest Longanecker <ForrLong.Tech@gmail.com>
Date: Mon, 25 Nov 2019 12:01:52 -0800
Subject: [PATCH 2/4] changed /api/users GET test to expect updated response
 object

---
 src/backend/tests/endpoints/test_users.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/backend/tests/endpoints/test_users.py b/src/backend/tests/endpoints/test_users.py
index 918914733..9fe1dad15 100644
--- a/src/backend/tests/endpoints/test_users.py
+++ b/src/backend/tests/endpoints/test_users.py
@@ -113,8 +113,8 @@ def test_get_users_success(self):
         assert data["users"][0]["admin"] in [True, False]
         assert data["users"][0]["timestamp"]
         assert data["users"][0]["name"]
-        assert data["users"][0]["group_name"]
-        assert data["users"][0]["user_id"]
+        assert data["users"][0]["group"]
+        assert data["users"][0]["id"]
 
     def test_get_users_not_admin(self):
         self.login(self.user_data["user1"]["email"], self.user_data["user1"]["password"])

From cc6148beda83031db4eec28edce0da4f0a7e901b Mon Sep 17 00:00:00 2001
From: Forrest Longanecker <ForrLong.Tech@gmail.com>
Date: Mon, 25 Nov 2019 16:10:17 -0800
Subject: [PATCH 3/4] added CLEAR_USERS action, refactored displayUsers(),
 displayUserList() and displayNoUsers(), fixed typo

---
 .../src/components/NotAuthorized/index.tsx    |  2 +-
 .../TechnicalDifficulties/index.tsx           |  2 +-
 .../src/components/UserList/index.tsx         | 68 ++++++++++---------
 src/frontend/src/redux/system/actions.ts      |  2 +
 src/frontend/src/redux/users/reducer.ts       |  6 +-
 src/frontend/src/redux/users/types.ts         |  8 ++-
 6 files changed, 51 insertions(+), 37 deletions(-)

diff --git a/src/frontend/src/components/NotAuthorized/index.tsx b/src/frontend/src/components/NotAuthorized/index.tsx
index 6ebe14c10..a05449c0f 100644
--- a/src/frontend/src/components/NotAuthorized/index.tsx
+++ b/src/frontend/src/components/NotAuthorized/index.tsx
@@ -5,7 +5,7 @@ class NotAuthorized extends React.Component {
     return (
       <p className="bg-white mv4 pa4 br3 fw6 tc shadow br3">
         You are not authorized to view this content, please contact system
-        administraitor.
+        administrator.
       </p>
     );
   }
diff --git a/src/frontend/src/components/TechnicalDifficulties/index.tsx b/src/frontend/src/components/TechnicalDifficulties/index.tsx
index 096156ac7..8b659e946 100644
--- a/src/frontend/src/components/TechnicalDifficulties/index.tsx
+++ b/src/frontend/src/components/TechnicalDifficulties/index.tsx
@@ -4,7 +4,7 @@ class TechnicalDifficulties extends React.Component {
   render() {
     return (
       <p className="bg-white mv4 pa4 br3 fw6 tc shadow br3">
-        Something went wrong, please contact system administraitor to report
+        Something went wrong, please contact system administrator to report
         technical difficulties.
       </p>
     );
diff --git a/src/frontend/src/components/UserList/index.tsx b/src/frontend/src/components/UserList/index.tsx
index 11d088d6c..8d8d1f6a8 100644
--- a/src/frontend/src/components/UserList/index.tsx
+++ b/src/frontend/src/components/UserList/index.tsx
@@ -34,16 +34,16 @@ class UserList extends React.Component<Props> {
   }
 
   displayNoUsers = () => {
-    return this.state.errorType === 'none' ? (
-      <LoadingSpinner inputString={'Users'} />
-    ) : this.state.errorType === 'unauthorized' ? (
-      <NotAuthorized />
-    ) : (
-      <TechnicalDifficulties />
-    );
+    if (this.state.errorType === 'none') {
+      return <LoadingSpinner inputString={'Users'} />;
+    } else if (this.state.errorType === 'unauthorized') {
+      return <NotAuthorized />;
+    } else {
+      return <TechnicalDifficulties />;
+    }
   };
 
-  displayUsers = () => {
+  displayUserList = () => {
     const returnList = this.props.users.userList.map(user => {
       return <User key={user.id} user={user} />;
     });
@@ -51,33 +51,35 @@ class UserList extends React.Component<Props> {
     return returnList;
   };
 
-  render() {
-    return this.props.users.userList.length > 0 ? (
-      <section className="cf bg-white shadow br3 mb5">
-        <div className="pv4 ph3">
-          <h1 className="f3 fw6 dib">Users</h1>
-          <button className="bg-navy white bg-animate hover-bg-dark-blue fw6 br2 pv2 ph3 fr">
-            New User
-          </button>
-        </div>
+  displayUsers = () => (
+    <section className="cf bg-white shadow br3 mb5">
+      <div className="pv4 ph3">
+        <h1 className="f3 fw6 dib">Users</h1>
+        <button className="bg-navy white bg-animate hover-bg-dark-blue fw6 br2 pv2 ph3 fr">
+          New User
+        </button>
+      </div>
+
+      <div className="overflow-auto">
+        <table className="f6 w-100 mw8 center collapse">
+          <thead className="bb b--black-20">
+            <tr>
+              <th className="fw6 tl pb3 ph3 bg-white">Name</th>
+              <th className="fw6 tl pb3 ph3 bg-white">Role</th>
+              <th className="fw6 tl pb3 ph3 bg-white">Group</th>
+            </tr>
+          </thead>
 
-        <div className="overflow-auto">
-          <table className="f6 w-100 mw8 center collapse">
-            <thead className="bb b--black-20">
-              <tr>
-                <th className="fw6 tl pb3 ph3 bg-white">Name</th>
-                <th className="fw6 tl pb3 ph3 bg-white">Role</th>
-                <th className="fw6 tl pb3 ph3 bg-white">Group</th>
-              </tr>
-            </thead>
+          <tbody className="lh-copy">{this.displayUserList()}</tbody>
+        </table>
+      </div>
+    </section>
+  );
 
-            <tbody className="lh-copy">{this.displayUsers()}</tbody>
-          </table>
-        </div>
-      </section>
-    ) : (
-      this.displayNoUsers()
-    );
+  render() {
+    return this.props.users.userList.length > 0
+      ? this.displayUsers()
+      : this.displayNoUsers();
   }
 }
 
diff --git a/src/frontend/src/redux/system/actions.ts b/src/frontend/src/redux/system/actions.ts
index 64d9ba940..007ad2c11 100644
--- a/src/frontend/src/redux/system/actions.ts
+++ b/src/frontend/src/redux/system/actions.ts
@@ -2,6 +2,7 @@ import apiService from '../../service/api-service';
 import { removeCookie, hasOeciToken } from '../../service/cookie-service';
 import history from '../../service/history';
 import { LOG_IN, LOG_OUT } from './types';
+import { CLEAR_USERS } from '../users/types';
 import { Dispatch } from 'redux';
 import { AxiosError } from 'axios';
 
@@ -28,6 +29,7 @@ export function logOut(): any {
     })
       .then((response: any) => {
         removeCookie();
+        dispatch({ type: CLEAR_USERS, users: [] });
         dispatch({ type: LOG_OUT });
       })
       .catch((error: AxiosError) => {
diff --git a/src/frontend/src/redux/users/reducer.ts b/src/frontend/src/redux/users/reducer.ts
index 77eac56aa..e542ed471 100644
--- a/src/frontend/src/redux/users/reducer.ts
+++ b/src/frontend/src/redux/users/reducer.ts
@@ -1,4 +1,4 @@
-import { LOAD_USERS, UserActionTypes, UserState } from './types';
+import { CLEAR_USERS, LOAD_USERS, UserActionTypes, UserState } from './types';
 
 const initialState: UserState = {
   userList: []
@@ -13,6 +13,10 @@ export function usersReducer(
       return {
         userList: action.users
       };
+    case CLEAR_USERS:
+      return {
+        userList: []
+      };
     default:
       return state;
   }
diff --git a/src/frontend/src/redux/users/types.ts b/src/frontend/src/redux/users/types.ts
index f6248d2df..ac3d89d76 100644
--- a/src/frontend/src/redux/users/types.ts
+++ b/src/frontend/src/redux/users/types.ts
@@ -12,10 +12,16 @@ export interface User {
 }
 
 export const LOAD_USERS = 'LOAD_USERS';
+export const CLEAR_USERS = 'CLEAR_USERS';
 
 interface LoadUsersAction {
   type: typeof LOAD_USERS;
   users: User[];
 }
 
-export type UserActionTypes = LoadUsersAction;
+interface ClearUserAction {
+  type: typeof CLEAR_USERS;
+  users: User[];
+}
+
+export type UserActionTypes = LoadUsersAction | ClearUserAction;

From 2ebb3358ba60022a70ebe40c6b62477ab4bdeb3a Mon Sep 17 00:00:00 2001
From: Forrest Longanecker <ForrLong.Tech@gmail.com>
Date: Mon, 25 Nov 2019 16:56:47 -0800
Subject: [PATCH 4/4] moved clearUsers() call to componentWillUnmount()

---
 src/frontend/src/components/UserList/index.tsx |  9 +++++++--
 src/frontend/src/redux/system/actions.ts       |  2 --
 src/frontend/src/redux/users/actions.ts        | 10 +++++++++-
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/components/UserList/index.tsx b/src/frontend/src/components/UserList/index.tsx
index 8d8d1f6a8..4a5472842 100644
--- a/src/frontend/src/components/UserList/index.tsx
+++ b/src/frontend/src/components/UserList/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { AppState } from '../../redux/store';
-import { loadUsers } from '../../redux/users/actions';
+import { loadUsers, clearUsers } from '../../redux/users/actions';
 import { UserState } from '../../redux/users/types';
 import User from '../User';
 import LoadingSpinner from '../LoadingSpinner';
@@ -11,6 +11,7 @@ import TechnicalDifficulties from '../TechnicalDifficulties';
 interface Props {
   users: UserState;
   loadUsers: () => Promise<void>;
+  clearUsers: Function;
 }
 
 interface State {
@@ -33,6 +34,10 @@ class UserList extends React.Component<Props> {
     });
   }
 
+  componentWillUnmount() {
+    this.props.clearUsers();
+  }
+
   displayNoUsers = () => {
     if (this.state.errorType === 'none') {
       return <LoadingSpinner inputString={'Users'} />;
@@ -89,5 +94,5 @@ const mapStateToProps = (state: AppState) => ({
 
 export default connect(
   mapStateToProps,
-  { loadUsers }
+  { loadUsers, clearUsers }
 )(UserList);
diff --git a/src/frontend/src/redux/system/actions.ts b/src/frontend/src/redux/system/actions.ts
index 007ad2c11..64d9ba940 100644
--- a/src/frontend/src/redux/system/actions.ts
+++ b/src/frontend/src/redux/system/actions.ts
@@ -2,7 +2,6 @@ import apiService from '../../service/api-service';
 import { removeCookie, hasOeciToken } from '../../service/cookie-service';
 import history from '../../service/history';
 import { LOG_IN, LOG_OUT } from './types';
-import { CLEAR_USERS } from '../users/types';
 import { Dispatch } from 'redux';
 import { AxiosError } from 'axios';
 
@@ -29,7 +28,6 @@ export function logOut(): any {
     })
       .then((response: any) => {
         removeCookie();
-        dispatch({ type: CLEAR_USERS, users: [] });
         dispatch({ type: LOG_OUT });
       })
       .catch((error: AxiosError) => {
diff --git a/src/frontend/src/redux/users/actions.ts b/src/frontend/src/redux/users/actions.ts
index fad226def..fc73c5071 100644
--- a/src/frontend/src/redux/users/actions.ts
+++ b/src/frontend/src/redux/users/actions.ts
@@ -1,5 +1,5 @@
 import { Dispatch } from 'redux';
-import { LOAD_USERS } from './types';
+import { LOAD_USERS, CLEAR_USERS } from './types';
 import apiService from '../../service/api-service';
 
 export const loadUsers = () => {
@@ -15,3 +15,11 @@ export const loadUsers = () => {
     });
   };
 };
+
+export const clearUsers = () => {
+  return (dispatch: Dispatch) => {
+    dispatch({
+      type: CLEAR_USERS
+    });
+  };
+};