Merge pull request #19 from solid/feat/my-storages

Feat/my storages

Author: PreciousOritsedere

app/components/AuthWrapper.tsx

@@ -21,10 +21,8 @@ export default function AuthWrapper({ children }: AuthWrapperProps) {
       try {
         setError(null);
 
-        // The library uses this to restore session state from localStorage
-        const redirectInfo = await handleIncomingRedirect({
-          restorePreviousSession: true,
-        });
+        // First, handle any incoming OAuth redirect (processes code and state parameters)
+        await handleIncomingRedirect({ restorePreviousSession: true });
 
         // Get the session instance after handling redirect
         const session = getSession();
@@ -40,8 +38,6 @@ export default function AuthWrapper({ children }: AuthWrapperProps) {
           }
         }
 
-
-
         setIsAuthenticated(isLoggedIn);
       } catch (err) {
         const errorMessage =
@@ -61,9 +57,6 @@ export default function AuthWrapper({ children }: AuthWrapperProps) {
     if (!isAuthenticated && !error) {
       const interval = setInterval(async () => {
         try {
-          const redirectInfo = await handleIncomingRedirect({
-            restorePreviousSession: true,
-          });
           const session = getSession();
           if (session.info.isLoggedIn) {
             setIsAuthenticated(true);

app/components/FileManager.tsx

@@ -228,7 +228,13 @@ export default function FileManager() {
     setShowRenameDialog(true);
   };
 
-  const handleRenamed = () => {
+  const handleRenamed = (newUrl: string) => {
+    
+    if (fileToRename && currentPath === fileToRename.url) {
+      setCurrentPath(newUrl);
+      updateUrl(newUrl);
+    }
+    // Trigger refresh to update file list immediately
     setRefreshKey((prev) => prev + 1);
   };
 

app/components/LoginPage.tsx

@@ -19,10 +19,11 @@ export default function LoginPage() {
   const handleLogin = async () => {
     setIsLoading(true);
     try {
+      const baseUrl = window.location.origin + window.location.pathname;
       await login({
         oidcIssuer: selectedIssuer,
         clientName: "Solid File Manager",
-        redirectUrl: window.location.href,
+        redirectUrl: baseUrl,
       });
     } catch (error) {
       console.error("Login failed:", error);

app/components/MoveDialog.tsx

@@ -9,7 +9,6 @@ import { FileItemData } from "./FileItem";
 import { 
   moveFileResource, 
   getAuthenticatedSession, 
-  getDisplayNameFromMeta,
   decodeResourceNameFromUrl,
   ensureTrailingSlash,
 } from "../lib/helpers";
@@ -58,11 +57,10 @@ export default function MoveDialog({
           if (resourceUrl.endsWith("/")) {
             // It's a folder
             const folderName = decodeResourceNameFromUrl(resourceUrl);
-            const displayName = (await getDisplayNameFromMeta(resourceUrl, fetchFn)) ?? folderName;
 
             folders.push({
               id: resourceUrl,
-              name: displayName,
+              name: folderName,
               type: "folder",
               url: resourceUrl,
             });

app/components/RenameDialog.tsx

@@ -4,16 +4,16 @@ import { useState, useEffect, useRef } from "react";
 import Modal from "./shared/Modal";
 import Button from "./shared/Button";
 import Input from "./shared/Input";
-import { UrlString } from "@inrupt/solid-client";
+import { UrlString, getFile, overwriteFile, deleteFile, createContainerAt } from "@inrupt/solid-client";
 import toast from "react-hot-toast";
 import { FileItemData } from "./FileItem";
-import { updateMetaFile, getAuthenticatedSession, getDisplayNameFromMeta } from "../lib/helpers";
+import { getAuthenticatedSession, sanitizeResourceName, getParentContainerUrl, ensureTrailingSlash, copyFolderContents, deleteFolderResource } from "../lib/helpers";
 
 interface RenameDialogProps {
   isOpen: boolean;
   onClose: () => void;
   file: FileItemData | null;
-  onRenamed?: () => void;
+  onRenamed?: (newUrl: string) => void;
 }
 
 export default function RenameDialog({
@@ -29,32 +29,16 @@ export default function RenameDialog({
 
   useEffect(() => {
     if (isOpen && file) {
-      setIsLoadingName(true);
+      setIsLoadingName(false);
       setIsRenaming(false);
-      
-      // Fetch the .meta file to get the current display name
-      const fetchDisplayName = async () => {
-        try {
-          const { fetch: fetchFn } = getAuthenticatedSession();
-          const metaName = await getDisplayNameFromMeta(file.url, fetchFn);
-          // Use .meta name if available, otherwise fall back to file.name
-          setNewName(metaName || file.name);
-        } catch (error) {
-          // If .meta file doesn't exist or can't be read, use file.name
-          setNewName(file.name);
-        } finally {
-          setIsLoadingName(false);
-          // Focus and select the input text after loading
-          setTimeout(() => {
-            if (inputRef.current) {
-              inputRef.current.focus();
-              inputRef.current.select();
-            }
-          }, 100);
+      setNewName(file.name);
+      // Focus and select the input text
+      setTimeout(() => {
+        if (inputRef.current) {
+          inputRef.current.focus();
+          inputRef.current.select();
         }
-      };
-
-      fetchDisplayName();
+      }, 100);
     }
   }, [isOpen, file]);
 
@@ -71,25 +55,56 @@ export default function RenameDialog({
 
     setIsRenaming(true);
 
-    // Define variables outside try block so they're accessible in catch
-    const sanitizedName = newName.trim();
-    const resourceUrl = file.url.endsWith("/") ? file.url : file.url;
-    const resourceUrlString = resourceUrl as UrlString;
-
     try {
       const { fetch: fetchFn } = getAuthenticatedSession();
+      const sanitizedName = sanitizeResourceName(newName.trim());
+      const parentUrl = getParentContainerUrl(file.url);
+      const parentWithSlash = ensureTrailingSlash(parentUrl);
+      const encodedName = encodeURIComponent(sanitizedName);
+      const isContainer = file.url.endsWith("/");
+      const newUrl = isContainer ? `${parentWithSlash}${encodedName}/` : `${parentWithSlash}${encodedName}`;
+
+      // Check if target already exists
+      try {
+        const response = await fetchFn(newUrl, { method: "HEAD" });
+        if (response.status !== 404) {
+          toast.error(`A resource with the name "${sanitizedName}" already exists`);
+          setIsRenaming(false);
+          return;
+        }
+      } catch {
+        // Continue if check fails
+      }
 
-      // Update the .meta file for this resource
-      // This is the standard Solid approach for storing metadata about resources
-      await updateMetaFile(resourceUrlString, sanitizedName, fetchFn);
+      if (isContainer) {
+        // For folders: create new container, copy contents recursively, delete old
+        await createContainerAt(newUrl as UrlString, { fetch: fetchFn });
+        
+        await copyFolderContents(file.url, newUrl, fetchFn);
+        
+        await deleteFolderResource(file.url, fetchFn);
+      } else {
+        // For files: fetch, create at new URL, delete old
+        const fileBlob = await getFile(file.url as UrlString, { fetch: fetchFn });
+        const contentType = fileBlob.type || "application/octet-stream";
+        
+        await overwriteFile(newUrl as UrlString, fileBlob, {
+          fetch: fetchFn,
+          contentType,
+        });
+        
+        await deleteFile(file.url as UrlString, { fetch: fetchFn });
+      }
 
       toast.success(`Renamed to "${sanitizedName}"`);
-      onClose();
 
       // Notify parent to refresh
       if (onRenamed) {
-        onRenamed();
+        onRenamed(newUrl);
       }
+      
+      // Close modal
+      onClose();
     } catch (error) {
       console.error("Failed to rename:", error);
       toast.error(

app/components/shared/Button.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { ButtonHTMLAttributes, ReactNode, forwardRef } from "react";
+import LoadingSpinner from "./LoadingSpinner";
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: "primary" | "secondary" | "ghost" | "icon";
@@ -46,10 +47,10 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button({
       {...props}
     >
       {isLoading ? (
-        <>
-          <span className="sr-only">Loading</span>
-          <span aria-hidden="true">{children}</span>
-        </>
+        <span className="flex items-center justify-center gap-2">
+          <LoadingSpinner size="sm" className="m-0" />
+          <span>{children}</span>
+        </span>
       ) : (
         children
       )}

app/components/shared/Input.tsx

@@ -33,7 +33,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
   const paddingRight = rightIcon ? "pr-9" : "pr-3";
 
   return (
-    <div className="w-full">
+    <section className="w-full">
       {label && (
         <label
           htmlFor={inputId}
@@ -80,7 +80,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
           {helperText}
         </p>
       )}
-    </div>
+    </section>
   );
 });
 

app/lib/helpers/copyUtils.ts

@@ -7,7 +7,6 @@ import {
   deleteFile,
   UrlString,
 } from "@inrupt/solid-client";
-import { getDisplayNameFromMeta, updateMetaFile } from "./metaFileUtils";
 
 const INVALID_NAME_CHARS = /[<>:"/\\|?*]/g;
 
@@ -52,9 +51,10 @@ export const getParentContainerUrl = (resourceUrl: string): string => {
 };
 
 const shouldSkipResourceCopy = (resourceUrl: string): boolean => {
-  return resourceUrl.endsWith(".meta") || resourceUrl.endsWith(".acl");
+  return resourceUrl.endsWith(".acl");
 };
 
+
 const resourceExists = async (url: string, fetchFn: typeof fetch): Promise<boolean> => {
   try {
     const response = await fetchFn(url, { method: "HEAD" });
@@ -64,7 +64,7 @@ const resourceExists = async (url: string, fetchFn: typeof fetch): Promise<boole
     if (response.status >= 200 && response.status < 300) {
       return true;
     }
-    // For other statuses (401, 403, 405, etc.) assume the resource exists to avoid collisions
+
     return true;
   } catch {
     return false;
@@ -108,10 +108,9 @@ const copyFileFromSource = async (
     fetch: fetchFn,
     contentType,
   });
-  await updateMetaFile(targetUrl as UrlString, displayName, fetchFn);
 };
 
-const copyFolderContents = async (
+export const copyFolderContents = async (
   sourceFolderUrl: string,
   destinationFolderUrl: string,
   fetchFn: typeof fetch
@@ -130,18 +129,13 @@ const copyFolderContents = async (
       const childDestination = `${ensureTrailingSlash(destinationFolderUrl)}${encodedChildName}/`;
 
       await createContainerAt(childDestination as UrlString, { fetch: fetchFn });
-      const childDisplayName =
-        (await getDisplayNameFromMeta(resourceUrl, fetchFn)) ?? childName;
-      await updateMetaFile(childDestination as UrlString, childDisplayName, fetchFn);
-
       await copyFolderContents(resourceUrl, childDestination, fetchFn);
+   
     } else {
       const childName = decodeResourceNameFromUrl(resourceUrl);
       const encodedChildName = encodeURIComponent(childName);
       const childDestination = `${ensureTrailingSlash(destinationFolderUrl)}${encodedChildName}`;
-      const childDisplayName =
-        (await getDisplayNameFromMeta(resourceUrl, fetchFn)) ?? childName;
-      await copyFileFromSource(resourceUrl, childDestination, childDisplayName, fetchFn);
+      await copyFileFromSource(resourceUrl, childDestination, childName, fetchFn);
     }
   }
 };
@@ -150,31 +144,25 @@ export const copyFileResource = async (
   file: { url: string; name?: string; mimeType?: string },
   fetchFn: typeof fetch
 ): Promise<void> => {
-  const originalLabel =
-    (await getDisplayNameFromMeta(file.url, fetchFn)) ??
-    file.name ??
-    decodeResourceNameFromUrl(file.url);
+  const originalLabel = file.name ?? decodeResourceNameFromUrl(file.url);
   const parentUrl = getParentContainerUrl(file.url);
   const desiredName = `Copy of ${originalLabel}`;
-  const { targetUrl, displayName } = await generateCopyTarget(parentUrl, desiredName, false, fetchFn);
-  await copyFileFromSource(file.url, targetUrl, displayName, fetchFn, file.mimeType);
+  const { targetUrl } = await generateCopyTarget(parentUrl, desiredName, false, fetchFn);
+  await copyFileFromSource(file.url, targetUrl, desiredName, fetchFn, file.mimeType);
 };
 
 export const copyFolderResource = async (
   folder: { url: string; name?: string },
   fetchFn: typeof fetch
 ): Promise<void> => {
-  const originalLabel =
-    (await getDisplayNameFromMeta(folder.url, fetchFn)) ??
-    folder.name ??
-    decodeResourceNameFromUrl(folder.url);
+  const originalLabel = folder.name ?? decodeResourceNameFromUrl(folder.url);
   const parentUrl = getParentContainerUrl(folder.url);
   const desiredName = `Copy of ${originalLabel}`;
-  const { targetUrl, displayName } = await generateCopyTarget(parentUrl, desiredName, true, fetchFn);
+  const { targetUrl } = await generateCopyTarget(parentUrl, desiredName, true, fetchFn);
 
   await createContainerAt(targetUrl as UrlString, { fetch: fetchFn });
-  await updateMetaFile(targetUrl as UrlString, displayName, fetchFn);
   await copyFolderContents(folder.url, targetUrl, fetchFn);
+
 };
 
 /**
@@ -187,10 +175,7 @@ export const moveFileResource = async (
   fetchFn: typeof fetch
 ): Promise<void> => {
   // Get the original display name
-  const originalLabel =
-    (await getDisplayNameFromMeta(file.url, fetchFn)) ??
-    file.name ??
-    decodeResourceNameFromUrl(file.url);
+  const originalLabel = file.name ?? decodeResourceNameFromUrl(file.url);
 
   // Generate target URL in the destination folder
   const destinationWithSlash = ensureTrailingSlash(destinationFolderUrl);
@@ -214,18 +199,7 @@ export const moveFileResource = async (
     contentType,
   });
 
-  // Step 3: Update .meta file with display name
-  await updateMetaFile(targetUrl as UrlString, originalLabel, fetchFn);
-  
-  // Step 4: Delete the old file
+  // Step 3: Delete the old file
   await deleteFile(file.url as UrlString, { fetch: fetchFn });
-  
-  // Also delete the old .meta file if it exists
-  try {
-    const oldMetaUrl = `${file.url}.meta` as UrlString;
-    await deleteFile(oldMetaUrl, { fetch: fetchFn });
-  } catch (error) {
-    // Ignore if .meta file doesn't exist
-  }
 };