implemented ability to deactivate student account

client/src/App.js

@@ -57,6 +57,7 @@ import CustomNavbar from "./components/common/customNavbar";
 import AdminViewTransaction from "./components/adminViewTransaction";
 import GlobalStyle from "./globalStyles";
 import CreateStaffUserAccountByAdmin from "./components/adminCreateUserAccount";
+import SearchUserAccount from "./components/searchStudentAccount";
 /**
  imports of page components ends here
  */
@@ -256,6 +257,16 @@ const App = (props) => {
                             authorizedRole={["super-admin", "admin"]}
                             {...props}
                           />
+                          <AuthorizedComponent
+                            path="/admin/student_account"
+                            exact
+                            component={SearchUserAccount}
+                            authenticated={authenticated}
+                            currentUser={currentUser}
+                            authorizedRole={["super-admin", "admin"]}
+                            {...props}
+                          />
+
                           <AuthorizedComponent
                             path="/admin/view_transactions"
                             exact
@@ -265,7 +276,6 @@ const App = (props) => {
                             authorizedRole={["super-admin", "admin"]}
                             {...props}
                           />
-
                           <AuthorizedComponent
                             path="/admin/create_staff_account"
                             exact

client/src/components/adminCreateUserAccount.js

@@ -104,7 +104,7 @@ const AdminCreateUserAccount = () => {
           </div>
           <form onSubmit={createUserAccountFunction}>
             <div className="form-group">
-              <label htmlFor="name">Email</label>
+              <label htmlFor="email">Email</label>
               <input
                 type="email"
                 className="form-control"

client/src/components/navbar.js

@@ -302,6 +302,14 @@ const Navbar = ({ authenticated, currentUser }) => {
                                   >
                                     Create Staff Account
                                   </StyledLink>
+
+                                  <StyledLink
+                                    exact
+                                    to="/admin/student_account"
+                                    className="nav-link"
+                                  >
+                                    View Student Accounts
+                                  </StyledLink>
                                 </div>
                               </li>
                             </React.Fragment>

client/src/components/reuseableComponents/usersTable.js

@@ -0,0 +1,78 @@
+import React from "react";
+import styled from "styled-components";
+import { CapFirstLetterOfEachWord } from "../../modules/utils";
+
+const UsersTableStyles = styled.div`
+  .even {
+    background-color: #bdba4b;
+  }
+`;
+
+const UserTable = ({ users, activateUser, submitted }) => {
+  const activateDeactivateUser = (userId) => {
+    activateUser(userId);
+  };
+  return (
+    <UsersTableStyles>
+      <table className="table table-striped table-bordered">
+        <thead>
+          <tr>
+            <th scope="col" className="text-center">
+              Name
+            </th>
+            <th scope="col" className="text-center">
+              Reg Number
+            </th>
+            <th scope="col" className="text-center">
+              Email
+            </th>
+
+            <th scope="col" className="text-center">
+              Account Status
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {users.map(({ email, name, regNumber, active, id }) => {
+            return (
+              <tr key={regNumber} className="even">
+                <td>
+                  <p>{CapFirstLetterOfEachWord(name)}</p>
+                </td>
+                <td>
+                  <p>{regNumber.toUpperCase()}</p>
+                </td>
+                <td>
+                  <p>
+                    <span>{email}</span>
+                  </p>
+                </td>
+                <td>
+                  {active ? (
+                    <button
+                      disabled={submitted}
+                      className="btn btn-sm btn-danger"
+                      onClick={() => activateDeactivateUser(id)}
+                    >
+                      {submitted ? "please wait....." : "deactivate"}
+                    </button>
+                  ) : (
+                    <button
+                      disabled={submitted}
+                      className="btn btn-sm btn-success"
+                      onClick={() => activateDeactivateUser(id)}
+                    >
+                      {submitted ? "please wait....." : "activate"}
+                    </button>
+                  )}
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </UsersTableStyles>
+  );
+};
+
+export default UserTable;

client/src/components/searchStudentAccount.js

@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from "react";
+import { useLazyQuery, useMutation } from "@apollo/client";
+import { ActivateDeactivateUser } from "../graphql/mutation";
+import { SearchUserAccount } from "../graphql/queries";
+import styled from "styled-components";
+import Loading from "./common/loading";
+import UsersTable from "./reuseableComponents/usersTable";
+
+const SearchRecordsStyles = styled.div``;
+
+const SearchStudentAccount = () => {
+  const [regNumber, setRegNumber] = useState("");
+  const [users, setUsers] = useState([]);
+  const [errors, setErrors] = useState(null);
+  const [noData, setNoData] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+
+  const [searchFunc, searchResult] = useLazyQuery(SearchUserAccount);
+  const [activateFunction, activateResult] = useMutation(
+    ActivateDeactivateUser
+  );
+
+  useEffect(() => {
+    if (searchResult.data) {
+      const users = searchResult.data.searchStudentAccount;
+
+      if (users.length > 0) {
+        setUsers(users);
+        setNoData(false);
+      } else {
+        setNoData(true);
+        setUsers([]);
+      }
+    }
+    if (searchResult.error) {
+      setErrors(searchResult.error);
+    }
+  }, [searchResult.data, searchResult.error]);
+
+  useEffect(() => {
+    if (activateResult.data) {
+      setSubmitted(!submitted);
+      window.alert("successful");
+    }
+    if (activateResult.error) {
+      setSubmitted(!submitted);
+      setErrors(activateResult.error);
+    }
+  }, [activateResult.data, activateResult.error]);
+
+  const performSearchInput = (e) => {
+    const value = e.target.value;
+    setRegNumber(value);
+    if (value.length > 1) {
+      //perform query search here
+      setTimeout(
+        searchFunc({
+          variables: {
+            regNumber: value,
+          },
+        }),
+        500
+      );
+    }
+  };
+  const activateUser = async (userId) => {
+    const confirmOperation = window.confirm("please confirm your action");
+    if (!confirmOperation) return;
+    try {
+      setSubmitted(!submitted);
+      await activateFunction({
+        variables: {
+          userId: userId,
+        },
+        refetchQueries: [
+          {
+            query: SearchUserAccount,
+            variables: {
+              regNumber: regNumber,
+            },
+          },
+        ],
+      });
+    } catch (error) {}
+  };
+  return (
+    <SearchRecordsStyles>
+      <div className="row">
+        <div className="col-md-12">
+          <div className="text-center">
+            {searchResult.loading && <Loading />}
+            {errors && <p className="lead text-danger">{errors.message}</p>}
+          </div>
+        </div>
+      </div>
+      <div className="row">
+        <div className="col-md-6 offset-md-3">
+          <form>
+            <div className="form-group">
+              <label htmlFor="regNumber">Reg Number</label>
+              <input
+                type="text"
+                className="form-control"
+                name="regNumber"
+                aria-describedby="regNumber"
+                value={regNumber}
+                onChange={performSearchInput}
+              />
+            </div>
+          </form>
+        </div>
+      </div>
+      <div className="row">
+        <div className="col-md-12">
+          <div className="text-center">
+            {noData && <p className="lead">Your query returned no result!</p>}
+
+            {users.length > 0 && (
+              <UsersTable
+                users={users}
+                activateUser={activateUser}
+                submitted={submitted}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    </SearchRecordsStyles>
+  );
+};
+
+export default SearchStudentAccount;

client/src/graphql/mutation.js

@@ -355,8 +355,6 @@ const ConfirmStudentTransaction = gql`
   }
 `;
 
-//createStaffUserAccountByAdmin
-
 const CreateStaffUserAccountByAdmin = gql`
   mutation createStaffUserAccountByAdmin(
     $email: String!
@@ -373,7 +371,16 @@ const CreateStaffUserAccountByAdmin = gql`
   }
 `;
 
+//
+
+const ActivateDeactivateUser = gql`
+  mutation activateDeactivateUser($userId: String!) {
+    activateDeactivateUser(userId: $userId)
+  }
+`;
+
 export {
+  ActivateDeactivateUser,
   SendSMSToStudents,
   EditHall,
   ChangeBedStatus,

client/src/graphql/queries.js

@@ -549,7 +549,22 @@ const GetAdminDashboardStats = gql`
   }
 `;
 
+//searchStudentAccount
+
+const SearchUserAccount = gql`
+  query searchStudentAccount($regNumber: String!) {
+    searchStudentAccount(regNumber: $regNumber) {
+      email
+      regNumber
+      active
+      name
+      id
+    }
+  }
+`;
+
 export {
+  SearchUserAccount,
   GetAdminDashboardStats,
   GetSMSCreditAvailable,
   GetHostelById,