From 9e33307be611f2eabc0cd34a263c52faf2c6a6a1 Mon Sep 17 00:00:00 2001
From: Brad <brad@brads-mbp.lan>
Date: Wed, 26 Jul 2023 15:50:45 -0700
Subject: [PATCH] edit User model and handlers for isActive status

---
 backend/models/user.model.js                  |  6 ++++--
 client/src/api/UserApiService.js              | 16 ++++++++++++++++
 client/src/components/user-admin/EditUsers.js | 18 +++++++++++++++++-
 client/src/pages/UserAdmin.js                 |  8 ++++++++
 client/src/sass/UserAdmin.scss                | 16 ++++++++++++++++
 5 files changed, 61 insertions(+), 3 deletions(-)

diff --git a/backend/models/user.model.js b/backend/models/user.model.js
index 0534d6107..1424a3753 100644
--- a/backend/models/user.model.js
+++ b/backend/models/user.model.js
@@ -33,9 +33,10 @@ const userSchema = mongoose.Schema({
   isHflaGithubMember: { type: Boolean }, // pull from API once github handle in place?
   githubPublic2FA: { type: Boolean }, // does the user have 2FA enabled on their github and membership set to public?
   availability: { type: String }, // availability to meet outside of hacknight times; string for now, more structured in future
-  managedProjects: [{ type: String}] // Which projects managed by user.
+  managedProjects: [{ type: String}], // Which projects managed by user.
   //currentProject: { type: String }              // no longer need this as we can get it from Project Team Member table
   // password: { type: String, required: true }
+  isActive: { type: Boolean, default: true }
 });
 
 userSchema.methods.serialize = function () {
@@ -65,7 +66,8 @@ userSchema.methods.serialize = function () {
     isHflaGithubMember: this.isHflaGithubMember,
     githubPublic2FA: this.githubPublic2FA,
     availability: this.availability,
-    managedProjects: this.managedProjects
+    managedProjects: this.managedProjects,
+    isActive: this.isActive
   };
 };
 
diff --git a/client/src/api/UserApiService.js b/client/src/api/UserApiService.js
index 0e7173edd..99d171741 100644
--- a/client/src/api/UserApiService.js
+++ b/client/src/api/UserApiService.js
@@ -40,6 +40,22 @@ class UserApiService {
     }
     return undefined;
   }
+
+  async updateUserDbIsActive(userToEdit, isActive) {
+    const url = `${this.baseUserUrl}${userToEdit._id}`;
+    const requestOptions = {
+      method: 'PATCH',
+      headers: this.headers,
+      body: JSON.stringify({ isActive })
+    }
+
+    try {
+      return await fetch(url, requestOptions);
+    } catch (err) {
+      console.error('update is-active error', err)
+      alert('server not responding.  Please try again.');
+    }
+  }
 }
 
 export default UserApiService;
diff --git a/client/src/components/user-admin/EditUsers.js b/client/src/components/user-admin/EditUsers.js
index 1c4fc3b29..1e5f72e93 100644
--- a/client/src/components/user-admin/EditUsers.js
+++ b/client/src/components/user-admin/EditUsers.js
@@ -1,10 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import '../../sass/UserAdmin.scss';
+import { FormGroup, FormControlLabel, Switch } from '@mui/material'
 
 // child of UserAdmin. Displays form to update users.
-const EditUsers = ({ userToEdit, backToSearch, updateUserDb, projects }) => {
+const EditUsers = ({ userToEdit, backToSearch, updateUserDb, projects, updateUserActiveStatus }) => {
   const [userManagedProjects, setUserManagedProjects] = useState([]); //  The projects that the selected user is assigned
   const [projectValue, setProjectValue] = useState(''); // State and handler for form in EditUsers
+  const [isActive, setIsActive] = useState(userToEdit.isActive);
 
   // Prepare data for display
   const userName = `${userToEdit.name?.firstName} ${userToEdit.name?.lastName}`;
@@ -57,6 +59,11 @@ const EditUsers = ({ userToEdit, backToSearch, updateUserDb, projects }) => {
     }
   };
 
+  const handleSetIsActive = () => {
+    setIsActive(!isActive)
+    updateUserActiveStatus(userToEdit, !isActive)
+  }
+
   return (
     <div className="edit-users">
       <div className="ua-row">
@@ -67,6 +74,15 @@ const EditUsers = ({ userToEdit, backToSearch, updateUserDb, projects }) => {
         <div className="user-display-column-left">Email:</div>
         <div className="user-display-column-right">{userEmail}</div>
       </div>
+      <div className="ua-row is-active-flex">
+        <div className="user-is-active-column-left">Is Active:</div>
+        <div className="is-active-flex">
+          <span className="active-status">{isActive.toString()}</span>
+          <FormGroup>
+            <FormControlLabel control={<Switch checked={isActive} />} onClick={() => handleSetIsActive()} />
+          </FormGroup>
+        </div>
+      </div>
       <div className="ua-row">
         <div className="user-display-column-left">Projects:</div>
         <div className="user-display-column-right">
diff --git a/client/src/pages/UserAdmin.js b/client/src/pages/UserAdmin.js
index 0edb2241a..c540082ff 100644
--- a/client/src/pages/UserAdmin.js
+++ b/client/src/pages/UserAdmin.js
@@ -30,6 +30,13 @@ const UserAdmin = () => {
     [userApiService, fetchUsers]
   );
 
+  const updateUserActiveStatus = useCallback(
+    async (user, isActive) => {
+      await userApiService.updateUserDbIsActive(user, isActive);
+      fetchUsers()
+    }, [userApiService, fetchUsers]
+  )
+
   const fetchProjects = useCallback(async () => {
     const projectRes = await projectApiService.fetchProjects();
     setProjects(projectRes);
@@ -57,6 +64,7 @@ const UserAdmin = () => {
         projects={projects}
         updateUserDb={updateUserDb}
         backToSearch={backToSearch}
+        updateUserActiveStatus={updateUserActiveStatus}
       />
     );
   }
diff --git a/client/src/sass/UserAdmin.scss b/client/src/sass/UserAdmin.scss
index 67422f86d..373cf7d34 100644
--- a/client/src/sass/UserAdmin.scss
+++ b/client/src/sass/UserAdmin.scss
@@ -64,6 +64,22 @@
   margin-bottom: 8px;
 }
 
+.user-is-active-column-left {
+  display: flex;
+  flex-direction: column;
+  flex-basis: 15%;
+}
+
+.active-status {
+  margin-right: 15px;
+  width: 25px;
+}
+
+.is-active-flex {
+  display: flex;
+  align-items: center;
+}
+
 .button-remove {
   width: 25%;
   color: #fa114f;