fix deprecation: switch to jotai-family for atom family (#15290)

Author: rithviknishad

package-lock.json

@@ -107,6 +107,7 @@
     "i18next-resources-to-backend": "^1.2.1",
     "input-otp": "^1.4.2",
     "jotai": "^2.12.3",
+    "jotai-family": "^1.0.1",
     "jspdf": "^3.0.2",
     "libphonenumber-js": "^1.11.18",
     "lucide-react": "^0.548.0",

package.json

@@ -0,0 +1,25 @@
+import { LocationRead } from "@/types/location/location";
+import { atomFamily } from "jotai-family";
+import { atomWithStorage } from "jotai/utils";
+
+/**
+ * Atom family for payment reconcilation location caching per facility
+ */
+export const paymentReconcilationLocationAtom = atomFamily(
+  (facilityId: string) =>
+    atomWithStorage<LocationRead | null>(
+      `payment_reconcilation_location_cache--${facilityId}`,
+      null,
+    ),
+);
+
+/**
+ * Helper to invalidate all payment reconcilation location caches
+ */
+export const invalidateAllPaymentReconcilationLocationCaches = () => {
+  for (const key in localStorage) {
+    if (key.startsWith("payment_reconcilation_location_cache--")) {
+      localStorage.removeItem(key);
+    }
+  }
+};

src/atoms/location-atom.ts

@@ -42,12 +42,12 @@ import FiltersCache from "@/Utils/FiltersCache";
 import ViewCache from "@/Utils/ViewCache";
 import mutate from "@/Utils/request/mutate";
 import { HTTPError } from "@/Utils/request/types";
-import { invalidateAllLocationCaches } from "@/atoms/location-atom";
 import authApi from "@/types/auth/authApi";
 import { TokenData } from "@/types/otp/otp";
 import otpApi from "@/types/otp/otpApi";
 
 import { clearQueryPersistenceCache } from "@/Utils/request/queryClient";
+import { invalidateAllPaymentReconcilationLocationCaches } from "@/atoms/paymentReconcilationLocationAtom";
 import { AuthHero } from "./AuthHero";
 
 interface OtpLoginData {
@@ -245,7 +245,7 @@ const Login = (props: LoginProps) => {
     if (!validated) return;
 
     FiltersCache.invalidateAll();
-    invalidateAllLocationCaches();
+    invalidateAllPaymentReconcilationLocationCaches();
     clearQueryPersistenceCache();
     try {
       await signIn(validated);

src/atoms/paymentReconcilationLocationAtom.ts

@@ -40,7 +40,7 @@ import {
 } from "@/components/ui/sheet";
 import { Textarea } from "@/components/ui/textarea";
 
-import { locationAtomFamily } from "@/atoms/location-atom";
+import { paymentReconcilationLocationAtom } from "@/atoms/paymentReconcilationLocationAtom";
 import { LocationPicker } from "@/components/Location/LocationPicker";
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
@@ -185,7 +185,7 @@ export function PaymentReconciliationSheet({
   const { t } = useTranslation();
   const queryClient = useQueryClient();
   const [selectedLocationObject, setSelectedLocationObject] = useAtom(
-    locationAtomFamily(facilityId),
+    paymentReconcilationLocationAtom(facilityId),
   );
   useShortcutSubContext();