chore: small fixes

apps/client/src/components/citizen/pets/medical-records/manage-pet-medical-record-modal.tsx

@@ -26,7 +26,7 @@ export function ManagePetMedicalRecordModal(props: Props) {
   const modalState = useModal();
   const common = useTranslations("Common");
   const t = useTranslations("MedicalRecords");
-  const { currentPet } = usePetsState();
+  const currentPet = usePetsState((state) => state.currentPet);
 
   function handleClose() {
     modalState.closeModal(ModalIds.ManagePetMedicalRecord);

apps/client/src/components/citizen/pets/notes/manage-pet-note-modal.tsx

@@ -24,7 +24,7 @@ export function ManagePetNoteModal(props: Props) {
   const common = useTranslations("Common");
   const t = useTranslations("Pets");
   const { state, execute } = useFetch();
-  const { currentPet } = usePetsState();
+  const currentPet = usePetsState((state) => state.currentPet);
 
   function handleClose() {
     modalState.closeModal(ModalIds.ManageNote);

apps/client/src/components/citizen/pets/pet-information-card.tsx

@@ -23,7 +23,7 @@ import { useTranslations } from "use-intl";
 export function PetInformationCard() {
   const t = useTranslations("Pets");
   const { cad } = useAuth();
-  const { currentPet } = usePetsState();
+  const currentPet = usePetsState((state) => state.currentPet);
   const modalState = useModal();
   const { state, execute } = useFetch();
   const router = useRouter();

apps/client/src/components/leo/modals/NameSearchModal/tabs/vehicles-tab.tsx

@@ -13,7 +13,7 @@ export function NameSearchVehiclesTab() {
   const { DMV } = useFeatureEnabled();
   const currentResult = useNameSearch((state) => state.currentResult);
   const modalState = useModal();
-  const { setCurrentResult: setVehicleResult } = useVehicleSearch();
+  const setVehicleResult = useVehicleSearch((state) => state.setCurrentResult);
   const tableState = useTableState();
 
   function handlePlateClick(vehicle: VehicleSearchResult) {

apps/client/src/components/leo/qualifications/ActiveUnitsQualificationsCard.tsx

@@ -9,10 +9,11 @@ import type {
 import { useDebounce, useHoverDirty } from "react-use";
 import { isUnitCombined, isUnitCombinedEmsFd } from "@snailycad/utils";
 import useFetch from "lib/useFetch";
-import { create } from "zustand";
 import { HoverCard, HoverCardContent, HoverCardTrigger, Loader } from "@snailycad/ui";
 import type { GetUnitQualificationsByUnitIdData } from "@snailycad/types/api";
 import dynamic from "next/dynamic";
+import { createWithEqualityFn } from "zustand/traditional";
+import { shallow } from "zustand/shallow";
 
 const UnitQualificationsTable = dynamic(
   async () => (await import("./UnitQualificationsTable")).UnitQualificationsTable,
@@ -33,10 +34,13 @@ interface CacheStore {
   setUnits(units: CacheStore["units"]): void;
 }
 
-const useCacheStore = create<CacheStore>((set) => ({
-  units: {},
-  setUnits: (units) => set({ units }),
-}));
+const useCacheStore = createWithEqualityFn<CacheStore>(
+  (set) => ({
+    units: {},
+    setUnits: (units) => set({ units }),
+  }),
+  shallow,
+);
 
 export function ActiveUnitsQualificationsCard({ canBeOpened = true, unit, children }: Props) {
   const { state, execute } = useFetch();

apps/client/src/hooks/shared/useSignal100.tsx

@@ -6,15 +6,19 @@ import { useTranslations } from "use-intl";
 import { useAudio } from "react-use";
 import { useCall911State } from "state/dispatch/call-911-state";
 import { Alert } from "@snailycad/ui";
-import { create } from "zustand";
+import { createWithEqualityFn } from "zustand/traditional";
+import { shallow } from "zustand/shallow";
 
-const useSignal100Store = create<{
+const useSignal100Store = createWithEqualityFn<{
   playCount: number;
   setPlayCount(value: number): void;
-}>()((set) => ({
-  playCount: 0,
-  setPlayCount: (value: number) => set({ playCount: value }),
-}));
+}>()(
+  (set) => ({
+    playCount: 0,
+    setPlayCount: (value: number) => set({ playCount: value }),
+  }),
+  shallow,
+);
 
 const SIGNAL_100_SRC = "/sounds/signal100.mp3";
 export function useSignal100() {

apps/client/src/state/callsFiltersState.ts

@@ -1,5 +1,6 @@
-import { create } from "zustand";
 import type { Record, Citizen, MedicalRecord, RegisteredVehicle, Weapon } from "@snailycad/types";
+import { shallow } from "zustand/shallow";
+import { createWithEqualityFn } from "zustand/traditional";
 
 export type CitizenWithVehAndWep = Citizen & {
   weapons: Weapon[];
@@ -25,19 +26,22 @@ interface CallFiltersState {
   setAssignedUnit(assignedUnit: string | null): void;
 }
 
-export const useCallsFilters = create<CallFiltersState>()((set) => ({
-  showFilters: false,
-  setShowFilters: (showFilters) => set({ showFilters }),
+export const useCallsFilters = createWithEqualityFn<CallFiltersState>()(
+  (set) => ({
+    showFilters: false,
+    setShowFilters: (showFilters) => set({ showFilters }),
 
-  search: "",
-  setSearch: (search) => set({ search }),
+    search: "",
+    setSearch: (search) => set({ search }),
 
-  assignedUnit: null,
-  setAssignedUnit: (assignedUnit) => set({ assignedUnit }),
+    assignedUnit: null,
+    setAssignedUnit: (assignedUnit) => set({ assignedUnit }),
 
-  department: null,
-  setDepartment: (department) => set({ department }),
+    department: null,
+    setDepartment: (department) => set({ department }),
 
-  division: null,
-  setDivision: (division) => set({ division }),
-}));
+    division: null,
+    setDivision: (division) => set({ division }),
+  }),
+  shallow,
+);

apps/client/src/state/citizen/pets-state.ts

@@ -1,12 +1,16 @@
 import type { Pet } from "@snailycad/types";
-import { create } from "zustand";
+import { shallow } from "zustand/shallow";
+import { createWithEqualityFn } from "zustand/traditional";
 
 interface PetsState {
   currentPet: Pet | null;
   setCurrentPet(pet: Pet): void;
 }
 
-export const usePetsState = create<PetsState>()((set) => ({
-  currentPet: null,
-  setCurrentPet: (pet) => set({ currentPet: pet }),
-}));
+export const usePetsState = createWithEqualityFn<PetsState>()(
+  (set) => ({
+    currentPet: null,
+    setCurrentPet: (pet) => set({ currentPet: pet }),
+  }),
+  shallow,
+);

apps/client/src/state/mapState.ts

@@ -1,7 +1,6 @@
 import { ConnectionStatus } from "@snailycad/ui";
 import { Socket } from "socket.io-client";
 import { SmartSignMarker } from "types/map";
-import { create } from "zustand";
 import { persist, createJSONStorage } from "zustand/middleware";
 import { shallow } from "zustand/shallow";
 import { createWithEqualityFn } from "zustand/traditional";
@@ -67,14 +66,17 @@ export const useDispatchMapState = createWithEqualityFn<DispatchMapState>()(
   shallow,
 );
 
-export const useSocketStore = create<SocketStore>()((set) => ({
-  status: null,
-  setStatus(status) {
-    set({ status });
-  },
+export const useSocketStore = createWithEqualityFn<SocketStore>()(
+  (set) => ({
+    status: null,
+    setStatus(status) {
+      set({ status });
+    },
 
-  socket: null,
-  setSocket(socket) {
-    set({ socket });
-  },
-}));
+    socket: null,
+    setSocket(socket) {
+      set({ socket });
+    },
+  }),
+  shallow,
+);

apps/client/src/state/search/vehicle-search-state.ts

@@ -1,5 +1,6 @@
 import type { PostLeoSearchVehicleData } from "@snailycad/types/api";
-import { create } from "zustand";
+import { createWithEqualityFn } from "zustand/traditional";
+import { shallow } from "zustand/shallow";
 
 export type VehicleSearchResult = NonNullable<PostLeoSearchVehicleData>;
 
@@ -8,7 +9,10 @@ interface VehicleSearchState {
   setCurrentResult(v: VehicleSearchResult | null | "initial"): void;
 }
 
-export const useVehicleSearch = create<VehicleSearchState>()((set) => ({
-  currentResult: "initial",
-  setCurrentResult: (v) => set({ currentResult: v }),
-}));
+export const useVehicleSearch = createWithEqualityFn<VehicleSearchState>()(
+  (set) => ({
+    currentResult: "initial",
+    setCurrentResult: (v) => set({ currentResult: v }),
+  }),
+  shallow,
+);