Replace Deprecated request

public/locale/en.json

@@ -685,6 +685,7 @@
   "delete_record": "Delete Record",
   "deleted_successfully": "{{name}} deleted successfully",
   "deleting": "Deleting...",
+  "deletion_failed": "Failed to delete {{name}}",
   "demography": "Demography",
   "denied_on": "Denied On",
   "departments": "Departments",

src/Providers/AuthUserProvider.tsx

@@ -10,8 +10,7 @@ import { AuthUserContext } from "@/hooks/useAuthUser";
 import { LocalStorageKeys } from "@/common/constants";
 
 import routes from "@/Utils/request/api";
-import query from "@/Utils/request/query";
-import request from "@/Utils/request/request";
+import query, { callApi } from "@/Utils/request/query";
 import { TokenData } from "@/types/auth/otpToken";
 
 interface Props {
@@ -56,12 +55,12 @@ export default function AuthUserProvider({
 
   const signIn = useCallback(
     async (creds: { username: string; password: string }) => {
-      const query = await request(routes.login, { body: creds });
+      const data = await callApi(routes.login, { body: creds });
 
-      if (query.res?.ok && query.data) {
-        setAccessToken(query.data.access);
-        localStorage.setItem(LocalStorageKeys.accessToken, query.data.access);
-        localStorage.setItem(LocalStorageKeys.refreshToken, query.data.refresh);
+      if (data?.access && data?.refresh) {
+        setAccessToken(data.access);
+        localStorage.setItem(LocalStorageKeys.accessToken, data.access);
+        localStorage.setItem(LocalStorageKeys.refreshToken, data.refresh);
 
         await queryClient.invalidateQueries({ queryKey: ["currentUser"] });
 
@@ -70,7 +69,7 @@ export default function AuthUserProvider({
         }
       }
 
-      return query;
+      return data;
     },
     [queryClient],
   );
@@ -155,19 +154,22 @@ const updateRefreshToken = async (silent = false) => {
     return;
   }
 
-  const { res, data } = await request(routes.token_refresh, {
-    body: { refresh },
-    silent,
-  });
+  try {
+    const data = await callApi(routes.token_refresh, {
+      body: { refresh },
+      silent,
+    });
+
+    if (!data) {
+      throw new Error("Token refresh failed");
+    }
 
-  if (res?.status !== 200 || !data) {
+    localStorage.setItem(LocalStorageKeys.accessToken, data.access);
+    localStorage.setItem(LocalStorageKeys.refreshToken, data.refresh);
+  } catch {
     localStorage.removeItem(LocalStorageKeys.accessToken);
     localStorage.removeItem(LocalStorageKeys.refreshToken);
-    return;
   }
-
-  localStorage.setItem(LocalStorageKeys.accessToken, data.access);
-  localStorage.setItem(LocalStorageKeys.refreshToken, data.refresh);
 };
 
 const getRedirectURL = () => {

src/Utils/request/query.ts

@@ -5,6 +5,8 @@ import { ApiCallOptions, ApiRoute, HTTPError } from "@/Utils/request/types";
 import { makeHeaders, makeUrl } from "@/Utils/request/utils";
 import { sleep } from "@/Utils/utils";
 
+export type ApiResponse<TData> = TData;
+
 export async function callApi<Route extends ApiRoute<unknown, unknown>>(
   { path, method, noAuth }: Route,
   options?: ApiCallOptions<Route>,

src/components/Auth/Login.tsx

@@ -35,7 +35,6 @@ import FiltersCache from "@/Utils/FiltersCache";
 import ViewCache from "@/Utils/ViewCache";
 import routes from "@/Utils/request/api";
 import mutate from "@/Utils/request/mutate";
-import request from "@/Utils/request/request";
 import { TokenData } from "@/types/auth/otpToken";
 
 interface LoginFormData {
@@ -103,20 +102,14 @@ const Login = (props: LoginProps) => {
       FiltersCache.invaldiateAll();
       return await signIn(data);
     },
-    onSuccess: ({ res }) => {
-      setCaptcha(res?.status === 429);
+    onSuccess: (res) => {
+      setCaptcha(!!res?.access);
     },
   });
 
   // Send OTP Mutation
   const { mutate: sendOtp, isPending: sendOtpPending } = useMutation({
-    mutationFn: async (phone: string) => {
-      const response = await request(routes.otp.sendOtp, {
-        body: { phone_number: phone },
-        silent: true,
-      });
-      return response;
-    },
+    mutationFn: mutate(routes.otp.sendOtp),
     onSuccess: () => {
       setIsOtpSent(true);
       setOtpError("");
@@ -280,7 +273,7 @@ const Login = (props: LoginProps) => {
 
     try {
       if (!isOtpSent) {
-        await sendOtp(phone);
+        await sendOtp({ phone_number: phone });
         setIsOtpSent(true);
       } else {
         await verifyOtp({ phone_number: phone, otp });

src/components/Auth/ResetPassword.tsx

@@ -1,5 +1,6 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { navigate } from "raviger";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 
@@ -12,7 +13,8 @@ import { LocalStorageKeys } from "@/common/constants";
 import { validatePassword } from "@/common/validation";
 
 import routes from "@/Utils/request/api";
-import request from "@/Utils/request/request";
+import mutate from "@/Utils/request/mutate";
+import query from "@/Utils/request/query";
 
 interface ResetPasswordProps {
   token: string;
@@ -69,40 +71,37 @@ const ResetPassword = (props: ResetPasswordProps) => {
     }
     return form;
   };
+  const { mutate: resetPassword } = useMutation({
+    mutationFn: mutate(routes.resetPassword),
+    onSuccess: (_data) => {
+      localStorage.removeItem(LocalStorageKeys.accessToken);
+      toast.success(t("password_reset_success"));
+      navigate("/login");
+    },
+    onError: (error) => {
+      if (error.cause) {
+        setErrors(error.cause);
+      }
+    },
+  });
 
   const handleSubmit = async (e: any) => {
     e.preventDefault();
     const valid = validateData();
     if (valid) {
       valid.token = props.token;
-      const { res, error } = await request(routes.resetPassword, {
-        body: { ...valid },
-      });
-      if (res?.ok) {
-        localStorage.removeItem(LocalStorageKeys.accessToken);
-        toast.success(t("password_reset_success"));
-        navigate("/login");
-      } else if (res && error) {
-        setErrors(error);
-      }
+      resetPassword(valid);
     }
   };
 
-  useEffect(() => {
-    const checkResetToken = async () => {
-      const { res } = await request(routes.checkResetToken, {
-        body: { token: props.token },
-      });
-      if (!res || !res.ok) {
-        navigate("/invalid-reset");
-      }
-    };
-    if (props.token) {
-      checkResetToken();
-    } else {
-      navigate("/invalid-reset");
-    }
-  }, []);
+  const { isError } = useQuery({
+    queryKey: ["checkResetToken", { token: props.token }],
+    queryFn: () =>
+      query(routes.checkResetToken, { body: { token: props.token } }),
+    enabled: !!props.token,
+  });
+
+  if (isError) navigate("/invalid-reset");
 
   return (
     <div className="min-h-screen flex items-center justify-center bg-gray-100">

src/components/Facility/FacilityHome.tsx

@@ -6,6 +6,7 @@ import {
   TooltipTrigger,
 } from "@radix-ui/react-tooltip";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMutation } from "@tanstack/react-query";
 import { Hospital, MapPin, MoreVertical, Settings } from "lucide-react";
 import { navigate } from "raviger";
 import { useState } from "react";
@@ -33,8 +34,8 @@ import { FACILITY_FEATURE_TYPES } from "@/common/constants";
 
 import { PLUGIN_Component } from "@/PluginEngine";
 import routes from "@/Utils/request/api";
-import query from "@/Utils/request/query";
-import request from "@/Utils/request/request";
+import mutate from "@/Utils/request/mutate";
+import query, { callApi } from "@/Utils/request/query";
 import uploadFile from "@/Utils/request/uploadFile";
 import { getAuthorizationHeader } from "@/Utils/request/utils";
 import { sleep } from "@/Utils/utils";
@@ -105,23 +106,24 @@ export const FacilityHome = ({ facilityId }: Props) => {
       pathParams: { id: facilityId },
     }),
   });
+  const { mutate: deleteFacility } = useMutation({
+    mutationFn: () =>
+      mutate(routes.deleteFacility, { pathParams: { id: facilityId } })(null),
+    onSuccess: () => {
+      toast.success(t("deleted_successfully", { name: facilityData?.name }));
+      navigate("/facility");
+    },
+    onError: () => {
+      toast.error(t("delete_failed", { name: facilityData?.name }));
+    },
+  });
 
-  const handleDeleteClose = () => {
-    setOpenDeleteDialog(false);
+  const handleDeleteSubmit = () => {
+    deleteFacility();
   };
 
-  const handleDeleteSubmit = async () => {
-    await request(routes.deleteFacility, {
-      pathParams: { id: facilityId },
-      onResponse: ({ res }) => {
-        if (res?.ok) {
-          toast.success(
-            t("deleted_successfully", { name: facilityData?.name }),
-          );
-        }
-        navigate("/facility");
-      },
-    });
+  const handleDeleteClose = () => {
+    setOpenDeleteDialog(false);
   };
 
   const handleCoverImageUpload = async (file: File, onError: () => void) => {
@@ -154,16 +156,17 @@ export const FacilityHome = ({ facilityId }: Props) => {
   };
 
   const handleCoverImageDelete = async (onError: () => void) => {
-    const { res } = await request(routes.deleteFacilityCoverImage, {
-      pathParams: { id: facilityId },
-    });
-    if (res?.ok) {
+    try {
+      await callApi(routes.deleteFacilityCoverImage, {
+        pathParams: { id: facilityId },
+      });
+
       toast.success(t("cover_image_deleted"));
       queryClient.invalidateQueries({
         queryKey: ["facility", facilityId],
       });
       setEditCoverImage(false);
-    } else {
+    } catch {
       onError();
     }
   };

src/components/Resource/ResourceCommentSection.tsx

@@ -1,3 +1,4 @@
+import { useMutation } from "@tanstack/react-query";
 import { t } from "i18next";
 import { useState } from "react";
 import { toast } from "sonner";
@@ -11,13 +12,18 @@ import { Avatar } from "@/components/Common/Avatar";
 import CircularProgress from "@/components/Common/CircularProgress";
 
 import routes from "@/Utils/request/api";
-import request from "@/Utils/request/request";
+import mutate from "@/Utils/request/mutate";
 import { formatName, relativeTime } from "@/Utils/utils";
 import { CommentModel } from "@/types/resourceRequest/resourceRequest";
 
 const CommentSection = (props: { id: string }) => {
   const [commentBox, setCommentBox] = useState("");
-
+  const { mutate: addResourceComments } = useMutation({
+    mutationFn: mutate(routes.addResourceComments, {
+      pathParams: { id: props.id },
+    }),
+    onSuccess: () => toast.success(t("comment_added_successfully")),
+  });
   const onSubmitComment = async () => {
     const payload = {
       comment: commentBox,
@@ -26,13 +32,7 @@ const CommentSection = (props: { id: string }) => {
       toast.error(t("comment_min_length"));
       return;
     }
-    const { res } = await request(routes.addResourceComments, {
-      pathParams: { id: props.id },
-      body: payload,
-    });
-    if (res?.ok) {
-      toast.success(t("comment_added_successfully"));
-    }
+    addResourceComments(payload);
     setCommentBox("");
   };
   return (