refactor: modified repeated codes

PreciousOritsedere · PreciousOritsedere · commit e1e822f4bafe · 2025-11-19T12:24:54.000Z
diff --git a/app/components/AuthWrapper.tsx b/app/components/AuthWrapper.tsx
@@ -1,10 +1,8 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import {
-  getDefaultSession,
-  handleIncomingRedirect,
-} from "@inrupt/solid-client-authn-browser";
+import { handleIncomingRedirect } from "@inrupt/solid-client-authn-browser";
+import { getSession } from "../lib/helpers";
 import LoginPage from "./LoginPage";
 import LoadingSpinner from "./shared/LoadingSpinner";
 import ErrorDisplay from "./shared/ErrorDisplay";
@@ -29,7 +27,7 @@ export default function AuthWrapper({ children }: AuthWrapperProps) {
         });
 
         // Get the session instance after handling redirect
-        const session = getDefaultSession();
+        const session = getSession();
 
         let isLoggedIn = session.info.isLoggedIn && !!session.info.webId;
 
@@ -66,7 +64,7 @@ export default function AuthWrapper({ children }: AuthWrapperProps) {
           const redirectInfo = await handleIncomingRedirect({
             restorePreviousSession: true,
           });
-          const session = getDefaultSession();
+          const session = getSession();
           if (session.info.isLoggedIn) {
             setIsAuthenticated(true);
             setError(null);
@@ -87,7 +85,7 @@ export default function AuthWrapper({ children }: AuthWrapperProps) {
 
     handleIncomingRedirect({ restorePreviousSession: true })
       .then(() => {
-        const session = getDefaultSession();
+        const session = getSession();
         setIsAuthenticated(session.info.isLoggedIn);
       })
       .catch((err) => {
diff --git a/app/components/FileUploadHandler.tsx b/app/components/FileUploadHandler.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import { useRef, useEffect } from "react";
-import { getDefaultSession } from "@inrupt/solid-client-authn-browser";
 import { overwriteFile, UrlString } from "@inrupt/solid-client";
 import toast from "react-hot-toast";
+import { getAuthenticatedSession } from "../lib/helpers";
 
 interface FileUploadHandlerProps {
   currentContainerUrl: string | null;
@@ -34,14 +34,14 @@ export default function FileUploadHandler({
       return;
     }
 
-    const session = getDefaultSession();
-    if (!session.info.isLoggedIn) {
+    let fetchFn: typeof fetch;
+    try {
+      ({ fetch: fetchFn } = getAuthenticatedSession());
+    } catch (error) {
       toast.error("Not authenticated");
       e.target.value = "";
       return;
     }
-
-    const fetchFn = session.fetch || fetch;
     const uploadPromises: Promise<void>[] = [];
     const uploadedFiles: string[] = [];
     const failedFiles: string[] = [];
diff --git a/app/components/NewFolderDialog.tsx b/app/components/NewFolderDialog.tsx
@@ -4,9 +4,9 @@ import { useState, useEffect, useRef } from "react";
 import Modal from "./shared/Modal";
 import Button from "./shared/Button";
 import Input from "./shared/Input";
-import { getDefaultSession } from "@inrupt/solid-client-authn-browser";
 import { createContainerAt, getSolidDataset, UrlString } from "@inrupt/solid-client";
 import toast from "react-hot-toast";
+import { getAuthenticatedSession } from "../lib/helpers";
 
 interface NewFolderDialogProps {
   isOpen: boolean;
@@ -53,12 +53,7 @@ export default function NewFolderDialog({
     setIsCreating(true);
 
     try {
-      const session = getDefaultSession();
-      if (!session.info.isLoggedIn) {
-        throw new Error("Not authenticated");
-      }
-
-      const fetchFn = session.fetch || fetch;
+      const { fetch: fetchFn } = getAuthenticatedSession();
 
       // Ensure the current container exists
       await getSolidDataset(currentContainerUrl, { fetch: fetchFn });
diff --git a/app/components/PreviewModal.tsx b/app/components/PreviewModal.tsx
@@ -3,8 +3,8 @@
 import { useState, useEffect, useRef } from "react";
 import Modal from "./shared/Modal";
 import Button from "./shared/Button";
-import { getDefaultSession } from "@inrupt/solid-client-authn-browser";
 import { getFile, UrlString } from "@inrupt/solid-client";
+import { getAuthenticatedSession } from "../lib/helpers";
 import { FileItemData } from "./FileItem";
 import LoadingSpinner from "./shared/LoadingSpinner";
 import { getFileType } from "../lib/helpers";
@@ -56,12 +56,7 @@ export default function PreviewModal({
       setError(null);
 
       try {
-        const session = getDefaultSession();
-        if (!session.info.isLoggedIn) {
-          throw new Error("Not authenticated");
-        }
-
-        const fetchFn = session.fetch || fetch;
+        const { fetch: fetchFn } = getAuthenticatedSession();
         const fileTypeDetected = getFileType(file.url, file.mimeType, file.name);
         setFileType(fileTypeDetected);
 
diff --git a/app/components/ProfileIcon.tsx b/app/components/ProfileIcon.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import { useState, useEffect, useRef } from "react";
-import { getDefaultSession, logout } from "@inrupt/solid-client-authn-browser";
+import { logout } from "@inrupt/solid-client-authn-browser";
+import { getSession } from "../lib/helpers";
 import { useUserProfile, useClickOutside } from "../lib/hooks";
 import { UserCircleIcon, ArrowRightStartOnRectangleIcon, PhoneIcon, BuildingOfficeIcon, BriefcaseIcon, GlobeAltIcon, ClipboardIcon } from "@heroicons/react/24/outline";
 import toast from "react-hot-toast";
@@ -16,7 +17,7 @@ export default function ProfileIcon() {
   const buttonRef = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {
-    const session = getDefaultSession();
+    const session = getSession();
     if (session.info.webId) {
       setWebId(session.info.webId);
     }
diff --git a/app/components/RenameDialog.tsx b/app/components/RenameDialog.tsx
@@ -4,11 +4,10 @@ import { useState, useEffect, useRef } from "react";
 import Modal from "./shared/Modal";
 import Button from "./shared/Button";
 import Input from "./shared/Input";
-import { getDefaultSession } from "@inrupt/solid-client-authn-browser";
 import { UrlString } from "@inrupt/solid-client";
 import toast from "react-hot-toast";
 import { FileItemData } from "./FileItem";
-import { updateMetaFile } from "../lib/helpers/metaFileUtils";
+import { updateMetaFile, getAuthenticatedSession } from "../lib/helpers";
 
 interface RenameDialogProps {
   isOpen: boolean;
@@ -60,12 +59,7 @@ export default function RenameDialog({
     const resourceUrlString = resourceUrl as UrlString;
 
     try {
-      const session = getDefaultSession();
-      if (!session.info.isLoggedIn) {
-        throw new Error("Not authenticated");
-      }
-
-      const fetchFn = session.fetch || fetch;
+      const { fetch: fetchFn } = getAuthenticatedSession();
 
       // Update the .meta file for this resource
       // This is the standard Solid approach for storing metadata about resources
diff --git a/app/lib/helpers/index.ts b/app/lib/helpers/index.ts
@@ -6,4 +6,6 @@ export * from "./urlUtils";
 export * from "./breadcrumbUtils";
 export * from "./fileTypeUtils";
 export * from "./profileUtils";
+export * from "./sessionUtils";
+export * from "./metaFileUtils";
 
diff --git a/app/lib/helpers/profileUtils.ts b/app/lib/helpers/profileUtils.ts
@@ -1,5 +1,5 @@
-import { getDefaultSession } from "@inrupt/solid-client-authn-browser";
 import { Parser, Store, NamedNode } from "n3";
+import { getSession } from "./sessionUtils";
 
 // Cache for parsed profile documents
 const profileCache = new Map<string, { store: Store; baseUrl: string; mainSubject: NamedNode }>();
@@ -17,7 +17,7 @@ export async function fetchAndParseProfile(
     return profileCache.get(webId)!;
   }
 
-  const session = getDefaultSession();
+  const session = getSession();
   const fetchFn = session.fetch || fetch;
 
   // Try different Accept headers to get the profile
diff --git a/app/lib/helpers/sessionUtils.ts b/app/lib/helpers/sessionUtils.ts
@@ -0,0 +1,35 @@
+import { getDefaultSession, Session } from "@inrupt/solid-client-authn-browser";
+
+/**
+ * Gets the current Solid session and optionally validates authentication.
+ * 
+ * @param requireAuth - If true, throws an error if the user is not authenticated. Defaults to true.
+ * @returns An object containing the session and authenticated fetch function.
+ * @throws Error if requireAuth is true and the user is not authenticated.
+ */
+export function getAuthenticatedSession(requireAuth: boolean = true): {
+  session: Session;
+  fetch: typeof fetch;
+} {
+  const session = getDefaultSession();
+  
+  if (requireAuth && !session.info.isLoggedIn) {
+    throw new Error("Not authenticated");
+  }
+  
+  return {
+    session,
+    fetch: session.fetch || fetch,
+  };
+}
+
+/**
+ * Gets the current Solid session without requiring authentication.
+ * Useful for checking session state without throwing errors.
+ * 
+ * @returns The current session.
+ */
+export function getSession(): Session {
+  return getDefaultSession();
+}
+
diff --git a/app/lib/hooks/useBrowseStorage.ts b/app/lib/hooks/useBrowseStorage.ts
@@ -1,7 +1,7 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { getDefaultSession } from "@inrupt/solid-client-authn-browser";
+import { useEffect, useState, useRef } from "react";
+import { getAuthenticatedSession } from "../helpers";
 import {
   getSolidDataset,
   getContainedResourceUrlAll,
@@ -23,6 +23,10 @@ interface UseBrowseStorageResult {
   error: Error | null;
 }
 
+// In-memory cache for container contents
+// Key: normalized URL (with trailing slash), Value: cached files
+const containerCache = new Map<string, FileItemData[]>();
+
 /**
  * Hook to browse/list the contents of a Solid storage container
  * Uses LDP to fetch and parse container contents
@@ -31,36 +35,58 @@ export function useBrowseStorage(containerUrl: string | null, refreshKey?: numbe
   const [files, setFiles] = useState<FileItemData[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
+  const lastUrlRef = useRef<string | null>(null);
+  const lastRefreshKeyRef = useRef<number | undefined>(undefined);
 
   useEffect(() => {
     if (!containerUrl) {
       setFiles([]);
       setIsLoading(false);
+      lastUrlRef.current = null;
+      return;
+    }
+
+    // Normalize URL (ensure trailing slash for consistency)
+    const normalizedUrl = containerUrl.endsWith("/") ? containerUrl : containerUrl + "/";
+    
+    // Check if we should use cached data
+    // Use cache if: no explicit refresh requested and cache exists for this URL
+    const shouldUseCache = 
+      refreshKey === undefined && 
+      containerCache.has(normalizedUrl);
+
+    if (shouldUseCache) {
+      // Use cached data immediately
+      const cachedFiles = containerCache.get(normalizedUrl)!;
+      setFiles(cachedFiles);
+      setIsLoading(false);
+      setError(null);
+      // Update refs to track current URL
+      lastUrlRef.current = normalizedUrl;
+      lastRefreshKeyRef.current = refreshKey;
       return;
     }
 
-    const urlToBrowse = containerUrl;
+    // Update refs
+    lastUrlRef.current = normalizedUrl;
+    lastRefreshKeyRef.current = refreshKey;
 
     async function browseContainer() {
       try {
         setIsLoading(true);
         setError(null);
 
-        const session = getDefaultSession();
-        if (!session.info.isLoggedIn) {
-          throw new Error("Not authenticated");
-        }
+        const { fetch: fetchFn } = getAuthenticatedSession();
 
-        const url = urlToBrowse.endsWith("/") ? urlToBrowse : urlToBrowse + "/";
-        const sessionFetch = session.fetch || fetch;
+        const url = normalizedUrl;
   
         // Create a fetch function that bypasses cache when refreshKey is provided
         const fetchWithCacheBust = refreshKey !== undefined
           ? async (input: RequestInfo | URL, init?: RequestInit) => {
               const urlWithCacheBust = typeof input === 'string' 
                 ? `${input}${input.includes('?') ? '&' : '?'}_t=${Date.now()}`
                 : input;
-              return sessionFetch(urlWithCacheBust, {
+              return fetchFn(urlWithCacheBust, {
                 ...init,
                 cache: 'no-store',
                 headers: {
@@ -69,7 +95,7 @@ export function useBrowseStorage(containerUrl: string | null, refreshKey?: numbe
                 },
               });
             }
-          : sessionFetch;
+          : fetchFn;
 
         // Use @inrupt/solid-client to fetch the container dataset
         const containerDataset = await getSolidDataset(url, {
@@ -170,6 +196,8 @@ export function useBrowseStorage(containerUrl: string | null, refreshKey?: numbe
           url: item.url
         })));
         
+        // Cache the results
+        containerCache.set(normalizedUrl, fileItems);
         setFiles(fileItems);
       } catch (err) {
         const errorMessage =
diff --git a/app/lib/hooks/useSolidStorages.ts b/app/lib/hooks/useSolidStorages.ts
@@ -261,32 +261,13 @@ export function useSolidStorages(): UseSolidStoragesResult {
         // Use shared profile fetching utility (with caching)
         const { store, baseUrl, mainSubject } = await fetchAndParseProfile(webId);
 
-        // Get profile name
-        const getName = (subject: NamedNode): string | null => {
-          const nameQuads = store.getQuads(subject, new NamedNode(FOAF_NAME), null, null);
-          if (nameQuads.length > 0 && nameQuads[0].object instanceof Literal) {
-            return nameQuads[0].object.value;
-          }
-          const vcardQuads = store.getQuads(subject, new NamedNode(VCARD_FN), null, null);
-          if (vcardQuads.length > 0 && vcardQuads[0].object instanceof Literal) {
-            return vcardQuads[0].object.value;
-          }
-          return null;
-        };
-
-        const profileName = getName(mainSubject) || 
-                           webId.split("/").pop()?.split("#")[0] || 
-                           "My Storage";
 
         // Get storage roots using both pim:storage and solid:storage predicates
         const storageUrls: string[] = [];
         
         // Try pim:storage
-        const size = store.size;
-        console.log("Store size:", store.getQuads(null, null, null, null)[0]);
         const pimStorageQuads = store.getQuads(mainSubject, new NamedNode(PIM_STORAGE), null, null);
       
-        console.log("PIM storage quads:", pimStorageQuads);
         pimStorageQuads.forEach(quad => {
           if (quad.object instanceof NamedNode) {
             const resolvedUrl = resolveStorageUrl(quad.object.value, baseUrl);
@@ -372,10 +353,10 @@ export function useSolidStorages(): UseSolidStoragesResult {
         );
 
         // Convert to SolidStorage format
-        const discoveredStorages: SolidStorage[] = validStorageUrls.map((url, index) => {
+        const discoveredStorages: SolidStorage[] = validStorageUrls.map((url) => {
           return {
             id: url,
-            name: index === 0 ? profileName : `${profileName} (${index + 1})`,
+            name: url,
             url: url,
           };
         });
