fix: performance

SnailyCAD · Jan 7, 2024 · 53d67d7 · 53d67d7
1 parent 5e295d4
commit 53d67d7
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 15 deletions.
diff --git a/apps/client/src/components/dispatch/map/calls/active-map-calls.tsx b/apps/client/src/components/dispatch/map/calls/active-map-calls.tsx
@@ -1,7 +1,6 @@
 import * as React from "react";
 import { useTranslations } from "next-intl";
 import type { Call911 } from "@snailycad/types";
-import { Manage911CallModal } from "components/dispatch/active-calls/modals/manage-911-call-modal";
 import { useListener } from "@casperiv/use-socket.io";
 import { SocketEvents } from "@snailycad/config";
 import { CallItem } from "./call-item";
@@ -75,11 +74,6 @@ export function ActiveMapCalls() {
           })}
         </Accordion>
       )}
-
-      <Manage911CallModal
-        onClose={() => calls911State.setCurrentlySelectedCall(null)}
-        call={calls911State.currentlySelectedCall}
-      />
     </div>
   );
 }
diff --git a/apps/client/src/components/dispatch/map/map-actions.tsx b/apps/client/src/components/dispatch/map/map-actions.tsx
@@ -37,7 +37,7 @@ export function MapActions() {
       <div className="grid grid-cols-2 gap-2">
         <DropdownMenu>
           <DropdownMenuTrigger asChild key="trigger">
-            <Button>{t("Leo.toggle")}</Button>
+            <Button size="xs">{t("Leo.toggle")}</Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="min-w-[175px]" align="start" key="content">
             {hasManageSmartSignsPermissions ? (
@@ -71,10 +71,10 @@ export function MapActions() {
           </DropdownMenuContent>
         </DropdownMenu>
 
-        <Button onPress={() => modalState.openModal(ModalIds.Manage911Call)}>
+        <Button size="xs" onPress={() => modalState.openModal(ModalIds.Manage911Call)}>
           {t("Calls.create911Call")}
         </Button>
-        <Button onPress={() => modalState.openModal(ModalIds.SelectMapServer)}>
+        <Button size="xs" onPress={() => modalState.openModal(ModalIds.SelectMapServer)}>
           {t("Leo.selectMapServer")}
         </Button>
       </div>

diff --git a/apps/client/src/components/dispatch/map/sidebar/map-sidebar.tsx b/apps/client/src/components/dispatch/map/sidebar/map-sidebar.tsx
@@ -3,29 +3,37 @@ import { useTranslations } from "use-intl";
 import { ActiveMapCalls } from "../calls/active-map-calls";
 import { ActiveMapUnits } from "../units/active-map-units";
 import { MapActions } from "../map-actions";
+import { Manage911CallModal } from "components/dispatch/active-calls/modals/manage-911-call-modal";
+import { useCall911State } from "state/dispatch/call-911-state";
 
 export function MapSidebar() {
   const t = useTranslations();
+  const calls911State = useCall911State((state) => ({
+    currentlySelectedCall: state.currentlySelectedCall,
+    setCurrentlySelectedCall: state.setCurrentlySelectedCall,
+  }));
 
   const tabs = [
     { value: "active-calls", name: t("Calls.active911Calls") },
-    {
-      value: "active-units",
-      name: t("Leo.activeUnits"),
-    },
+    { value: "active-units", name: t("Leo.activeUnits") },
   ];
 
   return (
     <aside className="col-span-1 p-3">
       <MapActions />
-      <TabList tabs={tabs}>
+      <TabList queryState={false} tabs={tabs}>
         <TabsContent value="active-calls">
           <ActiveMapCalls />
         </TabsContent>
         <TabsContent value="active-units">
           <ActiveMapUnits />
         </TabsContent>
       </TabList>
+
+      <Manage911CallModal
+        onClose={() => calls911State.setCurrentlySelectedCall(null)}
+        call={calls911State.currentlySelectedCall}
+      />
     </aside>
   );
 }
diff --git a/apps/client/src/hooks/realtime/use-active-dispatchers.ts b/apps/client/src/hooks/realtime/use-active-dispatchers.ts
@@ -15,12 +15,18 @@ export function useActiveDispatchers() {
 
   const router = useRouter();
   const isCitizen = router.pathname.includes("/citizen");
-  const activeDispatcherState = useActiveDispatcherState();
+  const activeDispatcherState = useActiveDispatcherState((state) => ({
+    activeDispatchersCount: state.activeDispatchersCount,
+    userActiveDispatcher: state.userActiveDispatcher,
+    setActiveDispatchersCount: state.setActiveDispatchersCount,
+    setUserActiveDispatcher: state.setUserActiveDispatcher,
+  }));
 
   useQuery({
     queryKey: ["/dispatch"],
     enabled: !isCitizen,
     queryFn: getActiveDispatchers,
+    refetchOnMount: false,
   });
 
   async function getActiveDispatchers() {
@@ -48,6 +54,7 @@ export function useActiveDispatchers() {
     async () => {
       await queryClient.resetQueries({ queryKey: ["/dispatch"] });
     },
+    [queryClient.resetQueries],
   );
 
   return {