Fixes login errors being shown twice due to nested useMutation (#10479

)

src/Utils/FiltersCache.tsx

@@ -58,7 +58,7 @@ const invalidate = (key?: string) => {
 /**
  * Removes all filters cache in the platform.
  */
-const invaldiateAll = () => {
+const invalidateAll = () => {
   for (const key in localStorage) {
     if (key.startsWith("filters--")) {
       invalidate(key);
@@ -70,7 +70,7 @@ export default {
   get,
   set,
   invalidate,
-  invaldiateAll,
+  invalidateAll,
   utils: {
     clean,
   },

src/components/Auth/Login.tsx

@@ -37,13 +37,9 @@ import FiltersCache from "@/Utils/FiltersCache";
 import ViewCache from "@/Utils/ViewCache";
 import routes from "@/Utils/request/api";
 import mutate from "@/Utils/request/mutate";
+import { HTTPError } from "@/Utils/request/types";
 import { TokenData } from "@/types/auth/otpToken";
 
-interface LoginFormData {
-  username: string;
-  password: string;
-}
-
 interface OtpLoginData {
   phone_number: string;
   otp: string;
@@ -103,17 +99,6 @@ const Login = (props: LoginProps) => {
     localStorage.setItem(LocalStorageKeys.loginPreference, loginMode);
   }, [loginMode]);
 
-  // Staff Login Mutation
-  const staffLoginMutation = useMutation({
-    mutationFn: async (data: LoginFormData) => {
-      FiltersCache.invaldiateAll();
-      return await signIn(data);
-    },
-    onError: (error) => {
-      setCaptcha(error.status == 429);
-    },
-  });
-
   // Send OTP Mutation
   const { mutate: sendOtp, isPending: sendOtpPending } = useMutation({
     mutationFn: mutate(routes.otp.sendOtp),
@@ -233,7 +218,14 @@ const Login = (props: LoginProps) => {
     const validated = validateData();
     if (!validated) return;
 
-    staffLoginMutation.mutate(validated);
+    FiltersCache.invalidateAll();
+    try {
+      await signIn(validated);
+    } catch (error) {
+      if (error instanceof HTTPError) {
+        setCaptcha(error.status == 429);
+      }
+    }
   };
 
   const validateForgetData = () => {

src/pages/Appointments/components/AppointmentTokenCard.tsx

@@ -52,7 +52,7 @@ const AppointmentTokenCard = ({ id, appointment, facility }: Props) => {
             <Label>{t("name")}</Label>
             <p className="font-semibold">{patient.name}</p>
             <p className="text-sm text-gray-600 font-medium">
-              {formatPatientAge(patient as any, true)},{" "}
+              {formatPatientAge(patient, true)},{" "}
               {t(`GENDER__${patient.gender}`)}
             </p>
           </div>