From ea4bd466da8eef30050683c4e5c3cf940e32bb10 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Fri, 31 Jan 2025 22:47:18 +0530
Subject: [PATCH 1/9] replace useTanStack with useQuery

---
 .../Common/UserAutocompleteFormField.tsx      | 38 +++----
 src/components/Files/FileBlock.tsx            | 16 +--
 src/components/Files/FileUpload.tsx           | 98 ++++++++++++-------
 src/components/Patient/FileUploadPage.tsx     | 15 ++-
 4 files changed, 104 insertions(+), 63 deletions(-)

diff --git a/src/components/Common/UserAutocompleteFormField.tsx b/src/components/Common/UserAutocompleteFormField.tsx
index 90addafb702..83a2db361a6 100644
--- a/src/components/Common/UserAutocompleteFormField.tsx
+++ b/src/components/Common/UserAutocompleteFormField.tsx
@@ -1,3 +1,4 @@
+import { useQuery } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 
 import { Autocomplete } from "@/components/Form/FormFields/Autocomplete";
@@ -10,7 +11,7 @@ import { UserType } from "@/components/Users/UserFormValidations";
 import { UserBareMinimum } from "@/components/Users/models";
 
 import routes from "@/Utils/request/api";
-import useTanStackQueryInstead from "@/Utils/request/useQuery";
+import query from "@/Utils/request/query";
 import {
   classNames,
   formatName,
@@ -33,35 +34,38 @@ type UserSearchProps = BaseProps & {
 
 export default function UserAutocomplete(props: UserSearchProps) {
   const field = useFormFieldPropsResolver(props);
-  const [query, setQuery] = useState("");
+  const [queryParam, setQueryParam] = useState("");
   const [disabled, setDisabled] = useState(false);
 
-  const { data, loading } = useTanStackQueryInstead(routes.userList, {
-    query: {
-      home_facility: props.homeFacility,
-      user_type: props.userType,
-      search_text: query,
-      limit: 50,
-      offset: 0,
-    },
+  const { data, isLoading } = useQuery({
+    queryKey: ["user", props.homeFacility, props.facilityId],
+    queryFn: query(routes.userList, {
+      queryParams: {
+        home_facility: props.homeFacility,
+        user_type: props.userType,
+        search_text: queryParam,
+        limit: 50,
+        offset: 0,
+      },
+    }),
   });
 
   useEffect(() => {
     if (
-      loading ||
-      query ||
+      isLoading ||
+      queryParam ||
       !field.required ||
       !props.noResultsError ||
-      !data?.results
+      !data
     ) {
       return;
     }
 
-    if (data.results.length === 0) {
+    if (data.count === 0) {
       setDisabled(true);
       field.handleChange(undefined as unknown as UserBareMinimum);
     }
-  }, [loading, field.required, data?.results, props.noResultsError]);
+  }, [isLoading, field.required, data?.results, props.noResultsError]);
 
   const getAvatar = (option: UserBareMinimum) => {
     return (
@@ -94,8 +98,8 @@ export default function UserAutocomplete(props: UserSearchProps) {
           `${option.user_type} - ${option.username}`
         }
         optionValue={(option) => option}
-        onQuery={setQuery}
-        isLoading={loading}
+        onQuery={setQueryParam}
+        isLoading={isLoading}
       />
     </FormField>
   );
diff --git a/src/components/Files/FileBlock.tsx b/src/components/Files/FileBlock.tsx
index 46b6f680889..1b9cb9f8959 100644
--- a/src/components/Files/FileBlock.tsx
+++ b/src/components/Files/FileBlock.tsx
@@ -1,3 +1,4 @@
+import { useQuery } from "@tanstack/react-query";
 import dayjs from "dayjs";
 import { t } from "i18next";
 
@@ -12,7 +13,7 @@ import { FileManagerResult } from "@/hooks/useFileManager";
 import { FILE_EXTENSIONS } from "@/common/constants";
 
 import routes from "@/Utils/request/api";
-import useTanStackQueryInstead from "@/Utils/request/useQuery";
+import query from "@/Utils/request/query";
 
 export interface FileBlockProps {
   file: FileUploadModel;
@@ -33,10 +34,13 @@ export default function FileBlock(props: FileBlockProps) {
 
   const filetype = fileManager.getFileType(file);
 
-  const fileData = useTanStackQueryInstead(routes.retrieveUpload, {
-    query: { file_type: fileManager.type, associating_id },
-    pathParams: { id: file.id || "" },
-    prefetch: filetype === "AUDIO" && !file.is_archived,
+  const { data: fileData } = useQuery({
+    queryKey: ["file", { id: file.id, type: fileManager.type, associating_id }],
+    queryFn: query(routes.retrieveUpload, {
+      queryParams: { file_type: fileManager.type, associating_id },
+      pathParams: { id: file.id || "" },
+    }),
+    enabled: filetype === "AUDIO" && !file.is_archived,
   });
 
   const icons: Record<keyof typeof FILE_EXTENSIONS | "UNKNOWN", IconName> = {
@@ -82,7 +86,7 @@ export default function FileBlock(props: FileBlockProps) {
           <div className="w-full md:w-[300px]">
             <audio
               className="max-h-full w-full object-contain"
-              src={fileData.data?.read_signed_url}
+              src={fileData?.read_signed_url}
               controls
               preload="auto"
               controlsList="nodownload"
diff --git a/src/components/Files/FileUpload.tsx b/src/components/Files/FileUpload.tsx
index 56017294f52..707e7f6fd29 100644
--- a/src/components/Files/FileUpload.tsx
+++ b/src/components/Files/FileUpload.tsx
@@ -1,3 +1,4 @@
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Loader2 } from "lucide-react";
 import { ReactNode, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -19,7 +20,7 @@ import useFileUpload from "@/hooks/useFileUpload";
 import { RESULTS_PER_PAGE_LIMIT } from "@/common/constants";
 
 import routes from "@/Utils/request/api";
-import useTanStackQueryInstead from "@/Utils/request/useQuery";
+import query from "@/Utils/request/query";
 
 export const LinearProgressWithLabel = (props: { value: number }) => {
   return (
@@ -89,6 +90,7 @@ export const FileUpload = (props: FileUploadProps) => {
   const [offset, setOffset] = useState(0);
   const [tab, setTab] = useState("UNARCHIVED");
   const authUser = useAuthUser();
+  const queryClient = useQueryClient();
 
   const handlePagination = (page: number, limit: number) => {
     const offset = (page - 1) * limit;
@@ -118,54 +120,78 @@ export const FileUpload = (props: FileUploadProps) => {
       CLAIM: claimId,
     }[type] || "";
 
-  const activeFilesQuery = useTanStackQueryInstead(routes.viewUpload, {
-    query: {
-      file_type: type,
-      associating_id: associatedId,
-      is_archived: false,
-      limit: RESULTS_PER_PAGE_LIMIT,
-      offset: offset,
-    },
-  });
+  const refetchAll = () => {
+    queryClient.invalidateQueries({
+      queryKey: ["viewUpload", "active", type, associatedId],
+    });
+    queryClient.invalidateQueries({
+      queryKey: ["viewUpload", "archived", type, associatedId],
+    });
+    if (type === "consultation") {
+      queryClient.invalidateQueries({
+        queryKey: ["viewUpload", "discharge_summary", associatedId],
+      });
+    }
+  };
 
-  const archivedFilesQuery = useTanStackQueryInstead(routes.viewUpload, {
-    query: {
-      file_type: type,
-      associating_id: associatedId,
-      is_archived: true,
-      limit: RESULTS_PER_PAGE_LIMIT,
-      offset: offset,
-    },
+  const { data: activeFiles, isLoading: activeFilesLoading } = useQuery({
+    queryKey: ["viewUpload", "active", type, associatedId, offset],
+    queryFn: query(routes.viewUpload, {
+      queryParams: {
+        file_type: type,
+        associating_id: associatedId,
+        is_archived: false,
+        limit: RESULTS_PER_PAGE_LIMIT,
+        offset: offset,
+      },
+    }),
   });
 
-  const dischargeSummaryQuery = useTanStackQueryInstead(routes.viewUpload, {
-    query: {
-      file_type: "discharge_summary",
-      associating_id: associatedId,
-      is_archived: false,
-      limit: RESULTS_PER_PAGE_LIMIT,
-      offset: offset,
-    },
-    prefetch: type === "consultation",
-    silent: true,
+  const { data: archivedFiles, isLoading: archivedFilesLoading } = useQuery({
+    queryKey: ["viewUpload", "archived", type, associatedId, offset],
+    queryFn: query(routes.viewUpload, {
+      queryParams: {
+        file_type: type,
+        associating_id: associatedId,
+        is_archived: true,
+        limit: RESULTS_PER_PAGE_LIMIT,
+        offset: offset,
+      },
+    }),
   });
 
+  const { data: dischargeSummary, isLoading: dischargeSummaryLoading } =
+    useQuery({
+      queryKey: ["viewUpload", "discharge_summary", associatedId, offset],
+      queryFn: query(routes.viewUpload, {
+        queryParams: {
+          file_type: "discharge_summary",
+          associating_id: associatedId,
+          is_archived: false,
+          limit: RESULTS_PER_PAGE_LIMIT,
+          offset: offset,
+          silent: true,
+        },
+      }),
+      enabled: type === "consultation",
+    });
+
   const queries = {
-    UNARCHIVED: activeFilesQuery,
-    ARCHIVED: archivedFilesQuery,
-    DISCHARGE_SUMMARY: dischargeSummaryQuery,
+    UNARCHIVED: { data: activeFiles, isLoading: activeFilesLoading },
+    ARCHIVED: { data: archivedFiles, isLoading: archivedFilesLoading },
+    DISCHARGE_SUMMARY: {
+      data: dischargeSummary,
+      isLoading: dischargeSummaryLoading,
+    },
   };
 
-  const refetchAll = async () =>
-    Promise.all(Object.values(queries).map((q) => q.refetch()));
-  const loading = Object.values(queries).some((q) => q.loading);
-
+  const loading = Object.values(queries).some((q) => q.isLoading);
   const fileQuery = queries[tab as keyof typeof queries];
 
   const tabs = [
     { text: "Active Files", value: "UNARCHIVED" },
     { text: "Archived Files", value: "ARCHIVED" },
-    ...(dischargeSummaryQuery.data?.results?.length
+    ...(dischargeSummary?.results?.length
       ? [
           {
             text: "Discharge Summary",
diff --git a/src/components/Patient/FileUploadPage.tsx b/src/components/Patient/FileUploadPage.tsx
index 06c5e2987e6..0e00203e7b2 100644
--- a/src/components/Patient/FileUploadPage.tsx
+++ b/src/components/Patient/FileUploadPage.tsx
@@ -1,8 +1,10 @@
+import { useQuery } from "@tanstack/react-query";
+
 import Page from "@/components/Common/Page";
 import { FileUpload } from "@/components/Files/FileUpload";
 
 import routes from "@/Utils/request/api";
-import useTanStackQueryInstead from "@/Utils/request/useQuery";
+import query from "@/Utils/request/query";
 
 export default function FileUploadPage(props: {
   facilityId: string;
@@ -11,10 +13,15 @@ export default function FileUploadPage(props: {
   type: "encounter" | "patient";
 }) {
   const { facilityId, patientId, encounterId, type } = props;
-  const { data: patient } = useTanStackQueryInstead(routes.getPatient, {
-    pathParams: { id: patientId },
-    prefetch: !!patientId,
+
+  const { data: patient } = useQuery({
+    queryKey: ["patient", facilityId, patientId],
+    queryFn: query(routes.getPatient, {
+      pathParams: { id: patientId },
+    }),
+    enabled: !!patientId,
   });
+
   return (
     <Page
       hideBack={false}

From 8a43897b7c21e031627fa651fb086f579d4fee3f Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Sat, 1 Feb 2025 03:27:50 +0530
Subject: [PATCH 2/9] rm useTanStack from resourceUpdate

---
 .../Resource/ResourceDetailsUpdate.tsx        | 53 +++++++++----------
 1 file changed, 26 insertions(+), 27 deletions(-)

diff --git a/src/components/Resource/ResourceDetailsUpdate.tsx b/src/components/Resource/ResourceDetailsUpdate.tsx
index d64bd2bc6f0..d61d03d6e56 100644
--- a/src/components/Resource/ResourceDetailsUpdate.tsx
+++ b/src/components/Resource/ResourceDetailsUpdate.tsx
@@ -1,6 +1,7 @@
+import { useQuery } from "@tanstack/react-query";
 import { t } from "i18next";
 import { navigate, useQueryParams } from "raviger";
-import { useReducer, useState } from "react";
+import { useEffect, useReducer, useState } from "react";
 import { toast } from "sonner";
 
 import Card from "@/CAREUI/display/Card";
@@ -26,8 +27,8 @@ import useAppHistory from "@/hooks/useAppHistory";
 import { RESOURCE_STATUS_CHOICES } from "@/common/constants";
 
 import routes from "@/Utils/request/api";
+import query from "@/Utils/request/query";
 import request from "@/Utils/request/request";
-import useTanStackQueryInstead from "@/Utils/request/useQuery";
 import { UpdateResourceRequest } from "@/types/resourceRequest/resourceRequest";
 
 interface resourceProps {
@@ -84,17 +85,16 @@ export const ResourceDetailsUpdate = (props: resourceProps) => {
   };
 
   const [state, dispatch] = useReducer(resourceFormReducer, initialState);
-
-  const { loading: assignedUserLoading } = useTanStackQueryInstead(
-    routes.userList,
-    {
-      onResponse: ({ res, data }) => {
-        if (res?.ok && data && data.count) {
-          SetAssignedUser(data.results[0]);
-        }
-      },
-    },
-  );
+  const { data, isLoading: assignedUserLoading } = useQuery({
+    queryKey: ["user", props.facilityId],
+    queryFn: query(routes.userList),
+  });
+
+  useEffect(() => {
+    if (data) {
+      SetAssignedUser(data.results[0]);
+    }
+  }, [data]);
 
   const validateForm = () => {
     const errors = { ...initError };
@@ -129,21 +129,20 @@ export const ResourceDetailsUpdate = (props: resourceProps) => {
     form[name] = selected;
     dispatch({ type: "set_form", form });
   };
-
-  const { data: resourceDetails } = useTanStackQueryInstead(
-    routes.getResourceDetails,
-    {
+  const { data: resourceDetails } = useQuery({
+    queryKey: ["resource", props.facilityId, props.id],
+    queryFn: query(routes.getResourceDetails, {
       pathParams: { id: props.id },
-      onResponse: ({ res, data }) => {
-        if (res && data) {
-          const d = data;
-          d["status"] = qParams.status || data.status.toLowerCase();
-          dispatch({ type: "set_form", form: d });
-        }
-        setIsLoading(false);
-      },
-    },
-  );
+    }),
+  });
+  useEffect(() => {
+    if (resourceDetails) {
+      const d = resourceDetails;
+      d["status"] = qParams.status || resourceDetails.status.toLowerCase();
+      dispatch({ type: "set_form", form: d });
+    }
+    setIsLoading(false);
+  }, [resourceDetails]);
 
   const handleSubmit = async () => {
     const validForm = validateForm();

From 6e1b180935832a76d1438b26603dbf11d3ef5ce7 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Sat, 1 Feb 2025 03:29:08 +0530
Subject: [PATCH 3/9] comment added

---
 src/CAREUI/misc/PaginatedList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/CAREUI/misc/PaginatedList.tsx b/src/CAREUI/misc/PaginatedList.tsx
index 01b9b0538b5..c5a1449d543 100644
--- a/src/CAREUI/misc/PaginatedList.tsx
+++ b/src/CAREUI/misc/PaginatedList.tsx
@@ -13,7 +13,7 @@ import useTanStackQueryInstead, {
 import { classNames } from "@/Utils/utils";
 
 const DEFAULT_PER_PAGE_LIMIT = 14;
-
+// only this file is pending except this remaining is ready for review
 interface PaginatedListContext<TItem>
   extends ReturnType<typeof useTanStackQueryInstead<PaginatedResponse<TItem>>> {
   items: TItem[];

From 7a5f33e315b4c31603fe3a9953b246e672dd1be1 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Sat, 1 Feb 2025 03:44:21 +0530
Subject: [PATCH 4/9] coderabbit suggestion

---
 src/components/Resource/ResourceDetailsUpdate.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/Resource/ResourceDetailsUpdate.tsx b/src/components/Resource/ResourceDetailsUpdate.tsx
index d61d03d6e56..3d6d6d40acb 100644
--- a/src/components/Resource/ResourceDetailsUpdate.tsx
+++ b/src/components/Resource/ResourceDetailsUpdate.tsx
@@ -137,9 +137,13 @@ export const ResourceDetailsUpdate = (props: resourceProps) => {
   });
   useEffect(() => {
     if (resourceDetails) {
-      const d = resourceDetails;
-      d["status"] = qParams.status || resourceDetails.status.toLowerCase();
-      dispatch({ type: "set_form", form: d });
+      dispatch({
+        type: "set_form",
+        form: {
+          ...resourceDetails,
+          status: qParams.status || resourceDetails.status.toLowerCase(),
+        },
+      });
     }
     setIsLoading(false);
   }, [resourceDetails]);

From 262126bce8d56e79d0a059e69c27a15265a8631d Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Sat, 1 Feb 2025 15:08:19 +0530
Subject: [PATCH 5/9] Discard Paginated List

---
 src/CAREUI/misc/PaginatedList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/CAREUI/misc/PaginatedList.tsx b/src/CAREUI/misc/PaginatedList.tsx
index c5a1449d543..01b9b0538b5 100644
--- a/src/CAREUI/misc/PaginatedList.tsx
+++ b/src/CAREUI/misc/PaginatedList.tsx
@@ -13,7 +13,7 @@ import useTanStackQueryInstead, {
 import { classNames } from "@/Utils/utils";
 
 const DEFAULT_PER_PAGE_LIMIT = 14;
-// only this file is pending except this remaining is ready for review
+
 interface PaginatedListContext<TItem>
   extends ReturnType<typeof useTanStackQueryInstead<PaginatedResponse<TItem>>> {
   items: TItem[];

From 2906b3a55b89a9eff0c354410023cbaefa30d261 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Sun, 2 Feb 2025 00:05:10 +0530
Subject: [PATCH 6/9] discard changes in userAutoComp and rm FacilityId

---
 .../Common/UserAutocompleteFormField.tsx      | 38 +++++++++----------
 src/components/Patient/FileUploadPage.tsx     |  2 +-
 2 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/src/components/Common/UserAutocompleteFormField.tsx b/src/components/Common/UserAutocompleteFormField.tsx
index 83a2db361a6..90addafb702 100644
--- a/src/components/Common/UserAutocompleteFormField.tsx
+++ b/src/components/Common/UserAutocompleteFormField.tsx
@@ -1,4 +1,3 @@
-import { useQuery } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 
 import { Autocomplete } from "@/components/Form/FormFields/Autocomplete";
@@ -11,7 +10,7 @@ import { UserType } from "@/components/Users/UserFormValidations";
 import { UserBareMinimum } from "@/components/Users/models";
 
 import routes from "@/Utils/request/api";
-import query from "@/Utils/request/query";
+import useTanStackQueryInstead from "@/Utils/request/useQuery";
 import {
   classNames,
   formatName,
@@ -34,38 +33,35 @@ type UserSearchProps = BaseProps & {
 
 export default function UserAutocomplete(props: UserSearchProps) {
   const field = useFormFieldPropsResolver(props);
-  const [queryParam, setQueryParam] = useState("");
+  const [query, setQuery] = useState("");
   const [disabled, setDisabled] = useState(false);
 
-  const { data, isLoading } = useQuery({
-    queryKey: ["user", props.homeFacility, props.facilityId],
-    queryFn: query(routes.userList, {
-      queryParams: {
-        home_facility: props.homeFacility,
-        user_type: props.userType,
-        search_text: queryParam,
-        limit: 50,
-        offset: 0,
-      },
-    }),
+  const { data, loading } = useTanStackQueryInstead(routes.userList, {
+    query: {
+      home_facility: props.homeFacility,
+      user_type: props.userType,
+      search_text: query,
+      limit: 50,
+      offset: 0,
+    },
   });
 
   useEffect(() => {
     if (
-      isLoading ||
-      queryParam ||
+      loading ||
+      query ||
       !field.required ||
       !props.noResultsError ||
-      !data
+      !data?.results
     ) {
       return;
     }
 
-    if (data.count === 0) {
+    if (data.results.length === 0) {
       setDisabled(true);
       field.handleChange(undefined as unknown as UserBareMinimum);
     }
-  }, [isLoading, field.required, data?.results, props.noResultsError]);
+  }, [loading, field.required, data?.results, props.noResultsError]);
 
   const getAvatar = (option: UserBareMinimum) => {
     return (
@@ -98,8 +94,8 @@ export default function UserAutocomplete(props: UserSearchProps) {
           `${option.user_type} - ${option.username}`
         }
         optionValue={(option) => option}
-        onQuery={setQueryParam}
-        isLoading={isLoading}
+        onQuery={setQuery}
+        isLoading={loading}
       />
     </FormField>
   );
diff --git a/src/components/Patient/FileUploadPage.tsx b/src/components/Patient/FileUploadPage.tsx
index 0e00203e7b2..d964f7e65ca 100644
--- a/src/components/Patient/FileUploadPage.tsx
+++ b/src/components/Patient/FileUploadPage.tsx
@@ -15,7 +15,7 @@ export default function FileUploadPage(props: {
   const { facilityId, patientId, encounterId, type } = props;
 
   const { data: patient } = useQuery({
-    queryKey: ["patient", facilityId, patientId],
+    queryKey: ["patient", patientId],
     queryFn: query(routes.getPatient, {
       pathParams: { id: patientId },
     }),

From f0e5da2b6806eb999f826a818cf2af69d48fd11b Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Sun, 2 Feb 2025 00:11:52 +0530
Subject: [PATCH 7/9] coderabbit suggestion

---
 src/components/Patient/FileUploadPage.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Patient/FileUploadPage.tsx b/src/components/Patient/FileUploadPage.tsx
index d964f7e65ca..7fff5eb6fb6 100644
--- a/src/components/Patient/FileUploadPage.tsx
+++ b/src/components/Patient/FileUploadPage.tsx
@@ -5,6 +5,7 @@ import { FileUpload } from "@/components/Files/FileUpload";
 
 import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
+import { PatientModel } from "@/types/emr/patient";
 
 export default function FileUploadPage(props: {
   facilityId: string;
@@ -14,7 +15,7 @@ export default function FileUploadPage(props: {
 }) {
   const { facilityId, patientId, encounterId, type } = props;
 
-  const { data: patient } = useQuery({
+  const { data: patient } = useQuery<PatientModel>({
     queryKey: ["patient", patientId],
     queryFn: query(routes.getPatient, {
       pathParams: { id: patientId },

From 739e7068f4e29ed3cf2135eb5ef0e1a8fe20be49 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Sun, 2 Feb 2025 03:51:15 +0530
Subject: [PATCH 8/9] rm loading state

---
 .../Resource/ResourceDetailsUpdate.tsx        | 36 +++++++++----------
 1 file changed, 16 insertions(+), 20 deletions(-)

diff --git a/src/components/Resource/ResourceDetailsUpdate.tsx b/src/components/Resource/ResourceDetailsUpdate.tsx
index 3d6d6d40acb..f3e48df7af8 100644
--- a/src/components/Resource/ResourceDetailsUpdate.tsx
+++ b/src/components/Resource/ResourceDetailsUpdate.tsx
@@ -1,4 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
+import { useMutation } from "@tanstack/react-query";
 import { t } from "i18next";
 import { navigate, useQueryParams } from "raviger";
 import { useEffect, useReducer, useState } from "react";
@@ -27,8 +28,8 @@ import useAppHistory from "@/hooks/useAppHistory";
 import { RESOURCE_STATUS_CHOICES } from "@/common/constants";
 
 import routes from "@/Utils/request/api";
+import mutate from "@/Utils/request/mutate";
 import query from "@/Utils/request/query";
-import request from "@/Utils/request/request";
 import { UpdateResourceRequest } from "@/types/resourceRequest/resourceRequest";
 
 interface resourceProps {
@@ -63,7 +64,6 @@ const initialState = {
 export const ResourceDetailsUpdate = (props: resourceProps) => {
   const { goBack } = useAppHistory();
   const [qParams, _] = useQueryParams();
-  const [isLoading, setIsLoading] = useState(true);
   const [assignedUser, SetAssignedUser] = useState<UserModel>();
   const resourceFormReducer = (state = initialState, action: any) => {
     switch (action.type) {
@@ -145,15 +145,24 @@ export const ResourceDetailsUpdate = (props: resourceProps) => {
         },
       });
     }
-    setIsLoading(false);
   }, [resourceDetails]);
 
+  const { mutate: updateResource, isPending: updateResourceLoading } =
+    useMutation({
+      mutationFn: mutate(routes.updateResource, {
+        pathParams: { id: props.id },
+      }),
+      onSuccess: (data) => {
+        dispatch({ type: "set_form", form: data });
+        toast.success(t("request_updated_successfully"));
+        navigate(`/facility/${props.facilityId}/resource/${props.id}`);
+      },
+    });
+
   const handleSubmit = async () => {
     const validForm = validateForm();
 
     if (validForm) {
-      setIsLoading(true);
-
       const resourceData: UpdateResourceRequest = {
         id: props.id,
         status: state.form.status,
@@ -172,24 +181,11 @@ export const ResourceDetailsUpdate = (props: resourceProps) => {
         approving_facility: state.form.approving_facility?.id,
         related_patient: state.form.related_patient?.id,
       };
-
-      const { res, data } = await request(routes.updateResource, {
-        pathParams: { id: props.id },
-        body: resourceData,
-      });
-      setIsLoading(false);
-
-      if (res && res.status == 200 && data) {
-        dispatch({ type: "set_form", form: data });
-        toast.success(t("request_updated_successfully"));
-        navigate(`/facility/${props.facilityId}/resource/${props.id}`);
-      } else {
-        setIsLoading(false);
-      }
+      updateResource(resourceData);
     }
   };
 
-  if (isLoading) {
+  if (updateResourceLoading || !resourceDetails) {
     return <Loading />;
   }
 

From 0f9320ff947ef8927af5272c3b41a0d42d29f6bd Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Sun, 2 Feb 2025 15:58:16 +0530
Subject: [PATCH 9/9] rm PatientModal type

---
 src/components/Patient/FileUploadPage.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Patient/FileUploadPage.tsx b/src/components/Patient/FileUploadPage.tsx
index 7fff5eb6fb6..d964f7e65ca 100644
--- a/src/components/Patient/FileUploadPage.tsx
+++ b/src/components/Patient/FileUploadPage.tsx
@@ -5,7 +5,6 @@ import { FileUpload } from "@/components/Files/FileUpload";
 
 import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
-import { PatientModel } from "@/types/emr/patient";
 
 export default function FileUploadPage(props: {
   facilityId: string;
@@ -15,7 +14,7 @@ export default function FileUploadPage(props: {
 }) {
   const { facilityId, patientId, encounterId, type } = props;
 
-  const { data: patient } = useQuery<PatientModel>({
+  const { data: patient } = useQuery({
     queryKey: ["patient", patientId],
     queryFn: query(routes.getPatient, {
       pathParams: { id: patientId },