feat: Improve data fetching in the library page

Author: PintoGideon

src/api/chrisapiclient.ts

@@ -2,35 +2,51 @@ import Client from "@fnndsc/chrisapi";
 import { Cookies } from "react-cookie";
 
 /**
- * This is a singleton to hold an instantiated, authenticated `Client` object,
+ * This is a singleton to hold an instantiated, authenticated Client object,
  * in order to prevent  every component that needs the client from having to be
  * passed the token, declare process.env variables, etc.
  */
 
-// biome-ignore lint/complexity/noStaticOnlyClass: Singleton pattern
+// biome-ignore lint/complexity/noStaticOnlyClass: <explanation>
 class ChrisAPIClient {
-  private static client: Client;
-  private static isTokenAuthorized: boolean;
+  private static client: Client | null = null;
+  private static lastCreatedWith: string | null = null; // Track what token was used
 
+  /**
+   * Get the ChRIS API client singleton instance
+   * Optimized to avoid unnecessary recreation
+   */
   static getClient(): Client {
     const cookie = new Cookies();
-    if (!ChrisAPIClient.client || !ChrisAPIClient.isTokenAuthorized) {
-      const user = cookie.get("username");
-      const token: string = cookie.get(`${user}_token`);
-      if (token) {
-        ChrisAPIClient.isTokenAuthorized = true;
-      } else {
-        ChrisAPIClient.isTokenAuthorized = false;
-      }
-      ChrisAPIClient.client = new Client(import.meta.env.VITE_CHRIS_UI_URL, {
-        token,
-      });
+    const user = cookie.get("username");
+    const token: string = cookie.get(`${user}_token`);
+
+    // Return existing client if it exists and was created with the same token
+    if (
+      ChrisAPIClient.client &&
+      ((token && token === ChrisAPIClient.lastCreatedWith) ||
+        (!token && !ChrisAPIClient.lastCreatedWith))
+    ) {
+      return ChrisAPIClient.client;
     }
+
+    // Create new client with current token
+    ChrisAPIClient.client = new Client(import.meta.env.VITE_CHRIS_UI_URL, {
+      token,
+    });
+
+    // Remember what token was used to create this client
+    ChrisAPIClient.lastCreatedWith = token;
+
     return ChrisAPIClient.client;
   }
 
-  static setIsTokenAuthorized(value: boolean) {
-    ChrisAPIClient.isTokenAuthorized = value;
+  /**
+   * Reset the client instance (useful for testing or logout)
+   */
+  static resetClient(): void {
+    ChrisAPIClient.client = null;
+    ChrisAPIClient.lastCreatedWith = null;
   }
 }
 

src/components/GnomeLibrary/GnomeList.tsx

@@ -56,7 +56,7 @@ interface TableProps {
     };
   };
   computedPath: string;
-  handleFolderClick: (folderName: string) => void;
+  handleFolderClick: (folder: FileBrowserFolder) => void;
   fetchMore?: boolean;
   handlePagination?: () => void;
   filesLoading?: boolean;
@@ -518,9 +518,7 @@ const GnomeLibraryTable: React.FC<TableProps> = ({
               owner={r.data.owner_username}
               size={0}
               computedPath={computedPath}
-              handleFolderClick={() =>
-                handleFolderClick(getFolderName(r, computedPath))
-              }
+              handleFolderClick={() => handleFolderClick(r)}
               handleFileClick={() => {}}
               origin={origin}
             />

src/components/GnomeLibrary/index.tsx

@@ -1,4 +1,3 @@
-import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { useCallback, useEffect, useState, useMemo } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { useAppSelector } from "../../store/hooks";
@@ -9,17 +8,30 @@ import GnomeCentralBreadcrumb from "./GnomeCentralBreadcrumb";
 import GnomeLibraryTable from "./GnomeList";
 import GnomeLibrarySidebar from "./GnomeSidebar";
 import styles from "./gnome.module.css";
-import { fetchFolders, type FolderHookData } from "./utils/hooks/useFolders";
+import useFolders from "./utils/hooks/useFolders";
+import type { FileBrowserFolder } from "@fnndsc/chrisapi";
+import { useQueryClient } from "@tanstack/react-query";
 
 const GnomeLibrary = () => {
   const [activeSidebarItem, setActiveSidebarItem] = useState<string>("home");
-  const [isFirstLoad, setIsFirstLoad] = useState(true);
   const [pageNumber, setPageNumber] = useState(1);
-  const [isPaginating, setIsPaginating] = useState(false);
+  const [isFirstLoad, setIsFirstLoad] = useState(true);
 
   const { pathname } = useLocation();
   const navigate = useNavigate();
+  const location = useLocation();
   const username = useAppSelector((state) => state.user.username);
+  const queryClient = useQueryClient();
+
+  // Get selectedFolder ID from navigation state if passed
+  const selectedFolderId = location.state?.selectedFolderId as
+    | number
+    | undefined;
+
+  // Retrieve the folder object from React Query cache if we have an ID
+  const selectedFolder = selectedFolderId
+    ? queryClient.getQueryData<FileBrowserFolder>(["folder", selectedFolderId])
+    : undefined;
 
   const decodedPath = decodeURIComponent(pathname);
   const currentPathSplit = decodedPath.split("/library/")[1];
@@ -29,23 +41,15 @@ const GnomeLibrary = () => {
   useEffect(() => {
     if (computedPath) {
       setPageNumber(1);
-      setIsPaginating(false);
     }
   }, [computedPath]);
 
-  // fetch folders, files, link files
-  const queryKey = ["library_folders", computedPath, pageNumber];
-  const { data, isFetching } = useQuery<FolderHookData>({
-    queryKey: queryKey,
-    queryFn: (): Promise<FolderHookData> => {
-      return fetchFolders(computedPath, pageNumber, data);
-    },
-    placeholderData: isPaginating ? keepPreviousData : undefined,
-    structuralSharing: true,
-    refetchOnWindowFocus: false,
-    refetchOnMount: false,
-    retry: 1, // Only retry once on failure
-  });
+  // fetch folders, files, link files using the optimized hook
+  const { data, isFetching } = useFolders(
+    computedPath,
+    pageNumber,
+    selectedFolder,
+  );
 
   // Determine if there's more data to fetch
   const fetchMore =
@@ -58,7 +62,6 @@ const GnomeLibrary = () => {
    * Keeps placeholder data visible while fetching more items
    */
   const handlePagination = useCallback(() => {
-    setIsPaginating(true);
     setPageNumber((prevState) => prevState + 1);
   }, []);
 
@@ -67,20 +70,26 @@ const GnomeLibrary = () => {
    * Clears placeholder data to show loading state immediately
    */
   const navigateToPath = useCallback(
-    (path: string) => {
-      setIsPaginating(false);
-      navigate(`/library/${path}`);
+    (path: string, folder?: FileBrowserFolder) => {
+      navigate(`/library/${path}`, {
+        state: folder ? { selectedFolderId: folder.data.id } : {},
+      });
     },
     [navigate],
   );
 
   // Navigate to a folder when clicked
   const handleFolderClick = useCallback(
-    (folderName: string) => {
+    (folder: FileBrowserFolder) => {
+      // Cache the folder object in React Query cache
+      queryClient.setQueryData(["folder", folder.data.id], folder);
+
+      // Extract folder name from path
+      const folderName = folder.data.path.split("/").pop() || "";
       const newPath = `${computedPath}/${folderName}`;
-      navigateToPath(newPath);
+      navigateToPath(newPath, folder);
     },
-    [computedPath, navigateToPath],
+    [computedPath, navigateToPath, queryClient],
   );
 
   useEffect(() => {
@@ -173,7 +182,7 @@ const GnomeLibrary = () => {
                       handleFolderClick={handleFolderClick}
                       fetchMore={fetchMore}
                       handlePagination={handlePagination}
-                      filesLoading={isFetching && isPaginating}
+                      filesLoading={isFetching}
                     />
                   )
                 )}