Refactor FileBlock, FileUpload, and UserHome components to improve qu…

…ery key structure and enhance data handling with React Query
ohcnetwork · Jan 20, 2025 · 9bc53a5 · 9bc53a5
1 parent d210a44
commit 9bc53a5
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 32 deletions.
diff --git a/src/components/Files/FileBlock.tsx b/src/components/Files/FileBlock.tsx
@@ -35,12 +35,7 @@ export default function FileBlock(props: FileBlockProps) {
   const filetype = fileManager.getFileType(file);
 
   const { data: fileData } = useQuery({
-    queryKey: [
-      routes.retrieveUpload.path,
-      file.id,
-      fileManager.type,
-      associating_id,
-    ],
+    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 || "" },

diff --git a/src/components/Files/FileUpload.tsx b/src/components/Files/FileUpload.tsx
@@ -134,7 +134,7 @@ export const FileUpload = (props: FileUploadProps) => {
     }
   };
 
-  const { data: activeFilesQuery, isLoading: activeFilesLoading } = useQuery({
+  const { data: activeFiles, isLoading: activeFilesLoading } = useQuery({
     queryKey: ["viewUpload", "active", type, associatedId, offset],
     queryFn: query(routes.viewUpload, {
       queryParams: {
@@ -147,21 +147,20 @@ export const FileUpload = (props: FileUploadProps) => {
     }),
   });
 
-  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: 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: dischargeSummaryQuery, isLoading: dischargeSummaryLoading } =
+  const { data: dischargeSummary, isLoading: dischargeSummaryLoading } =
     useQuery({
       queryKey: ["viewUpload", "discharge_summary", associatedId, offset],
       queryFn: query(routes.viewUpload, {
@@ -178,10 +177,10 @@ export const FileUpload = (props: FileUploadProps) => {
     });
 
   const queries = {
-    UNARCHIVED: { data: activeFilesQuery, isLoading: activeFilesLoading },
-    ARCHIVED: { data: archivedFilesQuery, isLoading: archivedFilesLoading },
+    UNARCHIVED: { data: activeFiles, isLoading: activeFilesLoading },
+    ARCHIVED: { data: archivedFiles, isLoading: archivedFilesLoading },
     DISCHARGE_SUMMARY: {
-      data: dischargeSummaryQuery,
+      data: dischargeSummary,
       isLoading: dischargeSummaryLoading,
     },
   };
@@ -192,7 +191,7 @@ export const FileUpload = (props: FileUploadProps) => {
   const tabs = [
     { text: "Active Files", value: "UNARCHIVED" },
     { text: "Archived Files", value: "ARCHIVED" },
-    ...(dischargeSummaryQuery?.results?.length
+    ...(dischargeSummary?.results?.length
       ? [
           {
             text: "Discharge Summary",

diff --git a/src/components/Users/UserHome.tsx b/src/components/Users/UserHome.tsx
@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Link } from "raviger";
 import { useTranslation } from "react-i18next";
 
@@ -31,23 +31,27 @@ export default function UserHome(props: UserHomeProps) {
   let { username } = props;
   const { t } = useTranslation();
   const authUser = useAuthUser();
+  const queryClient = useQueryClient();
+
   if (!username) {
     username = authUser.username;
   }
   const loggedInUser = username === authUser.username;
 
-  const {
-    data: userData,
-    isLoading,
-    refetch: refetchUserDetails,
-  } = useQuery({
+  const { data: userData, isLoading } = useQuery({
     queryKey: ["getUserDetails", username],
     queryFn: query(routes.getUserDetails, {
       pathParams: { username },
     }),
     enabled: Boolean(username),
   });
 
+  const invalidateUserDetails = () => {
+    queryClient.invalidateQueries({
+      queryKey: ["getUserDetails", username],
+    });
+  };
+
   if (isLoading || !userData) {
     return <Loading />;
   }
@@ -135,7 +139,7 @@ export default function UserHome(props: UserHomeProps) {
               userData={userData}
               username={username}
               {...props}
-              refetchUserData={refetchUserDetails}
+              refetchUserData={invalidateUserDetails}
             />
           </>
         }