Convert security admin dashboard to typescript

client/src/components/Account/SecurityAdminDashboard/SecurityAdminDashboard.jsx → client/src/components/Account/SecurityAdminDashboard/SecurityAdminDashboard.tsx

@@ -1,14 +1,14 @@
 import { Container, TextField, Typography } from "@mui/material";
 import debounce from "lodash.debounce";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState, ChangeEvent } from "react";
 import * as accountService from "../../../services/account-service";
-import SecurityTable from "./SecurityTable";
+import SecurityTable, { Account } from "./SecurityTable";
 
 const SecurityAdminDashboard = () => {
-  const [accounts, setAccounts] = useState([]);
-  const [filteredAccounts, setFilteredAccounts] = useState([]);
-  const [search, setSearch] = useState("");
-  const [error, setError] = useState("");
+  const [accounts, setAccounts] = useState<Account[]>([]);
+  const [filteredAccounts, setFilteredAccounts] = useState<Account[]>([]);
+  const [search, setSearch] = useState<string>("");
+  const [error, setError] = useState<string>("");
 
   useEffect(() => {
     const fetchData = async () => {
@@ -23,7 +23,7 @@ const SecurityAdminDashboard = () => {
   }, []);
 
   useEffect(() => {
-    if (accounts.length === 0) return undefined;
+    if (accounts.length === 0) return;
     if (search.length === 0) {
       setError("");
       setFilteredAccounts(accounts);
@@ -42,35 +42,37 @@ const SecurityAdminDashboard = () => {
   }, [search, accounts]);
 
   const debouncedChangeHandler = useMemo(() => {
-    const changeHandler = (event) => {
+    const changeHandler = (event: ChangeEvent<HTMLInputElement>) => {
       setSearch(event.target.value.toLowerCase());
     };
     return debounce(changeHandler, 300);
-  }, [setSearch]);
+  }, []);
 
-  const handlePermissionChange = (userId, permission, value) => {
-    const account = filteredAccounts.find((row) => {
-      return row.id === userId;
-    });
+  const handlePermissionChange = (
+    userId: number,
+    permission: string,
+    value: boolean
+  ) => {
+    const account = filteredAccounts.find((row) => row.id === userId);
     if (account) {
       if (permission === "is_admin") {
-        account["isAdmin"] = value;
+        account.isAdmin = value;
       } else if (permission === "is_coordinator") {
-        account["isCoordinator"] = value;
+        account.isCoordinator = value;
       } else if (permission === "is_security_admin") {
-        account["isSecurityAdmin"] = value;
+        account.isSecurityAdmin = value;
       } else if (permission === "is_data_entry") {
-        account["isDataEntry"] = value;
+        account.isDataEntry = value;
       } else if (permission === "is_global_admin") {
-        account["isGlobalAdmin"] = value;
+        account.isGlobalAdmin = value;
       } else if (permission === "is_global_reporting") {
-        account["isGlobalReporting"] = value;
+        account.isGlobalReporting = value;
       }
     }
     let filtered = [...filteredAccounts, { ...account }];
     const unique = [
-      ...new Map(filtered.map((item) => [item.id, item])).values(),
-    ];
+      ...new Map(filtered.map((item) => [item?.id, item])).values(),
+    ] as Account[];
     setFilteredAccounts(unique);
   };
 

client/src/components/Account/SecurityAdminDashboard/SecurityTable.jsx → client/src/components/Account/SecurityAdminDashboard/SecurityTable.tsx

@@ -8,16 +8,41 @@ import {
   TableHead,
   TableRow,
 } from "@mui/material";
-import PropTypes from "prop-types";
 import { useUserContext } from "../../../contexts/userContext";
 import * as accountService from "../../../services/account-service";
 
-export default function SecurityTable(props) {
+export interface Account {
+  id: number;
+  email: string;
+  firstName: string;
+  lastName: string;
+  isAdmin?: boolean;
+  isCoordinator?: boolean;
+  isSecurityAdmin?: boolean;
+  isDataEntry?: boolean;
+  isGlobalAdmin?: boolean;
+  isGlobalReporting?: boolean;
+}
+
+export interface SecurityTableProps {
+  accounts: Account[];
+  handlePermissionChange: (
+    userId: number,
+    permission: string,
+    value: boolean
+  ) => Promise<void> | void;
+}
+
+export default function SecurityTable(props: SecurityTableProps) {
   const { user } = useUserContext();
 
   // arg `roleType` is expected to be one of:
   //   'security', 'admin, 'dataEntry', or 'coordinator'
-  const handleToggle = (userId, e, roleType) => {
+  const handleToggle = (
+    userId: number,
+    e: React.ChangeEvent<HTMLInputElement>,
+    roleType: "security" | "admin" | "dataEntry" | "coordinator"
+  ) => {
     if (roleType === "security") {
       props.accounts.map(async (each) => {
         if (userId === each.id) {
@@ -63,7 +88,11 @@ export default function SecurityTable(props) {
 
   // arg `roleType` is expected to be one of:
   //   'globalAdmin' or 'globalReporting'
-  const handleGlobalToggle = (userId, e, roleType) => {
+  const handleGlobalToggle = (
+    userId: number,
+    e: React.ChangeEvent<HTMLInputElement>,
+    roleType: "globalAdmin" | "globalReporting"
+  ) => {
     if (roleType === "globalAdmin") {
       props.accounts.map(async (each) => {
         if (userId === each.id) {
@@ -165,15 +194,15 @@ export default function SecurityTable(props) {
                   <>
                     <TableCell align="right">
                       <Checkbox
-                        checked={row.isGlobalAdmin}
+                        checked={Boolean(row.isGlobalAdmin)}
                         onChange={(e) =>
                           handleGlobalToggle(row.id, e, "globalAdmin")
                         }
                       />
                     </TableCell>
                     <TableCell align="right">
                       <Checkbox
-                        checked={row.isGlobalReporting}
+                        checked={Boolean(row.isGlobalReporting)}
                         onChange={(e) =>
                           handleGlobalToggle(row.id, e, "globalReporting")
                         }
@@ -183,25 +212,25 @@ export default function SecurityTable(props) {
                 ) : null}
                 <TableCell align="right">
                   <Checkbox
-                    checked={row.isAdmin}
+                    checked={Boolean(row.isAdmin)}
                     onChange={(e) => handleToggle(row.id, e, "admin")}
                   />
                 </TableCell>
                 <TableCell align="right">
                   <Checkbox
-                    checked={row.isCoordinator}
+                    checked={Boolean(row.isCoordinator)}
                     onChange={(e) => handleToggle(row.id, e, "coordinator")}
                   />
                 </TableCell>
                 <TableCell align="right">
                   <Checkbox
-                    checked={row.isSecurityAdmin}
+                    checked={Boolean(row.isSecurityAdmin)}
                     onChange={(e) => handleToggle(row.id, e, "security")}
                   />
                 </TableCell>
                 <TableCell align="right">
                   <Checkbox
-                    checked={row.isDataEntry}
+                    checked={Boolean(row.isDataEntry)}
                     onChange={(e) => handleToggle(row.id, e, "dataEntry")}
                   />
                 </TableCell>
@@ -212,19 +241,3 @@ export default function SecurityTable(props) {
     </TableContainer>
   );
 }
-
-SecurityTable.propTypes = {
-  accounts: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.number.isRequired,
-      email: PropTypes.string.isRequired,
-      firstName: PropTypes.string.isRequired,
-      lastName: PropTypes.string.isRequired,
-      isAdmin: PropTypes.bool,
-      isCoordinator: PropTypes.bool,
-      isSecurityAdmin: PropTypes.bool,
-      isDataEntry: PropTypes.bool,
-    }).isRequired
-  ),
-  handlePermissionChange: PropTypes.func.isRequired,
-};