chore: performance optimizations

SnailyCAD · Aug 24, 2023 · 55a5360 · 55a5360
1 parent c7615d3
commit 55a5360
Show file tree

Hide file tree

Showing 215 changed files with 1,147 additions and 1,015 deletions.
diff --git a/apps/api/src/controllers/leo/LeoController.ts b/apps/api/src/controllers/leo/LeoController.ts
@@ -48,6 +48,9 @@ export class LeoController {
   async getActiveOfficers(
     @Context("user") user: User,
     @Context("cad") cad: { miscCadSettings: MiscCadSettings },
+    @QueryParams("includeAll", Boolean) includeAll = true,
+    @QueryParams("skip", Number) skip = 0,
+    @QueryParams("search", String) search?: string,
   ): Promise<APITypes.GetActiveOfficersData> {
     const unitsInactivityFilter = getInactivityFilter(
       cad,
@@ -60,12 +63,34 @@ export class LeoController {
       select: { departmentId: true },
     });
 
+    // todo: async-table for active officers/deputies.
+    // i have yet to find a good way to do this, but i will find a way.
+    const officerWhere: Prisma.OfficerWhereInput | undefined = search
+      ? {
+          callsign: { contains: search, mode: "insensitive" },
+          callsign2: { contains: search, mode: "insensitive" },
+          divisions: { some: { value: { value: { contains: search, mode: "insensitive" } } } },
+          department: { value: { value: { contains: search, mode: "insensitive" } } },
+          badgeNumberString: { contains: search, mode: "insensitive" },
+          rank: { value: { contains: search, mode: "insensitive" } },
+          activeVehicle: { value: { value: { contains: search, mode: "insensitive" } } },
+          radioChannelId: { contains: search, mode: "insensitive" },
+          AND: [
+            { status: { value: { value: { contains: search, mode: "insensitive" } } } },
+            { status: { NOT: { shouldDo: ShouldDoType.SET_OFF_DUTY } } },
+          ],
+        }
+      : undefined;
+
     const [officers, combinedUnits] = await prisma.$transaction([
       prisma.officer.findMany({
+        take: includeAll ? undefined : 12,
+        skip: includeAll ? undefined : skip,
         where: {
           departmentId: activeDispatcher?.departmentId || undefined,
           status: { NOT: { shouldDo: ShouldDoType.SET_OFF_DUTY } },
           ...(unitsInactivityFilter?.filter ?? {}),
+          ...officerWhere,
         },
         include: leoProperties,
       }),

diff --git a/apps/client/src/components/account/2fa/manage-2fa-modal.tsx b/apps/client/src/components/account/2fa/manage-2fa-modal.tsx
@@ -31,8 +31,8 @@ export function Manage2FAModal() {
 
   const common = useTranslations("Common");
   const t = useTranslations("Account");
-  const { isOpen, closeModal, getPayload } = useModal();
-  const shouldDisable = getPayload<boolean>(ModalIds.Manage2FA);
+  const modalState = useModal();
+  const shouldDisable = modalState.getPayload<boolean>(ModalIds.Manage2FA);
 
   const { state, execute } = useFetch();
 
@@ -63,7 +63,7 @@ export function Manage2FAModal() {
 
         if (typeof json === "boolean" && json) {
           setUser({ ...user!, twoFactorEnabled: false });
-          closeModal(ModalIds.Manage2FA);
+          modalState.closeModal(ModalIds.Manage2FA);
           toastMessage({
             title: common("success"),
             message: t("disable2faSuccess"),
@@ -113,7 +113,7 @@ export function Manage2FAModal() {
   }
 
   function reset() {
-    closeModal(ModalIds.Manage2FA);
+    modalState.closeModal(ModalIds.Manage2FA);
     setCurrentStep(Steps.EnterPassword);
     setCurrentPassword("");
   }
@@ -127,7 +127,7 @@ export function Manage2FAModal() {
     <Modal
       onClose={onCancel}
       title={shouldDisable ? t("disable2FA") : t("enable2FA")}
-      isOpen={isOpen(ModalIds.Manage2FA)}
+      isOpen={modalState.isOpen(ModalIds.Manage2FA)}
       className="w-[500px]"
     >
       <Formik initialValues={INITIAL_VALUES} onSubmit={onSubmit}>

diff --git a/apps/client/src/components/account/2fa/two-factor-auth-area.tsx b/apps/client/src/components/account/2fa/two-factor-auth-area.tsx
@@ -5,7 +5,7 @@ import { ModalIds } from "types/modal-ids";
 import { useModal } from "state/modalState";
 
 export function TwoFactorAuthArea() {
-  const { openModal } = useModal();
+  const modalState = useModal();
   const t = useTranslations("Account");
   const { user } = useAuth();
   const is2faEnabled = user?.twoFactorEnabled;
@@ -18,7 +18,7 @@ export function TwoFactorAuthArea() {
         className="mt-3"
         variant={is2faEnabled ? "danger" : "default"}
         type="button"
-        onPress={() => openModal(ModalIds.Manage2FA, Boolean(is2faEnabled))}
+        onPress={() => modalState.openModal(ModalIds.Manage2FA, Boolean(is2faEnabled))}
       >
         {is2faEnabled ? t("disable2FA") : t("enable2FA")}
       </Button>

diff --git a/apps/client/src/components/account/account-info-tab.tsx b/apps/client/src/components/account/account-info-tab.tsx
@@ -16,15 +16,15 @@ const ManagePermissionsModal = dynamic(
 export function AccountInfoTab() {
   const { user } = useAuth();
   const t = useTranslations();
-  const { openModal } = useModal();
+  const modalState = useModal();
 
   const INITIAL_VALUES = {
     ...(user ?? {}),
     username: user?.username ?? "",
   };
 
   function handleViewPermissions() {
-    openModal(ModalIds.ManagePermissions);
+    modalState.openModal(ModalIds.ManagePermissions);
   }
 
   if (!user) {

diff --git a/apps/client/src/components/active-bolos/active-bolos.tsx b/apps/client/src/components/active-bolos/active-bolos.tsx
@@ -45,7 +45,7 @@ export function ActiveBolos({ initialBolos }: Props) {
   const [search, setSearch] = React.useState("");
 
   const { state, execute } = useFetch();
-  const { closeModal, openModal } = useModal();
+  const modalState = useModal();
   const bolosState = useBolos();
   const isMounted = useMounted();
   const bolos = isMounted ? bolosState.bolos : initialBolos.bolos;
@@ -99,30 +99,42 @@ export function ActiveBolos({ initialBolos }: Props) {
       bolosState.setBolos(bolos.filter((v) => v.id !== tempBolo.id));
 
       boloState.setTempId(null);
-      closeModal(ModalIds.AlertDeleteBolo);
+      modalState.closeModal(ModalIds.AlertDeleteBolo);
     }
   }
 
   function handleEditClick(bolo: Bolo) {
     boloState.setTempId(bolo.id);
-    openModal(ModalIds.ManageBolo);
+    modalState.openModal(ModalIds.ManageBolo);
   }
 
   function handleDeleteClick(bolo: Bolo) {
     boloState.setTempId(bolo.id);
-    openModal(ModalIds.AlertDeleteBolo);
+    modalState.openModal(ModalIds.AlertDeleteBolo);
+  }
+
+  function handleCreateBolo() {
+    modalState.openModal(ModalIds.ManageBolo);
   }
 
   return (
     <div className="mt-3 card">
       <header className="flex items-center justify-between p-2 px-4 bg-gray-200 dark:bg-secondary">
         <h3 className="text-xl font-semibold">{t("Bolos.activeBolos")}</h3>
 
-        <div>
+        <div className="flex gap-1">
+          <Button
+            variant={null}
+            className="bg-gray-500 hover:bg-gray-600 dark:border dark:border-quinary dark:bg-tertiary dark:hover:brightness-125 text-white"
+            onPress={handleCreateBolo}
+            disabled={!hasActiveDispatchers}
+          >
+            {t("Bolos.createBolo")}
+          </Button>
           <Button
             variant="cancel"
             className={classNames(
-              "px-1.5 dark:border dark:border-quinary dark:bg-tertiary dark:hover:brightness-125 group",
+              "px-2 dark:border dark:border-quinary dark:bg-tertiary dark:hover:brightness-125 group",
               showFilters && "dark:!bg-secondary !bg-gray-500",
             )}
             onPress={() => setShowFilters(!showFilters)}
@@ -132,6 +144,7 @@ export function ActiveBolos({ initialBolos }: Props) {
             <Filter
               className={classNames("group-hover:fill-white", showFilters && "text-white")}
               aria-label={t("Bolos.filters")}
+              size={18}
             />
           </Button>
         </div>

diff --git a/apps/client/src/components/active-bolos/manage-bolo-modal.tsx b/apps/client/src/components/active-bolos/manage-bolo-modal.tsx
@@ -25,7 +25,7 @@ export function ManageBoloModal({ onClose, bolo }: Props) {
   const { invalidateQuery } = useInvalidateQuery(["/bolos"]);
 
   const common = useTranslations("Common");
-  const { isOpen, closeModal } = useModal();
+  const modalState = useModal();
   const { state, execute } = useFetch();
   const { bolos, setBolos } = useDispatchState((state) => ({
     bolos: state.bolos,
@@ -65,7 +65,7 @@ export function ManageBoloModal({ onClose, bolo }: Props) {
             return v;
           }),
         );
-        closeModal(ModalIds.ManageBolo);
+        modalState.closeModal(ModalIds.ManageBolo);
 
         await invalidateQuery();
       }
@@ -80,14 +80,14 @@ export function ManageBoloModal({ onClose, bolo }: Props) {
         await invalidateQuery();
 
         setBolos([json, ...bolos]);
-        closeModal(ModalIds.ManageBolo);
+        modalState.closeModal(ModalIds.ManageBolo);
       }
     }
   }
 
   function handleClose() {
     onClose?.();
-    closeModal(ModalIds.ManageBolo);
+    modalState.closeModal(ModalIds.ManageBolo);
   }
 
   const validate = handleValidate(CREATE_BOLO_SCHEMA);
@@ -107,7 +107,7 @@ export function ManageBoloModal({ onClose, bolo }: Props) {
 
   return (
     <Modal
-      isOpen={isOpen(ModalIds.ManageBolo)}
+      isOpen={modalState.isOpen(ModalIds.ManageBolo)}
       onClose={handleClose}
       title={bolo ? t("editBolo") : t("createBolo")}
       className="w-[600px]"

diff --git a/apps/client/src/components/admin/import/ImportModal.tsx b/apps/client/src/components/admin/import/ImportModal.tsx
@@ -24,7 +24,7 @@ export function ImportModal<T extends ImportData>({ onImport, id, url }: Props<T
   const [file, setFile] = React.useState<File | null>(null);
 
   const { state, execute } = useFetch();
-  const { isOpen, closeModal } = useModal();
+  const modalState = useModal();
   const t = useTranslations("Values");
   const common = useTranslations("Common");
 
@@ -63,7 +63,7 @@ export function ImportModal<T extends ImportData>({ onImport, id, url }: Props<T
 
     if (Array.isArray(json)) {
       onImport(json);
-      closeModal(id);
+      modalState.closeModal(id);
     }
   }
 
@@ -75,8 +75,8 @@ export function ImportModal<T extends ImportData>({ onImport, id, url }: Props<T
     <Modal
       className="w-[600px]"
       title={data[id].title}
-      onClose={() => closeModal(id)}
-      isOpen={isOpen(id)}
+      onClose={() => modalState.closeModal(id)}
+      isOpen={modalState.isOpen(id)}
     >
       <Formik onSubmit={onSubmit} initialValues={INITIAL_VALUES}>
         {({ handleChange, values, errors }) => (
@@ -102,7 +102,7 @@ export function ImportModal<T extends ImportData>({ onImport, id, url }: Props<T
             </a>
 
             <footer className="flex justify-end mt-5">
-              <Button type="reset" onPress={() => closeModal(id)} variant="cancel">
+              <Button type="reset" onPress={() => modalState.closeModal(id)} variant="cancel">
                 {common("cancel")}
               </Button>
               <Button className="flex items-center" disabled={state === "loading"} type="submit">

diff --git a/apps/client/src/components/admin/manage/audit-logs/view-audit-logs-diff-modal.tsx b/apps/client/src/components/admin/manage/audit-logs/view-audit-logs-diff-modal.tsx
@@ -7,8 +7,8 @@ import { useTranslations } from "use-intl";
 import { classNames } from "lib/classNames";
 
 export function ViewAuditLogsDiffModal() {
-  const { isOpen, closeModal, getPayload } = useModal();
-  const auditLog = getPayload<AuditLog>(ModalIds.ViewAuditLogData);
+  const modalState = useModal();
+  const auditLog = modalState.getPayload<AuditLog>(ModalIds.ViewAuditLogData);
   const t = useTranslations("Management");
   const tAuditLogs = useTranslations("AuditLogs");
 
@@ -25,8 +25,8 @@ export function ViewAuditLogsDiffModal() {
     <Modal
       title={t("auditLogDiff")}
       className={classNames("w-full", maxWidth)}
-      isOpen={isOpen(ModalIds.ViewAuditLogData)}
-      onClose={() => closeModal(ModalIds.ViewAuditLogData)}
+      isOpen={modalState.isOpen(ModalIds.ViewAuditLogData)}
+      onClose={() => modalState.closeModal(ModalIds.ViewAuditLogData)}
     >
       {hasActionData ? (
         <ReactDiffViewer

diff --git a/apps/client/src/components/admin/manage/citizens/all-citizens-tab.tsx b/apps/client/src/components/admin/manage/citizens/all-citizens-tab.tsx
@@ -55,15 +55,15 @@ export function AllCitizensTab({ citizens: initialData, totalCount, setCitizens
   const hasViewUsersPermissions = hasPermissions([Permissions.ViewUsers]);
 
   const { state, execute } = useFetch();
-  const { openModal, closeModal } = useModal();
+  const modalState = useModal();
 
   const tCitizen = useTranslations("Citizen");
   const t = useTranslations("Management");
   const common = useTranslations("Common");
 
   function handleDeleteClick(value: CitizenWithUser) {
     valueState.setTempId(value.id);
-    openModal(ModalIds.AlertDeleteCitizen);
+    modalState.openModal(ModalIds.AlertDeleteCitizen);
   }
 
   async function handleDelete() {
@@ -77,7 +77,7 @@ export function AllCitizensTab({ citizens: initialData, totalCount, setCitizens
     if (json) {
       setCitizens((p) => p.filter((v) => v.id !== tempValue.id));
       valueState.setTempId(null);
-      closeModal(ModalIds.AlertDeleteCitizen);
+      modalState.closeModal(ModalIds.AlertDeleteCitizen);
     }
   }
 

diff --git a/apps/client/src/components/admin/manage/courthouse/pending-warrants-tab.tsx b/apps/client/src/components/admin/manage/courthouse/pending-warrants-tab.tsx
@@ -16,7 +16,7 @@ import { useInvalidateQuery } from "hooks/use-invalidate-query";
 type PendingWarrant = GetManagePendingWarrants["pendingWarrants"][number];
 
 export function PendingWarrantsTab() {
-  const { openModal } = useModal();
+  const modalState = useModal();
   const t = useTranslations();
   const common = useTranslations("Common");
   const tableState = useTableState();
@@ -37,7 +37,7 @@ export function PendingWarrantsTab() {
 
   function handleViewWarrant(warrant: Warrant) {
     warrantState.setTempId(warrant.id);
-    openModal(ModalIds.CreateWarrant, { isActive: true });
+    modalState.openModal(ModalIds.CreateWarrant, { isActive: true });
   }
 
   async function handleUpdate(id: string, type: WhitelistStatus) {

diff --git a/apps/client/src/components/admin/manage/custom-fields/ManageCustomFieldModal.tsx b/apps/client/src/components/admin/manage/custom-fields/ManageCustomFieldModal.tsx
@@ -24,13 +24,13 @@ const CATEGORIES = Object.values(CustomFieldCategory).map((v) => ({
 
 export function ManageCustomFieldModal({ field, onClose, onCreate, onUpdate }: Props) {
   const { state, execute } = useFetch();
-  const { isOpen, closeModal } = useModal();
+  const modalState = useModal();
   const common = useTranslations("Common");
   const t = useTranslations("Management");
 
   function handleClose() {
     onClose?.();
-    closeModal(ModalIds.ManageCustomField);
+    modalState.closeModal(ModalIds.ManageCustomField);
   }
 
   async function onSubmit(
@@ -46,7 +46,7 @@ export function ManageCustomFieldModal({ field, onClose, onCreate, onUpdate }: P
       });
 
       if (json?.id) {
-        closeModal(ModalIds.ManageCustomField);
+        modalState.closeModal(ModalIds.ManageCustomField);
         onUpdate?.(json);
       }
     } else {
@@ -58,7 +58,7 @@ export function ManageCustomFieldModal({ field, onClose, onCreate, onUpdate }: P
       });
 
       if (json?.id) {
-        closeModal(ModalIds.ManageCustomField);
+        modalState.closeModal(ModalIds.ManageCustomField);
         onCreate?.(json);
       }
     }
@@ -76,7 +76,7 @@ export function ManageCustomFieldModal({ field, onClose, onCreate, onUpdate }: P
       className="w-[600px]"
       title={field ? t("editCustomField") : t("createCustomField")}
       onClose={handleClose}
-      isOpen={isOpen(ModalIds.ManageCustomField)}
+      isOpen={modalState.isOpen(ModalIds.ManageCustomField)}
     >
       <Formik validate={validate} onSubmit={onSubmit} initialValues={INITIAL_VALUES}>
         {({ setFieldValue, values, errors }) => (