added local test user access

package.json

@@ -12,14 +12,16 @@
     "@clerk/nextjs": "^5.7.4",
     "mime": "^4.0.4",
     "next": "14.2.15",
-    "pinata": "^1.6.0",
+    "pinata": "^1.7.0",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/uuid": "^10.0.0",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.47",
     "tailwindcss": "^3.4.14",

src/components/main/FileDialog.tsx

@@ -3,6 +3,8 @@ import { ItemType } from '.';
 import mime from 'mime';
 import Image from './Image';
 import Video from './Video';
+import { useUser } from '@clerk/nextjs';
+import { getLocalUserId } from '@/pages';
 
 type FileDialogProps = {
   item: ItemType | null;
@@ -12,6 +14,7 @@ type FileDialogProps = {
 const FileDialog = (props: FileDialogProps) => {
   const { item, setItem } = props;
   const [url, setUrl] = useState("")
+  const { user } = useUser();
 
   useEffect(() => {
     if (item) {
@@ -20,7 +23,13 @@ const FileDialog = (props: FileDialogProps) => {
   }, [item]);
 
   const loadFile = async () => {
-    const res = await fetch(`/api/url?cid=${item?.cid}`)
+    let headers: any = {
+      'Content-Type': 'application/json'
+    }
+    if(!user?.id) {
+      headers.authorization = `Bearer ${getLocalUserId()}`
+    }
+    const res = await fetch(`/api/url?cid=${item?.cid}`, { headers })
     const data = await res.json()
     const url = data.data;
     setUrl(url)

src/components/main/HelpWindow.tsx

@@ -1,3 +1,4 @@
+import { useUser } from '@clerk/nextjs';
 import React, { useState } from 'react';
 
 type HelpWindowProps = {
@@ -9,6 +10,8 @@ const HelpWindow = (props: HelpWindowProps) => {
   const { handleDragStart, style } = props;
   const [windowOpen, setWindowOpen] = useState(true);
 
+  const { user } = useUser();
+
   return (
     <>
       {windowOpen ? (
@@ -29,10 +32,13 @@ const HelpWindow = (props: HelpWindowProps) => {
           <div className="separator"></div>
 
           <div className="window-pane">
+            {!user?.id && 
+              <><p>You are using this machine as a guest user. All file will be deleted every six hours.</p><br /></>
+            }
             <p>To add files, drag them onto the desktop or open a folder and drag
-            them into the folder.</p>
-            <p>Currently, you can only have one level of folders, no nesting.</p>
-            <p>Files and folders are all draggable. Double click to open any item. Right-click for more options.</p>
+            them into the folder.</p><br />
+            <p>Currently, you can only have one level of folders, no nesting.</p><br />
+            <p>Files and folders are all draggable. Double click to open any item. Right-click for more options.</p><br />
             <p>Images and videos can be viewed inline. Everything else will be downloaded.</p>
           </div>
         </div>

src/components/main/index.tsx

@@ -11,6 +11,7 @@ import FileDialog from './FileDialog';
 import { group } from 'console';
 import AboutDialog from './AboutDialog';
 import { useUser } from '@clerk/nextjs';
+import { getLocalUserId } from '@/pages';
 
 export type ItemType = {
   id: string;
@@ -35,6 +36,7 @@ const Desktop = () => {
   const [loader, setLoader] = useState(false);
   const [draggedOverFolderId, setDraggedOverFolderId] = useState<string | null>(null);
   const [aboutDialog, setAboutDialog] = useState(false);
+  const [draggedFileId, setDraggedFileId] = useState("");
 
   const { user } = useUser();
   const fileRef: any = useRef();
@@ -66,14 +68,16 @@ const Desktop = () => {
     }
   };
 
-  const handleDragStart = (event: React.DragEvent, id: number | 'help') => {
+  const handleDragStart = (event: React.DragEvent, id: string | 'help') => {
+    setDraggedFileId(id);
     const { clientX, clientY } = event;
     event.dataTransfer.setData("text/plain", JSON.stringify({ clientX, clientY, id }));
   };
 
   const handleDrop = async (event: any) => {
     event.preventDefault();
     if(folder) {
+      setDraggedFileId("");
       return;
     }
     const files = [];
@@ -88,12 +92,14 @@ const Desktop = () => {
         await handleUpload(files[0])
         loadFiles();
         setLoader(false);
+        setDraggedFileId("");
         return;
     }
 
     if (draggedOverFolderId) {
       // Here you can handle the file upload to this specific folder
-      await handleAddToFolder(files[0], draggedOverFolderId);
+      await handleAddToFolder(draggedFileId, draggedOverFolderId);
+      setDraggedFileId("");
       document.getElementById(draggedOverFolderId)?.classList.remove("bg-[#eee]")
       return;
     }
@@ -174,11 +180,15 @@ const Desktop = () => {
   }
 
   const handleAddToFolder = async (fileId: string, folderId: string) => {
+    let headers: any = {
+      'Content-Type': 'application/json'
+    }
+    if(!user?.id) {
+      headers.authorization = `Bearer ${getLocalUserId()}`
+    }
     await fetch(`/api/groups`, {
       method: "PUT", 
-      headers: {
-        'Content-Type': 'application/json'
-      }, 
+      headers: headers, 
       body: JSON.stringify({
         fileId, 
         folderId
@@ -189,11 +199,15 @@ const Desktop = () => {
   }
 
   const createNewGroup = async () => {
+    let headers: any = {
+      'Content-Type': 'application/json'
+    }
+    if(!user?.id) {
+      headers.authorization = `Bearer ${getLocalUserId()}`
+    }
     await fetch("/api/groups", {
       method: "POST",
-      headers: {
-        'Content-Type': 'application/json'
-      },
+      headers: headers,
       body: JSON.stringify({
         groupName: groupName
       })
@@ -204,15 +218,29 @@ const Desktop = () => {
   };
 
   const deleteFolder = async (id: string) => {
+    let headers: any = {
+      'Content-Type': 'application/json'
+    }
+    if(!user?.id) {
+      headers.authorization = `Bearer ${getLocalUserId()}`
+    }
     await fetch(`/api/groups?groupId=${id}`, {
-      method: "DELETE"
+      method: "DELETE", 
+      headers
     })
     loadGroups()
   }
 
   const deleteFile = async (id: string) => {
+    let headers: any = {
+      'Content-Type': 'application/json'
+    }
+    if(!user?.id) {
+      headers.authorization = `Bearer ${getLocalUserId()}`
+    }
     await fetch(`/api/files/${id}`, {
-      method: "DELETE"
+      method: "DELETE", 
+      headers
     })
 
     if(folder) {
@@ -242,7 +270,13 @@ const Desktop = () => {
   }
 
   const loadGroups = async () => {
-    const groupsRes = await fetch("/api/groups");
+    let headers: any = {
+      'Content-Type': 'application/json'
+    }
+    if(!user?.id) {
+      headers.authorization = `Bearer ${getLocalUserId()}`
+    }
+    const groupsRes = await fetch("/api/groups", { headers });
     const data = await groupsRes.json();
     const groupsToUse = data.data;
 
@@ -264,7 +298,14 @@ const Desktop = () => {
       url = url + `?groupId=${groupId}`
     }
 
-    const filesRes = await fetch(url);
+    let headers: any = {
+      'Content-Type': 'application/json'
+    }
+    if(!user?.id) {
+      headers.authorization = `Bearer ${getLocalUserId()}`
+    }
+
+    const filesRes = await fetch(url, { headers });
     const data = await filesRes.json();
     const filesToUse = data.data;
 
@@ -316,8 +357,15 @@ const Desktop = () => {
 
   const handleUpload = async (fileData: any, groupId?: string) => {
     try {
+      let headers: any = {
+        'Content-Type': 'application/json'
+      }
+      if(!user?.id) {
+        headers.authorization = `Bearer ${getLocalUserId()}`
+      }
       const keyRes = await fetch("/api/files", {
-        method: "POST"
+        method: "POST", 
+        headers 
       })
 
       const keyData = await keyRes.json()
@@ -326,13 +374,15 @@ const Desktop = () => {
       if(groupId) {
         console.log("Uploading to group")
         await pinata.upload.file(fileData).addMetadata({ name: `${user?.id}+${fileData.name}`, keyvalues: {
-          userId: user?.id || ""
+          userId: user?.id || getLocalUserId() || "", 
+          testUser: user?.id ? "false" : "true"
         } }).group(groupId).key(key)
       } else {
         console.log("Not uploading to group")
         console.log(`${user?.id}+${fileData.name}`)
         await pinata.upload.file(fileData).addMetadata({ name: `${user?.id}+${fileData.name}`, keyvalues: {
-          userId: user?.id || ""
+          userId: user?.id || getLocalUserId() || "", 
+          testUser: user?.id ? "false" : "true"
         } }).key(key)
       }
     } catch (error) {
@@ -341,11 +391,15 @@ const Desktop = () => {
   }
 
   const updateFileName = async (file: ItemType, newName: string, groupId?: string) => {
+    let headers: any = {
+      'Content-Type': 'application/json'
+    }
+    if(!user?.id) {
+      headers.authorization = `Bearer ${getLocalUserId()}`
+    }
     await fetch(`/api/files/${file.id}`, {
       method: "PUT", 
-      headers: {
-        'Content-Type': 'application/json'
-      }, 
+      headers: headers, 
       body: JSON.stringify({
         newName: newName
       })

src/components/menu/index.tsx

@@ -1,6 +1,7 @@
-import { useAuth } from '@clerk/nextjs'
+import { useAuth, useUser } from '@clerk/nextjs'
 import React from 'react'
 import { ItemType } from '../main';
+import { LOCAL_TEST_USER } from '@/pages';
 
 type MenuProps = {
   newFolder: Function;
@@ -12,6 +13,16 @@ type MenuProps = {
 const Menu = (props: MenuProps) => {
   const { newFolder, handleSelectFile, folder, arrangeFiles, setAboutDialog } = props;
   const { signOut } = useAuth()
+  const { user } = useUser();
+
+  const signUserOut = () => {
+    if(user?.id) {
+      signOut()
+    } else {
+      localStorage.removeItem(LOCAL_TEST_USER)
+      window.location.reload();
+    }
+  }
   return (
     <ul role="menu-bar">
       <li role="menu-item" tabIndex={0} aria-haspopup="true">
@@ -26,7 +37,7 @@ const Menu = (props: MenuProps) => {
           <li role="menu-item"><a onClick={() => handleSelectFile()} href="#menu">New file {folder && "in folder"}</a></li>
           {!folder && <li role="menu-item"><a onClick={() => newFolder(true)} href="#menu">New folder</a></li>}
           <li role="menu-item" className="divider"></li>
-          <li role="menu-item"><a onClick={() => signOut()} href="#">Sign out</a></li>
+          <li role="menu-item"><a onClick={() => signUserOut()} href="#">Sign out</a></li>
         </ul>
       </li>
       <li role="menu-item" tabIndex={0} aria-haspopup="true">