fix: component performance optimizations

SnailyCAD · Sep 17, 2023 · 4af9459 · 4af9459
1 parent 109e21a
commit 4af9459
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 39 deletions.
diff --git a/apps/client/src/components/active-bolos/active-bolos.tsx b/apps/client/src/components/active-bolos/active-bolos.tsx
@@ -118,7 +118,7 @@ export function ActiveBolos({ initialBolos }: Props) {
   }
 
   return (
-    <div className="mt-3 card">
+    <div className="mb-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>
 

diff --git a/apps/client/src/components/dispatch/active-calls/active-calls.tsx b/apps/client/src/components/dispatch/active-calls/active-calls.tsx
@@ -132,7 +132,7 @@ function Active911Calls({ initialData }: Props) {
   }
 
   return (
-    <div className="rounded-md card">
+    <div className="rounded-md card mb-3">
       {audio.addedToCallAudio}
       {audio.incomingCallAudio}
       <ActiveCallsHeader asyncTable={asyncTable} calls={calls} />

diff --git a/apps/client/src/components/dispatch/active-units/deputies/active-deputies.tsx b/apps/client/src/components/dispatch/active-units/deputies/active-deputies.tsx
@@ -91,7 +91,7 @@ function ActiveDeputies({ initialDeputies }: Props) {
   }, [asyncTable.items]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
-    <div className="mt-3 rounded-md card">
+    <div className="mb-3 rounded-md card">
       <ActiveDeputiesHeader />
       <ActiveUnitsSearch
         totalCount={initialDeputies.length}

diff --git a/apps/client/src/components/dispatch/active-units/officers/active-officers.tsx b/apps/client/src/components/dispatch/active-units/officers/active-officers.tsx
@@ -113,7 +113,7 @@ function ActiveOfficers({ initialOfficers }: Props) {
   }, [asyncTable.items]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
-    <div className="rounded-md card">
+    <div className="rounded-md card mb-3">
       <ActiveOfficersHeader />
       <ActiveUnitsSearch
         totalCount={initialOfficers.length}

diff --git a/apps/client/src/components/leo/active-warrants/active-warrants.tsx b/apps/client/src/components/leo/active-warrants/active-warrants.tsx
@@ -50,7 +50,7 @@ export function ActiveWarrants() {
   }
 
   return (
-    <div className="rounded-md card mt-3">
+    <div className="rounded-md card mb-3">
       <header className="flex items-center justify-between p-2 px-4 bg-gray-200 dark:bg-secondary">
         <h1 className="text-xl font-semibold">{t("activeWarrants")}</h1>
 

diff --git a/apps/client/src/components/shared/UtilityPanel.tsx b/apps/client/src/components/shared/UtilityPanel.tsx
@@ -24,7 +24,7 @@ export function UtilityPanel({ children, isDispatch }: Props) {
   const { ACTIVE_DISPATCHERS } = useFeatureEnabled();
 
   return (
-    <div className="w-full mb-3 card">
+    <div className="w-full mb-3 card overflow-y-hidden">
       <header className="flex items-center justify-between px-4 py-2 mb-2 bg-gray-200 dark:bg-secondary">
         <h1 className="text-xl font-semibold">
           {t("utilityPanel")}

diff --git a/apps/client/src/pages/ems-fd/index.tsx b/apps/client/src/pages/ems-fd/index.tsx
@@ -92,18 +92,16 @@ export default function EmsFDDashboard({
   });
 
   const { CALLS_911 } = useFeatureEnabled();
-  const signal100 = useSignal100();
-  const tones = useTones(ActiveToneType.EMS_FD);
-  const panic = usePanicButton();
-  const state = useEmsFdState();
-  const dispatchState = useDispatchState();
+  const setActiveDeputy = useEmsFdState((state) => state.setActiveDeputy);
+  const dispatchState = useDispatchState((state) => ({
+    setBolos: state.setBolos,
+    setActiveOfficers: state.setActiveOfficers,
+    setActiveDeputies: state.setActiveDeputies,
+  }));
   const set911Calls = useCall911State((state) => state.setCalls);
-  const { hasPermissions } = usePermission();
-  const isAdmin = hasPermissions(defaultPermissions.allDefaultAdminPermissions);
-  const modalState = useModal();
 
   React.useEffect(() => {
-    state.setActiveDeputy(activeDeputy);
+    setActiveDeputy(activeDeputy);
     set911Calls(calls.calls);
     dispatchState.setActiveDeputies(activeDeputies);
     dispatchState.setActiveOfficers(activeOfficers);
@@ -116,48 +114,76 @@ export default function EmsFDDashboard({
     <Layout permissions={{ permissions: [Permissions.EmsFd] }} className="dark:text-white">
       <Title renderLayoutTitle={false}>{t("Ems.emsFd")}</Title>
 
+      <EmsFdHeader activeDeputy={activeDeputy} />
+
+      {CALLS_911 ? <ActiveCalls initialData={calls} /> : null}
+      <ActiveOfficers initialOfficers={activeOfficers} />
+      <ActiveDeputies initialDeputies={activeDeputies} />
+
+      <SelectDeputyModal />
+      <EmsFdModals />
+    </Layout>
+  );
+}
+
+function EmsFdHeader(props: Pick<Props, "activeDeputy">) {
+  const signal100 = useSignal100();
+  const tones = useTones(ActiveToneType.EMS_FD);
+  const panic = usePanicButton();
+  const state = useEmsFdState();
+
+  const dispatchState = useDispatchState((state) => ({
+    activeDeputies: state.activeDeputies,
+    setActiveDeputies: state.setActiveDeputies,
+  }));
+
+  return (
+    <>
       <signal100.Component enabled={signal100.enabled} audio={signal100.audio} />
       <panic.Component audio={panic.audio} unit={panic.unit} />
       <tones.Component audio={tones.audio} description={tones.description} user={tones.user} />
 
       <UtilityPanel>
         <div className="px-4">
-          <ModalButtons initialActiveDeputy={activeDeputy} />
+          <ModalButtons initialActiveDeputy={props.activeDeputy} />
         </div>
 
         <StatusesArea
           setUnits={dispatchState.setActiveDeputies}
           units={dispatchState.activeDeputies}
           setActiveUnit={state.setActiveDeputy}
           activeUnit={state.activeDeputy}
-          initialData={activeDeputy}
+          initialData={props.activeDeputy}
         />
       </UtilityPanel>
+    </>
+  );
+}
 
-      <div className="flex flex-col mt-3 md:flex-row md:space-x-3">
-        <div className="w-full">{CALLS_911 ? <ActiveCalls initialData={calls} /> : null}</div>
-      </div>
-      <div className="mt-3">
-        <ActiveOfficers initialOfficers={activeOfficers} />
-        <ActiveDeputies initialDeputies={activeDeputies} />
-      </div>
+function EmsFdModals() {
+  const emsFdDeputyState = useEmsFdState();
+  const modalState = useModal();
+  const { hasPermissions } = usePermission();
+  const isAdmin = hasPermissions(defaultPermissions.allDefaultAdminPermissions);
 
-      <SelectDeputyModal />
-      {isAdmin || state.activeDeputy ? (
+  const showModals = isAdmin ? true : emsFdDeputyState.activeDeputy;
+  if (!showModals) {
+    return null;
+  }
+
+  return (
+    <>
+      <NotepadModal />
+      <DepartmentInfoModal />
+
+      <SearchMedicalRecordModal />
+      {modalState.isOpen(ModalIds.SearchMedicalRecord) ? null : (
         <>
-          <NotepadModal />
-          <DepartmentInfoModal />
-
-          <SearchMedicalRecordModal />
-          {modalState.isOpen(ModalIds.SearchMedicalRecord) ? null : (
-            <>
-              <CreateMedicalRecordModal />
-              <CreateDoctorVisitModal />
-            </>
-          )}
+          <CreateMedicalRecordModal />
+          <CreateDoctorVisitModal />
         </>
-      ) : null}
-    </Layout>
+      )}
+    </>
   );
 }
 

diff --git a/apps/client/src/pages/officer/index.tsx b/apps/client/src/pages/officer/index.tsx
@@ -182,7 +182,10 @@ function OfficerHeader(props: Pick<Props, "activeOfficer">) {
   const panic = usePanicButton();
 
   const leoState = useLeoState();
-  const dispatchState = useDispatchState();
+  const dispatchState = useDispatchState((state) => ({
+    activeOfficers: state.activeOfficers,
+    setActiveOfficers: state.setActiveOfficers,
+  }));
 
   return (
     <>