Refactor to use React Query for data fetching in FileBlock, FileUpload, UserAvatar, and UserHome components

abhimanyurajeesh · abhimanyurajeesh · commit d210a44a81e4 · 2025-01-18T18:44:38.000+05:30
diff --git 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,18 @@ 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: [
+      routes.retrieveUpload.path,
+      file.id,
+      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 +91,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
@@ -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,79 @@ 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: activeFilesQuery, 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: archivedFilesQuery, 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: dischargeSummaryQuery, 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: activeFilesQuery, isLoading: activeFilesLoading },
+    ARCHIVED: { data: archivedFilesQuery, isLoading: archivedFilesLoading },
+    DISCHARGE_SUMMARY: {
+      data: dischargeSummaryQuery,
+      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
+    ...(dischargeSummaryQuery?.results?.length
       ? [
           {
             text: "Discharge Summary",
diff --git a/src/components/Users/UserAvatar.tsx b/src/components/Users/UserAvatar.tsx
@@ -1,5 +1,6 @@
 import careConfig from "@careConfig";
 import { useQueryClient } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
@@ -15,9 +16,9 @@ import useAuthUser from "@/hooks/useAuthUser";
 
 import { showAvatarEdit } from "@/Utils/permissions";
 import routes from "@/Utils/request/api";
+import query from "@/Utils/request/query";
 import request from "@/Utils/request/request";
 import uploadFile from "@/Utils/request/uploadFile";
-import useTanStackQueryInstead from "@/Utils/request/useQuery";
 import { getAuthorizationHeader } from "@/Utils/request/utils";
 import { formatDisplayName, sleep } from "@/Utils/utils";
 
@@ -27,14 +28,14 @@ export default function UserAvatar({ username }: { username: string }) {
   const authUser = useAuthUser();
   const queryClient = useQueryClient();
 
-  const { data: userData, loading: isLoading } = useTanStackQueryInstead(
-    routes.getUserDetails,
-    {
+  const { data: userData, isLoading } = useQuery({
+    queryKey: ["getUserDetails", username],
+    queryFn: query(routes.getUserDetails, {
       pathParams: {
         username: username,
       },
-    },
-  );
+    }),
+  });
 
   if (isLoading || !userData) {
     return <Loading />;
diff --git a/src/components/Users/UserHome.tsx b/src/components/Users/UserHome.tsx
@@ -1,7 +1,6 @@
-import { Link, navigate } from "raviger";
-import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Link } from "raviger";
 import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
 
 import Loading from "@/components/Common/Loading";
 import Page from "@/components/Common/Page";
@@ -14,9 +13,8 @@ import UserSummaryTab from "@/components/Users/UserSummary";
 import useAuthUser from "@/hooks/useAuthUser";
 
 import routes from "@/Utils/request/api";
-import useTanStackQueryInstead from "@/Utils/request/useQuery";
+import query from "@/Utils/request/query";
 import { classNames, formatName, keysOf } from "@/Utils/utils";
-import { UserBase } from "@/types/user/user";
 
 export interface UserHomeProps {
   username?: string;
@@ -31,35 +29,26 @@ export interface TabChildProp {
 export default function UserHome(props: UserHomeProps) {
   const { tab } = props;
   let { username } = props;
-  const [userData, setUserData] = useState<UserBase>();
   const { t } = useTranslation();
   const authUser = useAuthUser();
   if (!username) {
     username = authUser.username;
   }
   const loggedInUser = username === authUser.username;
 
-  const { loading, refetch: refetchUserDetails } = useTanStackQueryInstead(
-    routes.getUserDetails,
-    {
-      pathParams: {
-        username: username,
-      },
-      onResponse: ({ res, data, error }) => {
-        if (res?.status === 200 && data) {
-          setUserData(data);
-        } else if (res?.status === 400) {
-          navigate("/users");
-        } else if (error) {
-          toast.error(
-            t("error_fetching_user_details") + (error?.message || ""),
-          );
-        }
-      },
-    },
-  );
+  const {
+    data: userData,
+    isLoading,
+    refetch: refetchUserDetails,
+  } = useQuery({
+    queryKey: ["getUserDetails", username],
+    queryFn: query(routes.getUserDetails, {
+      pathParams: { username },
+    }),
+    enabled: Boolean(username),
+  });
 
-  if (loading || !userData) {
+  if (isLoading || !userData) {
     return <Loading />;
   }
 
