From 2ba4afa361baf0a247c3e87583b160b2d84e1463 Mon Sep 17 00:00:00 2001
From: Liam Stamper <136619788+liamstamper@users.noreply.github.com>
Date: Mon, 7 Oct 2024 23:25:01 -0500
Subject: [PATCH 01/25] m


From 0b92d729d8300ccf04e9598b5f70a05125cc9337 Mon Sep 17 00:00:00 2001
From: Liam Stamper <136619788+liamstamper@users.noreply.github.com>
Date: Tue, 8 Oct 2024 00:09:15 -0500
Subject: [PATCH 02/25] new sidebar sections

---
 client/src/components/home/sections/Home.tsx  | 73 +++++++++++++++++++
 .../src/components/home/sections/MyFiles.tsx  | 15 ++++
 .../src/components/home/sections/Shared.tsx   | 15 ++++
 .../src/components/home/sections/Starred.tsx  | 11 +++
 client/src/components/home/sections/Trash.tsx | 13 ++++
 5 files changed, 127 insertions(+)
 create mode 100644 client/src/components/home/sections/Home.tsx
 create mode 100644 client/src/components/home/sections/MyFiles.tsx
 create mode 100644 client/src/components/home/sections/Shared.tsx
 create mode 100644 client/src/components/home/sections/Starred.tsx
 create mode 100644 client/src/components/home/sections/Trash.tsx

diff --git a/client/src/components/home/sections/Home.tsx b/client/src/components/home/sections/Home.tsx
new file mode 100644
index 0000000..e6f91e1
--- /dev/null
+++ b/client/src/components/home/sections/Home.tsx
@@ -0,0 +1,73 @@
+import React, { FC, useState, useEffect } from "react";
+import LoadingIndicator from "../../../components/home/LoadingIndicator";
+import ErrorDisplay from "../../../components/home/ErrorDisplay";
+import SuggestedFilesGrid from "../../../components/home/SuggestedFilesGrid";
+import RecentFilesGrid from "../../../components/home/RecentFileGrid";
+import RecentFilesTable from "../../../components/home/RecentFilesTable";
+import ButtonGroup from "../../../components/home/ButtonGroup";
+import { getFilesFromAPI } from "../../../data/apiService";
+
+interface File {
+  name: string;
+  created: string;
+  modified: string;
+  imagepath: string;
+  mime: string;
+}
+
+interface APIResponse {
+  files: File[];
+}
+
+const Home: FC = () => {
+  const [files, setFiles] = useState<File[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [view, setView] = useState<number>(2);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const result: APIResponse = await getFilesFromAPI();
+        setFiles(result.files);
+        setLoading(false);
+      } catch (error) {
+        setError("Failed to fetch data");
+        setLoading(false);
+      }
+    };
+    fetchData();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="flex justify-center items-center h-screen bg-gray-50 dark:bg-gray-900">
+        <LoadingIndicator />
+      </div>
+    );
+  }
+
+  if (error) {
+    return <ErrorDisplay errorMessage={error} />;
+  }
+
+  return (
+    <div>
+      <section className="px-6">
+        <h2 className="text-xl font-bold mt-6 mb-4 dark:text-white">For you</h2>
+        <SuggestedFilesGrid files={files} />
+      </section>
+      <section className="px-6">
+        <div className="mb-4 flex justify-between items-center">
+          <h2 className="text-xl font-bold dark:text-white">Recent</h2>
+          <div>
+            <ButtonGroup activeView={view} onChangeView={setView} />
+          </div>
+        </div>
+        {view === 1 ? <RecentFilesGrid files={files} /> : <RecentFilesTable files={files} />}
+      </section>
+    </div>
+  );
+};
+
+export default Home;
diff --git a/client/src/components/home/sections/MyFiles.tsx b/client/src/components/home/sections/MyFiles.tsx
new file mode 100644
index 0000000..969bdf4
--- /dev/null
+++ b/client/src/components/home/sections/MyFiles.tsx
@@ -0,0 +1,15 @@
+import React, { FC } from "react";
+
+const MyFilesSection: FC = () => {
+  return (
+    <div>
+      <div className="px-6">
+        <h2 className="text-xl font-bold mt-6 mb-4 dark:text-white">
+          My Files
+        </h2>
+      </div>
+    </div>
+  );
+};
+
+export default MyFilesSection;
diff --git a/client/src/components/home/sections/Shared.tsx b/client/src/components/home/sections/Shared.tsx
new file mode 100644
index 0000000..25f0ad4
--- /dev/null
+++ b/client/src/components/home/sections/Shared.tsx
@@ -0,0 +1,15 @@
+import React, { FC } from "react";
+
+const SharedSection: FC = () => {
+  return (
+    <div>
+      <div className="px-6">
+        <h2 className="text-xl font-bold mt-6 mb-4 dark:text-white">
+          Shared With Me
+        </h2>
+      </div>
+    </div>
+  );
+};
+
+export default SharedSection;
diff --git a/client/src/components/home/sections/Starred.tsx b/client/src/components/home/sections/Starred.tsx
new file mode 100644
index 0000000..96473be
--- /dev/null
+++ b/client/src/components/home/sections/Starred.tsx
@@ -0,0 +1,11 @@
+const Starred: React.FC = () => {
+  return (
+    <div>
+      <div className="px-6">
+        <h2 className="text-xl font-bold mt-6 mb-4 dark:text-white">Starred</h2>
+      </div>
+    </div>
+  );
+};
+
+export default Starred;
diff --git a/client/src/components/home/sections/Trash.tsx b/client/src/components/home/sections/Trash.tsx
new file mode 100644
index 0000000..74280ce
--- /dev/null
+++ b/client/src/components/home/sections/Trash.tsx
@@ -0,0 +1,13 @@
+import React, { FC } from 'react';
+
+const Trash: FC = () => {
+  return (
+    <div>
+       <div className="px-6">
+       <h2 className="text-xl font-bold mt-6 mb-4 dark:text-white">Trash</h2>
+       </div>
+    </div>
+  );
+};
+
+export default Trash;

From a58e24ce44a8b179be3bcbb7670c1d1d0e284f9b Mon Sep 17 00:00:00 2001
From: Liam Stamper <136619788+liamstamper@users.noreply.github.com>
Date: Tue, 8 Oct 2024 00:09:42 -0500
Subject: [PATCH 03/25] refactored to handle section logic in homepage

---
 client/src/components/home/Sidebar.tsx |  14 ++--
 client/src/pages/HomePage.tsx          | 101 ++++++++-----------------
 2 files changed, 39 insertions(+), 76 deletions(-)

diff --git a/client/src/components/home/Sidebar.tsx b/client/src/components/home/Sidebar.tsx
index ffe55b3..002ee93 100644
--- a/client/src/components/home/Sidebar.tsx
+++ b/client/src/components/home/Sidebar.tsx
@@ -1,11 +1,16 @@
-import React, { FC, useState } from "react";
+import React, { FC } from "react";
 
 interface Icon {
   icon: string;
   id: string;
 }
 
-const Sidebar: FC = () => {
+interface SidebarProps {
+  openSection: string;  // The currently open section
+  setOpenSection: (section: string) => void;  // Function to change the open section
+}
+
+const Sidebar: FC<SidebarProps> = ({ openSection, setOpenSection }) => {
   const icons: Icon[] = [
     { icon: "home", id: "home" },
     { icon: "folder", id: "myfiles" },
@@ -14,8 +19,7 @@ const Sidebar: FC = () => {
     { icon: "delete", id: "trash" },
   ];
 
-  const [open, setOpen] = useState<string>("home");
-  const isActive = (id: string): boolean => id === open;
+  const isActive = (id: string): boolean => id === openSection;
 
   return (
     <div className="h-screen w-16 bg-gray-100 dark:bg-gray-900 flex flex-col items-center py-4 space-y-4">
@@ -27,7 +31,7 @@ const Sidebar: FC = () => {
         {icons.map((icon: Icon) => (
           <i
             key={icon.id}
-            onClick={() => setOpen(icon.id)}
+            onClick={() => setOpenSection(icon.id)}  // Update the open section on click
             className={`material-icons cursor-pointer ${
               isActive(icon.id)
                 ? "text-blue-500"
diff --git a/client/src/pages/HomePage.tsx b/client/src/pages/HomePage.tsx
index a320151..af93179 100644
--- a/client/src/pages/HomePage.tsx
+++ b/client/src/pages/HomePage.tsx
@@ -1,88 +1,47 @@
-import React, { FC, useEffect, useState } from "react";
+import React, { FC, useState } from "react";
 import BreadCrumb from "../components/home/BreadCrumb";
 import Header from "../components/home/Header";
 import Sidebar from "../components/home/Sidebar";
-import ButtonGroup from "../components/home/ButtonGroup";
-import LoadingIndicator from "../components/home/LoadingIndicator";
-import SuggestedFilesGrid from "../components/home/SuggestedFilesGrid";
-import RecentFilesTable from "../components/home/RecentFilesTable";
-import ErrorDisplay from "../components/home/ErrorDisplay";
-import { getFilesFromAPI } from "../data/apiService";
-import RecentFilesGrid from "../components/home/RecentFileGrid";
-
-interface File {
-  name: string;
-  created: string;
-  modified: string;
-  imagepath: string;
-  mime: string;
-}
-
-interface APIResponse {
-  files: File[];
-}
+import Home from "../components/home/sections/Home"; 
+import Starred from "../components/home/sections/Starred";
+import Shared from "../components/home/sections/Shared";
+import Trash from "../components/home/sections/Trash";
+import MyFiles from "../components/home/sections/MyFiles";
 
 const HomePage: FC = () => {
-  const [files, setFiles] = useState<File[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  const [view, setView] = useState<number>(2);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const result = await getFilesFromAPI();
-        setFiles(result.files);
-        setLoading(false);
-      } catch (error) {
-        setError("Failed to fetch data");
-        setLoading(false);
-      }
-    };
-    fetchData();
-  }, []);
-
-  if (loading) {
-    return (
-      <div className="flex justify-center items-center h-screen bg-gray-50 dark:bg-gray-900">
-        <LoadingIndicator />
-      </div>
-    );
-  }
-
-  if (error) {
-    return <ErrorDisplay errorMessage={error} />;
-  }
+  // Manage the current open section
+  const [openSection, setOpenSection] = useState<string>("home");
+
+  // Function to render the correct section based on the current open section
+  const renderSection = () => {
+    switch (openSection) {
+      case "home":
+        return <Home />;
+      case "myfiles":
+        return <MyFiles />;
+      case "shared":
+        return <Shared />;
+      case "starred":
+        return <Starred />;
+      case "trash":
+        return <Trash />;
+      default:
+        return <Home />;
+    }
+  };
 
   return (
     <div className="min-h-screen bg-gray-50 h-full dark:bg-gray-900 flex flex-col">
       <Header />
       <div className="flex flex-1">
-        <Sidebar />
+        {/* Pass the setOpenSection function to Sidebar */}
+        <Sidebar openSection={openSection} setOpenSection={setOpenSection} />
         <div className="flex-1 p-4">
           <div className="p-2 pl-6 items-end">
             <BreadCrumb />
           </div>
-          <section className="px-6">
-            <h2 className="text-xl font-bold mt-6 mb-4 dark:text-white">
-              For you
-            </h2>
-            <SuggestedFilesGrid files={files} />
-          </section>
-          <section className="px-6">
-            <div className="mb-4 flex justify-between items-center">
-              <h2 className="text-xl font-bold dark:text-white">Recent</h2>
-              <div>
-                <ButtonGroup activeView={view} onChangeView={setView} />
-              </div>
-            </div>
-            {view === 1 ? (
-              <RecentFilesGrid files={files} />
-            ) : (
-              <RecentFilesTable files={files} />
-            )}
-          </section>
+          {/* Render the current section */}
+          {renderSection()}
         </div>
       </div>
     </div>

From 98e968abe2996a347a585d27dcacc5fe04f1d3c2 Mon Sep 17 00:00:00 2001
From: Liam Stamper <136619788+liamstamper@users.noreply.github.com>
Date: Tue, 8 Oct 2024 00:09:57 -0500
Subject: [PATCH 04/25] idk

---
 client/package-lock.json | 142 +++++++++++++++++++--------------------
 1 file changed, 71 insertions(+), 71 deletions(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index fe3d4d1..e603185 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -1070,9 +1070,9 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.3.tgz",
-      "integrity": "sha512-MmKSfaB9GX+zXl6E8z4koOr/xU63AMVleLEa64v7R0QF/ZloMs5vcD1sHgM64GXXS1csaJutG+ddtzcueI/BLg==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.0.tgz",
+      "integrity": "sha512-Q6HJd7Y6xdB48x8ZNVDOqsbh2uByBhgK8PiQgPhwkIw/HC/YX5Ghq2mQY5sRMZWHb3VsFkWooUVOZHKr7DmDIA==",
       "cpu": [
         "arm"
       ],
@@ -1084,9 +1084,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.21.3.tgz",
-      "integrity": "sha512-zrt8ecH07PE3sB4jPOggweBjJMzI1JG5xI2DIsUbkA+7K+Gkjys6eV7i9pOenNSDJH3eOr/jLb/PzqtmdwDq5g==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.24.0.tgz",
+      "integrity": "sha512-ijLnS1qFId8xhKjT81uBHuuJp2lU4x2yxa4ctFPtG+MqEE6+C5f/+X/bStmxapgmwLwiL3ih122xv8kVARNAZA==",
       "cpu": [
         "arm64"
       ],
@@ -1098,9 +1098,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.21.3.tgz",
-      "integrity": "sha512-P0UxIOrKNBFTQaXTxOH4RxuEBVCgEA5UTNV6Yz7z9QHnUJ7eLX9reOd/NYMO3+XZO2cco19mXTxDMXxit4R/eQ==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.24.0.tgz",
+      "integrity": "sha512-bIv+X9xeSs1XCk6DVvkO+S/z8/2AMt/2lMqdQbMrmVpgFvXlmde9mLcbQpztXm1tajC3raFDqegsH18HQPMYtA==",
       "cpu": [
         "arm64"
       ],
@@ -1112,9 +1112,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.21.3.tgz",
-      "integrity": "sha512-L1M0vKGO5ASKntqtsFEjTq/fD91vAqnzeaF6sfNAy55aD+Hi2pBI5DKwCO+UNDQHWsDViJLqshxOahXyLSh3EA==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.24.0.tgz",
+      "integrity": "sha512-X6/nOwoFN7RT2svEQWUsW/5C/fYMBe4fnLK9DQk4SX4mgVBiTA9h64kjUYPvGQ0F/9xwJ5U5UfTbl6BEjaQdBQ==",
       "cpu": [
         "x64"
       ],
@@ -1126,9 +1126,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.21.3.tgz",
-      "integrity": "sha512-btVgIsCjuYFKUjopPoWiDqmoUXQDiW2A4C3Mtmp5vACm7/GnyuprqIDPNczeyR5W8rTXEbkmrJux7cJmD99D2g==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.24.0.tgz",
+      "integrity": "sha512-0KXvIJQMOImLCVCz9uvvdPgfyWo93aHHp8ui3FrtOP57svqrF/roSSR5pjqL2hcMp0ljeGlU4q9o/rQaAQ3AYA==",
       "cpu": [
         "arm"
       ],
@@ -1140,9 +1140,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.21.3.tgz",
-      "integrity": "sha512-zmjbSphplZlau6ZTkxd3+NMtE4UKVy7U4aVFMmHcgO5CUbw17ZP6QCgyxhzGaU/wFFdTfiojjbLG3/0p9HhAqA==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.24.0.tgz",
+      "integrity": "sha512-it2BW6kKFVh8xk/BnHfakEeoLPv8STIISekpoF+nBgWM4d55CZKc7T4Dx1pEbTnYm/xEKMgy1MNtYuoA8RFIWw==",
       "cpu": [
         "arm"
       ],
@@ -1154,9 +1154,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.21.3.tgz",
-      "integrity": "sha512-nSZfcZtAnQPRZmUkUQwZq2OjQciR6tEoJaZVFvLHsj0MF6QhNMg0fQ6mUOsiCUpTqxTx0/O6gX0V/nYc7LrgPw==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.24.0.tgz",
+      "integrity": "sha512-i0xTLXjqap2eRfulFVlSnM5dEbTVque/3Pi4g2y7cxrs7+a9De42z4XxKLYJ7+OhE3IgxvfQM7vQc43bwTgPwA==",
       "cpu": [
         "arm64"
       ],
@@ -1168,9 +1168,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.21.3.tgz",
-      "integrity": "sha512-MnvSPGO8KJXIMGlQDYfvYS3IosFN2rKsvxRpPO2l2cum+Z3exiExLwVU+GExL96pn8IP+GdH8Tz70EpBhO0sIQ==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.24.0.tgz",
+      "integrity": "sha512-9E6MKUJhDuDh604Qco5yP/3qn3y7SLXYuiC0Rpr89aMScS2UAmK1wHP2b7KAa1nSjWJc/f/Lc0Wl1L47qjiyQw==",
       "cpu": [
         "arm64"
       ],
@@ -1182,9 +1182,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.21.3.tgz",
-      "integrity": "sha512-+W+p/9QNDr2vE2AXU0qIy0qQE75E8RTwTwgqS2G5CRQ11vzq0tbnfBd6brWhS9bCRjAjepJe2fvvkvS3dno+iw==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.24.0.tgz",
+      "integrity": "sha512-2XFFPJ2XMEiF5Zi2EBf4h73oR1V/lycirxZxHZNc93SqDN/IWhYYSYj8I9381ikUFXZrz2v7r2tOVk2NBwxrWw==",
       "cpu": [
         "ppc64"
       ],
@@ -1196,9 +1196,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.21.3.tgz",
-      "integrity": "sha512-yXH6K6KfqGXaxHrtr+Uoy+JpNlUlI46BKVyonGiaD74ravdnF9BUNC+vV+SIuB96hUMGShhKV693rF9QDfO6nQ==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.24.0.tgz",
+      "integrity": "sha512-M3Dg4hlwuntUCdzU7KjYqbbd+BLq3JMAOhCKdBE3TcMGMZbKkDdJ5ivNdehOssMCIokNHFOsv7DO4rlEOfyKpg==",
       "cpu": [
         "riscv64"
       ],
@@ -1210,9 +1210,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.21.3.tgz",
-      "integrity": "sha512-R8cwY9wcnApN/KDYWTH4gV/ypvy9yZUHlbJvfaiXSB48JO3KpwSpjOGqO4jnGkLDSk1hgjYkTbTt6Q7uvPf8eg==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.24.0.tgz",
+      "integrity": "sha512-mjBaoo4ocxJppTorZVKWFpy1bfFj9FeCMJqzlMQGjpNPY9JwQi7OuS1axzNIk0nMX6jSgy6ZURDZ2w0QW6D56g==",
       "cpu": [
         "s390x"
       ],
@@ -1224,9 +1224,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.21.3.tgz",
-      "integrity": "sha512-kZPbX/NOPh0vhS5sI+dR8L1bU2cSO9FgxwM8r7wHzGydzfSjLRCFAT87GR5U9scj2rhzN3JPYVC7NoBbl4FZ0g==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.24.0.tgz",
+      "integrity": "sha512-ZXFk7M72R0YYFN5q13niV0B7G8/5dcQ9JDp8keJSfr3GoZeXEoMHP/HlvqROA3OMbMdfr19IjCeNAnPUG93b6A==",
       "cpu": [
         "x64"
       ],
@@ -1238,9 +1238,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.21.3.tgz",
-      "integrity": "sha512-S0Yq+xA1VEH66uiMNhijsWAafffydd2X5b77eLHfRmfLsRSpbiAWiRHV6DEpz6aOToPsgid7TI9rGd6zB1rhbg==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.24.0.tgz",
+      "integrity": "sha512-w1i+L7kAXZNdYl+vFvzSZy8Y1arS7vMgIy8wusXJzRrPyof5LAb02KGr1PD2EkRcl73kHulIID0M501lN+vobQ==",
       "cpu": [
         "x64"
       ],
@@ -1252,9 +1252,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.21.3.tgz",
-      "integrity": "sha512-9isNzeL34yquCPyerog+IMCNxKR8XYmGd0tHSV+OVx0TmE0aJOo9uw4fZfUuk2qxobP5sug6vNdZR6u7Mw7Q+Q==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.24.0.tgz",
+      "integrity": "sha512-VXBrnPWgBpVDCVY6XF3LEW0pOU51KbaHhccHw6AS6vBWIC60eqsH19DAeeObl+g8nKAz04QFdl/Cefta0xQtUQ==",
       "cpu": [
         "arm64"
       ],
@@ -1266,9 +1266,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.21.3.tgz",
-      "integrity": "sha512-nMIdKnfZfzn1Vsk+RuOvl43ONTZXoAPUUxgcU0tXooqg4YrAqzfKzVenqqk2g5efWh46/D28cKFrOzDSW28gTA==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.24.0.tgz",
+      "integrity": "sha512-xrNcGDU0OxVcPTH/8n/ShH4UevZxKIO6HJFK0e15XItZP2UcaiLFd5kiX7hJnqCbSztUF8Qot+JWBC/QXRPYWQ==",
       "cpu": [
         "ia32"
       ],
@@ -1280,9 +1280,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.21.3.tgz",
-      "integrity": "sha512-fOvu7PCQjAj4eWDEuD8Xz5gpzFqXzGlxHZozHP4b9Jxv9APtdxL6STqztDzMLuRXEc4UpXGGhx029Xgm91QBeA==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.24.0.tgz",
+      "integrity": "sha512-fbMkAF7fufku0N2dE5TBXcNlg0pt0cJue4xBRE2Qc5Vqikxr4VCgKj/ht6SMdFcOacVA9rqF70APJ8RN/4vMJw==",
       "cpu": [
         "x64"
       ],
@@ -1339,9 +1339,9 @@
       }
     },
     "node_modules/@types/estree": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
+      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
       "dev": true,
       "license": "MIT"
     },
@@ -4583,13 +4583,13 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.21.3.tgz",
-      "integrity": "sha512-7sqRtBNnEbcBtMeRVc6VRsJMmpI+JU1z9VTvW8D4gXIYQFz0aLcsE6rRkyghZkLfEgUZgVvOG7A5CVz/VW5GIA==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.24.0.tgz",
+      "integrity": "sha512-DOmrlGSXNk1DM0ljiQA+i+o0rSLhtii1je5wgk60j49d1jHT5YYttBv1iWOnYSTG+fZZESUOSNiAl89SIet+Cg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@types/estree": "1.0.5"
+        "@types/estree": "1.0.6"
       },
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -4599,22 +4599,22 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.21.3",
-        "@rollup/rollup-android-arm64": "4.21.3",
-        "@rollup/rollup-darwin-arm64": "4.21.3",
-        "@rollup/rollup-darwin-x64": "4.21.3",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.21.3",
-        "@rollup/rollup-linux-arm-musleabihf": "4.21.3",
-        "@rollup/rollup-linux-arm64-gnu": "4.21.3",
-        "@rollup/rollup-linux-arm64-musl": "4.21.3",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.21.3",
-        "@rollup/rollup-linux-riscv64-gnu": "4.21.3",
-        "@rollup/rollup-linux-s390x-gnu": "4.21.3",
-        "@rollup/rollup-linux-x64-gnu": "4.21.3",
-        "@rollup/rollup-linux-x64-musl": "4.21.3",
-        "@rollup/rollup-win32-arm64-msvc": "4.21.3",
-        "@rollup/rollup-win32-ia32-msvc": "4.21.3",
-        "@rollup/rollup-win32-x64-msvc": "4.21.3",
+        "@rollup/rollup-android-arm-eabi": "4.24.0",
+        "@rollup/rollup-android-arm64": "4.24.0",
+        "@rollup/rollup-darwin-arm64": "4.24.0",
+        "@rollup/rollup-darwin-x64": "4.24.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.24.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.24.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.24.0",
+        "@rollup/rollup-linux-arm64-musl": "4.24.0",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.24.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.24.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.24.0",
+        "@rollup/rollup-linux-x64-gnu": "4.24.0",
+        "@rollup/rollup-linux-x64-musl": "4.24.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.24.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.24.0",
+        "@rollup/rollup-win32-x64-msvc": "4.24.0",
         "fsevents": "~2.3.2"
       }
     },

From 9e0337bcaca86cdf689c7647dd8efadf65fa4e33 Mon Sep 17 00:00:00 2001
From: Liam Stamper <136619788+liamstamper@users.noreply.github.com>
Date: Tue, 8 Oct 2024 19:39:11 -0500
Subject: [PATCH 05/25] image styles updated

---
 client/src/components/home/RecentFilesTable.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/client/src/components/home/RecentFilesTable.tsx b/client/src/components/home/RecentFilesTable.tsx
index a3519a1..879e0ec 100644
--- a/client/src/components/home/RecentFilesTable.tsx
+++ b/client/src/components/home/RecentFilesTable.tsx
@@ -63,11 +63,7 @@ const RecentFilesTable: React.FC<RecentFilesTableProps> = ({ files }) => {
               className="border-b border-gray-300 dark:border-gray-700"
             >
               <td className="p-3 dark:text-gray-300 flex items-center">
-                <img
-                  className="h-4 w-4 rounded-md bg-white mr-2"
-                  src={file.imagepath || "/images/placeholder.png"}
-                  alt={file.name}
-                />
+              <img src = {file.imagepath || "/images/placeholder.png"} className="p-3 bg-white rounded-md ml-2 mr-2 my-1 h-4 w-4"></img>
                 {removeFileExtension(file.name)}
               </td>
               <td className="p-3 dark:text-gray-300">
@@ -76,7 +72,7 @@ const RecentFilesTable: React.FC<RecentFilesTableProps> = ({ files }) => {
               <td className="p-3 dark:text-gray-300">
                 {formatFileSize(file.size)}
               </td>
-              <td className="p-3 text-right dark:text-gray-300"> {/* Aligning the Context Menu to the right */}
+              <td className="p-3 text-right dark:text-gray-300">
                 <ContextMenu
                   fileName={file.name}
                   open="Open"

From b41b96ff12d52e8b483fe693016706e937a9ee0a Mon Sep 17 00:00:00 2001
From: Liam Stamper <136619788+liamstamper@users.noreply.github.com>
Date: Tue, 8 Oct 2024 20:04:37 -0500
Subject: [PATCH 06/25] added axios

---
 client/package-lock.json | 100 +++++++++++++++++++++++++++++++++++++++
 client/package.json      |   1 +
 2 files changed, 101 insertions(+)

diff --git a/client/package-lock.json b/client/package-lock.json
index e603185..33c5d66 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -8,6 +8,7 @@
       "name": "my-project",
       "version": "0.0.0",
       "dependencies": {
+        "axios": "^1.7.7",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-router-dom": "^6.26.2"
@@ -1628,6 +1629,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.20",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
@@ -1682,6 +1689,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1890,6 +1908,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -2064,6 +2094,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -2761,6 +2800,26 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -2788,6 +2847,20 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -3791,6 +3864,27 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -4374,6 +4468,12 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
diff --git a/client/package.json b/client/package.json
index b79c5de..0bd0eec 100644
--- a/client/package.json
+++ b/client/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.7.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.2"

From 94d3392b73e7f80e384205ddd13c2b4b70560d89 Mon Sep 17 00:00:00 2001
From: Liam Stamper <136619788+liamstamper@users.noreply.github.com>
Date: Tue, 8 Oct 2024 20:30:35 -0500
Subject: [PATCH 07/25] added axios connection and started api call

---
 app.py                                       | 11 +++++++++-
 client/src/components/home/sections/Home.tsx | 21 ++++++++++++++++++--
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/app.py b/app.py
index ad14f95..679a8fb 100644
--- a/app.py
+++ b/app.py
@@ -1,12 +1,21 @@
 from fastapi import FastAPI, HTTPException, Body, Query
+from fastapi.middleware.cors import CORSMiddleware
+from typing import Annotated, Optional, List
 from pydantic import BaseModel
 from pathlib import Path
 import shutil
 import magic
-from typing import Annotated, Optional, List
 
 app = FastAPI()
 
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["https://localhost:5173"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
 mime = magic.Magic(mime=True)
 
 # Define the root directory to restrict access
diff --git a/client/src/components/home/sections/Home.tsx b/client/src/components/home/sections/Home.tsx
index e6f91e1..265feed 100644
--- a/client/src/components/home/sections/Home.tsx
+++ b/client/src/components/home/sections/Home.tsx
@@ -6,6 +6,7 @@ import RecentFilesGrid from "../../../components/home/RecentFileGrid";
 import RecentFilesTable from "../../../components/home/RecentFilesTable";
 import ButtonGroup from "../../../components/home/ButtonGroup";
 import { getFilesFromAPI } from "../../../data/apiService";
+import axios from "axios";
 
 interface File {
   name: string;
@@ -13,6 +14,7 @@ interface File {
   modified: string;
   imagepath: string;
   mime: string;
+  size: number;
 }
 
 interface APIResponse {
@@ -26,7 +28,7 @@ const Home: FC = () => {
   const [view, setView] = useState<number>(2);
 
   useEffect(() => {
-    const fetchData = async () => {
+  /*   const fetchData = async () => {
       try {
         const result: APIResponse = await getFilesFromAPI();
         setFiles(result.files);
@@ -36,7 +38,22 @@ const Home: FC = () => {
         setLoading(false);
       }
     };
-    fetchData();
+    fetchData(); */
+    axios
+    .get(`http://127.0.0.1:8000/api/directory`, {
+      params: {
+        path: "",
+      },
+    })
+    
+    .then((response) => {
+      setFiles(response.data);
+      setLoading(false);
+    })
+    .catch((err) => {
+      setError("Failed to fetch files.");
+      setLoading(false);
+    });
   }, []);
 
   if (loading) {

From e69763ba7b7bc1c1d14ed9b5691ce32e3f05597f Mon Sep 17 00:00:00 2001
From: Allen <63997543+aaw3@users.noreply.github.com>
Date: Tue, 8 Oct 2024 21:58:59 -0500
Subject: [PATCH 08/25] update CORS protocol

---
 app.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app.py b/app.py
index 679a8fb..0c3720d 100644
--- a/app.py
+++ b/app.py
@@ -10,7 +10,7 @@
 
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=["https://localhost:5173"],
+    allow_origins=["http://localhost:5173"],
     allow_credentials=True,
     allow_methods=["*"],
     allow_headers=["*"],

From 6bfcae4ac4255fffe84a4787041c1a1def4a422f Mon Sep 17 00:00:00 2001
From: Liam Stamper <136619788+liamstamper@users.noreply.github.com>
Date: Wed, 9 Oct 2024 10:59:42 -0500
Subject: [PATCH 09/25] fixed tailiwind error

---
 client/src/components/home/BreadCrumb.tsx | 12 ++++++------
 client/src/components/home/Header.tsx     | 18 +++++++++---------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/client/src/components/home/BreadCrumb.tsx b/client/src/components/home/BreadCrumb.tsx
index bb8dcd2..77b2d5b 100644
--- a/client/src/components/home/BreadCrumb.tsx
+++ b/client/src/components/home/BreadCrumb.tsx
@@ -30,9 +30,9 @@ const BreadCrumb = () => {
             >
               <path
                 stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
                 d="m1 9 4-4-4-4"
               />
             </svg>
@@ -55,9 +55,9 @@ const BreadCrumb = () => {
             >
               <path
                 stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
                 d="m1 9 4-4-4-4"
               />
             </svg>
diff --git a/client/src/components/home/Header.tsx b/client/src/components/home/Header.tsx
index 1a87158..8a8d3ad 100644
--- a/client/src/components/home/Header.tsx
+++ b/client/src/components/home/Header.tsx
@@ -24,9 +24,9 @@ const Header = () => {
             >
               <path
                 stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
                 d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
               />
             </svg>
@@ -43,9 +43,9 @@ const Header = () => {
               >
                 <path
                   stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
                   d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
                 />
               </svg>
@@ -75,9 +75,9 @@ const Header = () => {
             >
               <path
                 stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
                 d="M1 1h15M1 7h15M1 13h15"
               />
             </svg>

From c1cc34a39f9f6122778117e07ee1e0c47737670b Mon Sep 17 00:00:00 2001
From: Liam Stamper <136619788+liamstamper@users.noreply.github.com>
Date: Wed, 9 Oct 2024 11:07:28 -0500
Subject: [PATCH 10/25] updated api call

---
 client/src/components/home/sections/Home.tsx | 30 +++++++++++---------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/client/src/components/home/sections/Home.tsx b/client/src/components/home/sections/Home.tsx
index 265feed..6037b0f 100644
--- a/client/src/components/home/sections/Home.tsx
+++ b/client/src/components/home/sections/Home.tsx
@@ -40,19 +40,23 @@ const Home: FC = () => {
     };
     fetchData(); */
     axios
-    .get(`http://127.0.0.1:8000/api/directory`, {
-      params: {
-        path: "",
-      },
-    })
-    
-    .then((response) => {
-      setFiles(response.data);
-      setLoading(false);
-    })
-    .catch((err) => {
-      setError("Failed to fetch files.");
-      setLoading(false);
+      .get('http://127.0.0.1:8000/api/directory', {
+        params: {
+          path: [""], 
+        },
+      })
+      .then((response) => {
+        if (response.data && Array.isArray(response.data.files)) {
+          setFiles(response.data.files);
+        } else {
+          setFiles([]);
+          setError("Unexpected response format.");
+        }
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError("Failed to fetch files.");
+        setLoading(false);
     });
   }, []);
 

From 0d6ae2e8c5032766bced59710ff815c49396601d Mon Sep 17 00:00:00 2001
From: Liam Stamper <136619788+liamstamper@users.noreply.github.com>
Date: Wed, 9 Oct 2024 12:41:39 -0500
Subject: [PATCH 11/25] updated name to fileName

---
 client/src/components/home/RecentFileCard.tsx     |  9 +++++----
 client/src/components/home/RecentFileGrid.tsx     |  2 +-
 client/src/components/home/RecentFilesTable.tsx   |  7 ++++---
 client/src/components/home/SuggestedFileCard.tsx  | 11 ++++++-----
 client/src/components/home/SuggestedFilesGrid.tsx |  2 +-
 5 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/client/src/components/home/RecentFileCard.tsx b/client/src/components/home/RecentFileCard.tsx
index d1ac7f7..8676fa3 100644
--- a/client/src/components/home/RecentFileCard.tsx
+++ b/client/src/components/home/RecentFileCard.tsx
@@ -4,7 +4,7 @@ import ContextMenu from "./ContextMenu";
 
 interface RecentFileCardProps {
   file: {
-    name: string;
+    fileName: string;
     created: string;
     modified: string;
     imagepath: string;
@@ -30,6 +30,7 @@ const RecentFileCard: React.FC<RecentFileCardProps> = ({
   };
 
   const removeFileExtension = (filename: string) => {
+    if (!filename) return "";
     return filename.replace(/\.[^/.]+$/, "");
   };
 
@@ -46,12 +47,12 @@ const RecentFileCard: React.FC<RecentFileCardProps> = ({
         <div className="flex justify-between items-center">
           <h3
             className="font-bold text-sm text-gray-900 dark:text-white truncate"
-            title={file.name}
+            title={file.fileName}
           >
-            {removeFileExtension(file.name)}
+            {removeFileExtension(file.fileName)}
           </h3>
           <ContextMenu
-            fileName={file.name}
+            fileName={file.fileName}
             open="Open"
             rename="Rename"
             modify="Modify"
diff --git a/client/src/components/home/RecentFileGrid.tsx b/client/src/components/home/RecentFileGrid.tsx
index bc52a72..781e142 100644
--- a/client/src/components/home/RecentFileGrid.tsx
+++ b/client/src/components/home/RecentFileGrid.tsx
@@ -3,7 +3,7 @@ import FileCard2 from "./RecentFileCard";
 
 interface File {
   files: {
-    name: string;
+    fileName: string;
     created: string;
     modified: string;
     imagepath: string;
diff --git a/client/src/components/home/RecentFilesTable.tsx b/client/src/components/home/RecentFilesTable.tsx
index 879e0ec..1d50ec3 100644
--- a/client/src/components/home/RecentFilesTable.tsx
+++ b/client/src/components/home/RecentFilesTable.tsx
@@ -3,7 +3,7 @@ import ContextMenu from "./ContextMenu";
 
 interface RecentFilesTableProps {
   files: {
-    name: string;
+    fileName: string;
     created: string;
     modified: string;
     size: number; 
@@ -35,6 +35,7 @@ const RecentFilesTable: React.FC<RecentFilesTableProps> = ({ files }) => {
   
 
   const removeFileExtension = (filename: string) => {
+    if (!filename) return "";
     return filename.replace(/\.[^/.]+$/, "");
   };
 
@@ -64,7 +65,7 @@ const RecentFilesTable: React.FC<RecentFilesTableProps> = ({ files }) => {
             >
               <td className="p-3 dark:text-gray-300 flex items-center">
               <img src = {file.imagepath || "/images/placeholder.png"} className="p-3 bg-white rounded-md ml-2 mr-2 my-1 h-4 w-4"></img>
-                {removeFileExtension(file.name)}
+                {removeFileExtension(file.fileName)}
               </td>
               <td className="p-3 dark:text-gray-300">
                 {formatDate(file.modified)}
@@ -74,7 +75,7 @@ const RecentFilesTable: React.FC<RecentFilesTableProps> = ({ files }) => {
               </td>
               <td className="p-3 text-right dark:text-gray-300">
                 <ContextMenu
-                  fileName={file.name}
+                  fileName={file.fileName}
                   open="Open"
                   rename="Rename"
                   modify="Modify"
diff --git a/client/src/components/home/SuggestedFileCard.tsx b/client/src/components/home/SuggestedFileCard.tsx
index 0155233..32e8537 100644
--- a/client/src/components/home/SuggestedFileCard.tsx
+++ b/client/src/components/home/SuggestedFileCard.tsx
@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
 
 interface FileCardProps {
   file: {
-    name: string;
+    fileName: string;
     created: string;
     modified: string;
     imagepath: string;
@@ -22,8 +22,9 @@ const FileCard: React.FC<FileCardProps> = ({ file }) => {
     });
   };
 
-  const removeFileExtension = (filename: string) => {
-    return filename.replace(/\.[^/.]+$/, "");
+  const removeFileExtension = (fileName: string) => {
+    if (!fileName) return fileName;
+    return fileName.replace(/\.[^/.]+$/, "");
   };
 
   return (
@@ -38,9 +39,9 @@ const FileCard: React.FC<FileCardProps> = ({ file }) => {
       <div className="flex-1 min-w-0">
         <h3
           className="font-semibold text-sm sm:text-sm md:text-md dark:text-white truncate"
-          title={file.name}
+          title={file.fileName}
         >
-          {removeFileExtension(file.name)}
+          {file.fileName}
         </h3>
         <p className="text-xs sm:text-xxs dark:text-gray-400 mt-1">
           {formatDate(file.modified)}
diff --git a/client/src/components/home/SuggestedFilesGrid.tsx b/client/src/components/home/SuggestedFilesGrid.tsx
index 661b1ea..cb10e31 100644
--- a/client/src/components/home/SuggestedFilesGrid.tsx
+++ b/client/src/components/home/SuggestedFilesGrid.tsx
@@ -3,7 +3,7 @@ import FileCard from "./SuggestedFileCard";
 
 interface SuggestedFilesGridProps {
   files: {
-    name: string;
+    fileName: string;
     created: string;
     modified: string;
     imagepath: string;

From 01e40157841edcf8f0c42b3ff7a6c7fa3b2d35dd Mon Sep 17 00:00:00 2001
From: Liam Stamper <136619788+liamstamper@users.noreply.github.com>
Date: Wed, 9 Oct 2024 12:41:49 -0500
Subject: [PATCH 12/25] working api call

---
 client/src/components/home/sections/Home.tsx | 40 ++++++++++----------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/client/src/components/home/sections/Home.tsx b/client/src/components/home/sections/Home.tsx
index 6037b0f..a505a64 100644
--- a/client/src/components/home/sections/Home.tsx
+++ b/client/src/components/home/sections/Home.tsx
@@ -9,7 +9,7 @@ import { getFilesFromAPI } from "../../../data/apiService";
 import axios from "axios";
 
 interface File {
-  name: string;
+  fileName: string;
   created: string;
   modified: string;
   imagepath: string;
@@ -40,25 +40,27 @@ const Home: FC = () => {
     };
     fetchData(); */
     axios
-      .get('http://127.0.0.1:8000/api/directory', {
-        params: {
-          path: [""], 
-        },
-      })
-      .then((response) => {
-        if (response.data && Array.isArray(response.data.files)) {
-          setFiles(response.data.files);
-        } else {
-          setFiles([]);
-          setError("Unexpected response format.");
-        }
-        setLoading(false);
-      })
-      .catch((err) => {
-        setError("Failed to fetch files.");
-        setLoading(false);
+    .get('http://127.0.0.1:8000/api/directory', {
+      params: {
+        path: "d0",
+      },
+    })
+    .then((response) => {
+      // Extract the files under 'directories.d0'
+      const directories = response.data.directories;
+      if (directories && Array.isArray(directories.d0)) {
+        setFiles(directories.d0);
+      } else {
+        setFiles([]);
+        setError("Unexpected response format.");
+      }
+      setLoading(false);
+    })
+    .catch((err) => {
+      setError("Failed to fetch files.");
+      setLoading(false);
     });
-  }, []);
+}, []);
 
   if (loading) {
     return (

From a6529f00d5f3ae9e667a15b7b775c15105b79060 Mon Sep 17 00:00:00 2001
From: Liam Stamper <136619788+liamstamper@users.noreply.github.com>
Date: Wed, 9 Oct 2024 12:41:59 -0500
Subject: [PATCH 13/25] updated padding bottom

---
 client/src/pages/HomePage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/pages/HomePage.tsx b/client/src/pages/HomePage.tsx
index af93179..e3b76d1 100644
--- a/client/src/pages/HomePage.tsx
+++ b/client/src/pages/HomePage.tsx
@@ -31,7 +31,7 @@ const HomePage: FC = () => {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50 h-full dark:bg-gray-900 flex flex-col">
+    <div className="min-h-screen bg-gray-50 h-full dark:bg-gray-900 flex flex-col pb-10">
       <Header />
       <div className="flex flex-1">
         {/* Pass the setOpenSection function to Sidebar */}

From 7d910f0bad629947365ceb3d0eb807f2c241e81d Mon Sep 17 00:00:00 2001
From: Liam Stamper <136619788+liamstamper@users.noreply.github.com>
Date: Wed, 9 Oct 2024 12:48:28 -0500
Subject: [PATCH 14/25] removed weekday from accessed date

---
 client/src/components/home/SuggestedFileCard.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/components/home/SuggestedFileCard.tsx b/client/src/components/home/SuggestedFileCard.tsx
index 32e8537..ba31da9 100644
--- a/client/src/components/home/SuggestedFileCard.tsx
+++ b/client/src/components/home/SuggestedFileCard.tsx
@@ -15,7 +15,6 @@ const FileCard: React.FC<FileCardProps> = ({ file }) => {
   const formatDate = (epoch: string) => {
     const date = new Date(parseInt(epoch) * 1000);
     return date.toLocaleDateString("en-US", {
-      weekday: "long",
       year: "numeric",
       month: "long",
       day: "numeric",

From 42b811ccf1e64545c563d52677fb0c0517420137 Mon Sep 17 00:00:00 2001
From: Liam Stamper <136619788+liamstamper@users.noreply.github.com>
Date: Wed, 9 Oct 2024 12:55:16 -0500
Subject: [PATCH 15/25] changed mime pop to mime_type to match data and made
 folder size = "-"

---
 client/src/components/home/RecentFileCard.tsx     | 2 +-
 client/src/components/home/RecentFileGrid.tsx     | 2 +-
 client/src/components/home/RecentFilesTable.tsx   | 8 +++++---
 client/src/components/home/SuggestedFileCard.tsx  | 2 +-
 client/src/components/home/SuggestedFilesGrid.tsx | 2 +-
 client/src/components/home/sections/Home.tsx      | 2 +-
 6 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/client/src/components/home/RecentFileCard.tsx b/client/src/components/home/RecentFileCard.tsx
index 8676fa3..2d7436a 100644
--- a/client/src/components/home/RecentFileCard.tsx
+++ b/client/src/components/home/RecentFileCard.tsx
@@ -8,7 +8,7 @@ interface RecentFileCardProps {
     created: string;
     modified: string;
     imagepath: string;
-    mime: string;
+    mime_type: string;
   };
   isOpen: boolean;
   toggleMenu: () => void;
diff --git a/client/src/components/home/RecentFileGrid.tsx b/client/src/components/home/RecentFileGrid.tsx
index 781e142..9c150b6 100644
--- a/client/src/components/home/RecentFileGrid.tsx
+++ b/client/src/components/home/RecentFileGrid.tsx
@@ -7,7 +7,7 @@ interface File {
     created: string;
     modified: string;
     imagepath: string;
-    mime: string;
+    mime_type: string;
   }[];
 }
 
diff --git a/client/src/components/home/RecentFilesTable.tsx b/client/src/components/home/RecentFilesTable.tsx
index 1d50ec3..d4a8cec 100644
--- a/client/src/components/home/RecentFilesTable.tsx
+++ b/client/src/components/home/RecentFilesTable.tsx
@@ -8,7 +8,7 @@ interface RecentFilesTableProps {
     modified: string;
     size: number; 
     imagepath: string;
-    mime: string;
+    mime_type: string;
   }[];
 }
 
@@ -24,7 +24,9 @@ const RecentFilesTable: React.FC<RecentFilesTableProps> = ({ files }) => {
     });
   };
 
-  const formatFileSize = (size: number) => {
+  const formatFileSize = (size: number, mime: string) => {
+    console.log(mime);
+    if (mime === "inode/directory") return "-";
     if (size === 0) return "0 B";
     const k = 1024;
     const sizes = ["B", "KB", "MB", "GB", "TB"];
@@ -71,7 +73,7 @@ const RecentFilesTable: React.FC<RecentFilesTableProps> = ({ files }) => {
                 {formatDate(file.modified)}
               </td>
               <td className="p-3 dark:text-gray-300">
-                {formatFileSize(file.size)}
+                {formatFileSize(file.size, file.mime_type)}
               </td>
               <td className="p-3 text-right dark:text-gray-300">
                 <ContextMenu
diff --git a/client/src/components/home/SuggestedFileCard.tsx b/client/src/components/home/SuggestedFileCard.tsx
index ba31da9..2f0abcb 100644
--- a/client/src/components/home/SuggestedFileCard.tsx
+++ b/client/src/components/home/SuggestedFileCard.tsx
@@ -7,7 +7,7 @@ interface FileCardProps {
     created: string;
     modified: string;
     imagepath: string;
-    mime: string;
+    mime_type: string;
   };
 }
 
diff --git a/client/src/components/home/SuggestedFilesGrid.tsx b/client/src/components/home/SuggestedFilesGrid.tsx
index cb10e31..9dc0eb5 100644
--- a/client/src/components/home/SuggestedFilesGrid.tsx
+++ b/client/src/components/home/SuggestedFilesGrid.tsx
@@ -7,7 +7,7 @@ interface SuggestedFilesGridProps {
     created: string;
     modified: string;
     imagepath: string;
-    mime: string;
+    mime_type: string;
   }[];
 }
 
diff --git a/client/src/components/home/sections/Home.tsx b/client/src/components/home/sections/Home.tsx
index a505a64..085cdb4 100644
--- a/client/src/components/home/sections/Home.tsx
+++ b/client/src/components/home/sections/Home.tsx
@@ -13,7 +13,7 @@ interface File {
   created: string;
   modified: string;
   imagepath: string;
-  mime: string;
+  mime_type: string;
   size: number;
 }
 

From f61ac1263b9b5ca7dce7dde417e59e8bc8b8c4ad Mon Sep 17 00:00:00 2001
From: Liam Stamper <136619788+liamstamper@users.noreply.github.com>
Date: Wed, 9 Oct 2024 13:09:57 -0500
Subject: [PATCH 16/25] added context menu

---
 .../src/components/home/SuggestedFileCard.tsx | 68 ++++++++++++-------
 1 file changed, 44 insertions(+), 24 deletions(-)

diff --git a/client/src/components/home/SuggestedFileCard.tsx b/client/src/components/home/SuggestedFileCard.tsx
index 2f0abcb..563ac8c 100644
--- a/client/src/components/home/SuggestedFileCard.tsx
+++ b/client/src/components/home/SuggestedFileCard.tsx
@@ -1,7 +1,8 @@
-import React from "react";
+import React, { useState } from "react";
 import { Link } from "react-router-dom";
+import ContextMenu from "./ContextMenu";
 
-interface FileCardProps {
+interface SuggestedFileCardProps {
   file: {
     fileName: string;
     created: string;
@@ -11,7 +12,9 @@ interface FileCardProps {
   };
 }
 
-const FileCard: React.FC<FileCardProps> = ({ file }) => {
+const SuggestedFileCard: React.FC<SuggestedFileCardProps> = ({ file }) => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
   const formatDate = (epoch: string) => {
     const date = new Date(parseInt(epoch) * 1000);
     return date.toLocaleDateString("en-US", {
@@ -22,32 +25,49 @@ const FileCard: React.FC<FileCardProps> = ({ file }) => {
   };
 
   const removeFileExtension = (fileName: string) => {
-    if (!fileName) return fileName;
+    if (!fileName) return "Unnamed File";
     return fileName.replace(/\.[^/.]+$/, "");
   };
 
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
+
   return (
-    <Link
-      to="/"
-      className="bg-white rounded-lg shadow-md p-4 dark:bg-gray-800 flex items-center space-x-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-200"
-    >
-      <img
-        src={file.imagepath || "/images/placeholder.png"}
-        className="w-12 h-12 sm:w-10 sm:h-10 bg-gray-200 dark:bg-gray-600 object-cover rounded-lg flex-shrink-0"
-      />
-      <div className="flex-1 min-w-0">
-        <h3
-          className="font-semibold text-sm sm:text-sm md:text-md dark:text-white truncate"
-          title={file.fileName}
-        >
-          {file.fileName}
-        </h3>
-        <p className="text-xs sm:text-xxs dark:text-gray-400 mt-1">
-          {formatDate(file.modified)}
-        </p>
+    <div className="relative bg-white rounded-lg shadow-md p-4 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-200">
+      <Link
+        to="/"
+        className="flex items-center space-x-4"
+      >
+        <img
+          src={file.imagepath || "/images/placeholder.png"}
+          className="w-12 h-12 sm:w-10 sm:h-10 bg-gray-200 dark:bg-gray-600 object-cover rounded-lg flex-shrink-0"
+        />
+        <div className="flex-1 min-w-0">
+          <h3
+            className="font-semibold text-sm sm:text-sm md:text-md dark:text-white truncate"
+            title={file.fileName}
+          >
+            {removeFileExtension(file.fileName)}
+          </h3>
+          <p className="text-xs sm:text-xxs dark:text-gray-400 mt-1">
+            {formatDate(file.modified)}
+          </p>
+        </div>
+      </Link>
+      <div className="absolute top-[20px] right-4">
+        <ContextMenu
+          fileName={file.fileName}
+          open="Open"
+          rename="Rename"
+          modify="Modify"
+          onDelete="Delete"
+          isOpen={isMenuOpen}
+          toggleMenu={toggleMenu}
+        />
       </div>
-    </Link>
+    </div>
   );
 };
 
-export default FileCard;
+export default SuggestedFileCard;

From de9488a2567b8023d67921906c8ddb884373123d Mon Sep 17 00:00:00 2001
From: Liam Stamper <136619788+liamstamper@users.noreply.github.com>
Date: Wed, 9 Oct 2024 13:17:49 -0500
Subject: [PATCH 17/25] limited suggested files to 10

---
 client/src/components/home/SuggestedFilesGrid.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/home/SuggestedFilesGrid.tsx b/client/src/components/home/SuggestedFilesGrid.tsx
index 9dc0eb5..7a12c18 100644
--- a/client/src/components/home/SuggestedFilesGrid.tsx
+++ b/client/src/components/home/SuggestedFilesGrid.tsx
@@ -14,7 +14,7 @@ interface SuggestedFilesGridProps {
 const SuggestedFilesGrid: React.FC<SuggestedFilesGridProps> = ({ files }) => {
   return (
     <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 mb-8">
-      {files.map((file, index) => (
+      {files.slice(0, 10).map((file, index) => (
         <FileCard key={index} file={file} />
       ))}
     </div>

From 7197887f51cee5c76ae1fdd544281b5057f3c7a9 Mon Sep 17 00:00:00 2001
From: Allen <63997543+aaw3@users.noreply.github.com>
Date: Sat, 12 Oct 2024 23:08:47 -0500
Subject: [PATCH 18/25] Merge fastapi in sidebar

---
 client/src/components/home/sections/Home.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/home/sections/Home.tsx b/client/src/components/home/sections/Home.tsx
index 085cdb4..41bc47f 100644
--- a/client/src/components/home/sections/Home.tsx
+++ b/client/src/components/home/sections/Home.tsx
@@ -42,7 +42,7 @@ const Home: FC = () => {
     axios
     .get('http://127.0.0.1:8000/api/directory', {
       params: {
-        path: "d0",
+        path: ".",
       },
     })
     .then((response) => {

From 12979a980a78c7dac0e36c40a7f26388f6eb27d2 Mon Sep 17 00:00:00 2001
From: Liam Stamper <136619788+liamstamper@users.noreply.github.com>
Date: Sun, 13 Oct 2024 18:43:41 -0500
Subject: [PATCH 19/25] fixed fetching uploads error

---
 client/src/components/home/sections/Home.tsx | 41 ++++++++++----------
 1 file changed, 21 insertions(+), 20 deletions(-)

diff --git a/client/src/components/home/sections/Home.tsx b/client/src/components/home/sections/Home.tsx
index 41bc47f..98a885b 100644
--- a/client/src/components/home/sections/Home.tsx
+++ b/client/src/components/home/sections/Home.tsx
@@ -40,26 +40,27 @@ const Home: FC = () => {
     };
     fetchData(); */
     axios
-    .get('http://127.0.0.1:8000/api/directory', {
-      params: {
-        path: ".",
-      },
-    })
-    .then((response) => {
-      // Extract the files under 'directories.d0'
-      const directories = response.data.directories;
-      if (directories && Array.isArray(directories.d0)) {
-        setFiles(directories.d0);
-      } else {
-        setFiles([]);
-        setError("Unexpected response format.");
-      }
-      setLoading(false);
-    })
-    .catch((err) => {
-      setError("Failed to fetch files.");
-      setLoading(false);
-    });
+  .get('http://127.0.0.1:8000/api/directory', {
+    params: {
+      path: ".",
+    },
+  })
+  .then((response) => {
+    const directories = response.data.directories;
+    const requestedPath = "."; 
+    if (directories && Array.isArray(directories[requestedPath])) {
+      setFiles(directories[requestedPath]);
+    } else {
+      setFiles([]);
+      setError("Unexpected response format.");
+    }
+    setLoading(false);
+  })
+  .catch((err) => {
+    setError("Failed to fetch files.");
+    setLoading(false);
+  });
+
 }, []);
 
   if (loading) {

From b5e72950077716557ec56d1d4663969e9998632d Mon Sep 17 00:00:00 2001
From: Liam Stamper <136619788+liamstamper@users.noreply.github.com>
Date: Sun, 13 Oct 2024 18:44:12 -0500
Subject: [PATCH 20/25] deleted old imports and comments

---
 client/src/components/home/sections/Home.tsx | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/client/src/components/home/sections/Home.tsx b/client/src/components/home/sections/Home.tsx
index 98a885b..7565028 100644
--- a/client/src/components/home/sections/Home.tsx
+++ b/client/src/components/home/sections/Home.tsx
@@ -5,7 +5,6 @@ import SuggestedFilesGrid from "../../../components/home/SuggestedFilesGrid";
 import RecentFilesGrid from "../../../components/home/RecentFileGrid";
 import RecentFilesTable from "../../../components/home/RecentFilesTable";
 import ButtonGroup from "../../../components/home/ButtonGroup";
-import { getFilesFromAPI } from "../../../data/apiService";
 import axios from "axios";
 
 interface File {
@@ -28,17 +27,6 @@ const Home: FC = () => {
   const [view, setView] = useState<number>(2);
 
   useEffect(() => {
-  /*   const fetchData = async () => {
-      try {
-        const result: APIResponse = await getFilesFromAPI();
-        setFiles(result.files);
-        setLoading(false);
-      } catch (error) {
-        setError("Failed to fetch data");
-        setLoading(false);
-      }
-    };
-    fetchData(); */
     axios
   .get('http://127.0.0.1:8000/api/directory', {
     params: {

From e690ccca1a2f02ece3cb06b35db181f3e9d17a7b Mon Sep 17 00:00:00 2001
From: Liam Stamper <136619788+liamstamper@users.noreply.github.com>
Date: Sun, 13 Oct 2024 19:49:20 -0500
Subject: [PATCH 21/25] rename api call working

---
 client/src/components/home/ContextMenu.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/client/src/components/home/ContextMenu.tsx b/client/src/components/home/ContextMenu.tsx
index d6df1e5..5b06560 100644
--- a/client/src/components/home/ContextMenu.tsx
+++ b/client/src/components/home/ContextMenu.tsx
@@ -45,6 +45,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
     };
   }, [isOpen, toggleMenu]);
 
+  // DELETE
   const handleDelete = async () => {
     try {
       const response = await fetch(`/api/files/${fileName}`, {
@@ -60,6 +61,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
     }
   };
 
+  // OPEN
   const handleOpen = async () => {
     try {
       const response = await fetch(`/api/files/${fileName}`, {
@@ -75,24 +77,29 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
     }
   };
 
+  // MODIFY
   const handleModify = () => {
     console.log(`Modifying file: ${fileName}`);
   };
+
+  // RENAME
   const handleRename = async () => {
     const newName = prompt("Enter new file name:");
     if (newName) {
       try {
-        const response = await fetch(`/api/files/${fileName}/rename`, {
-          method: "POST",
+        const response = await fetch(`http://127.0.0.1:8000/api/file`, {
+          method: "PATCH",
           headers: {
             "Content-Type": "application/json",
           },
-          body: JSON.stringify({ newName }),
+          body: JSON.stringify({ 
+            [fileName]: newName, }),
         });
         if (response.ok) {
           console.log(`File ${fileName} renamed to ${newName} successfully`);
         } else {
-          console.error("Failed to rename file");
+          const errorData = await response.json();
+          console.error("Failed to rename file:", errorData.details || response.statusText);
         }
       } catch (error) {
         console.error("Error renaming file:", error);

From b8ec1871866a452e2a154cebcaeed45f60b64ec1 Mon Sep 17 00:00:00 2001
From: Liam Stamper <136619788+liamstamper@users.noreply.github.com>
Date: Thu, 24 Oct 2024 12:57:49 -0500
Subject: [PATCH 22/25] added mimetype to props

---
 client/src/components/home/ContextMenu.tsx    | 26 ++++++++++++++++---
 client/src/components/home/RecentFileCard.tsx |  1 +
 .../src/components/home/RecentFilesTable.tsx  |  1 +
 .../src/components/home/SuggestedFileCard.tsx |  1 +
 4 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/client/src/components/home/ContextMenu.tsx b/client/src/components/home/ContextMenu.tsx
index 5b06560..681518c 100644
--- a/client/src/components/home/ContextMenu.tsx
+++ b/client/src/components/home/ContextMenu.tsx
@@ -6,6 +6,7 @@ interface ContextMenuProps {
   modify: string;
   onDelete: string;
   rename: string;
+  mime_type: string;
   isOpen: boolean;
   toggleMenu: () => void;
 }
@@ -16,6 +17,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
   modify,
   onDelete,
   rename,
+  mime_type,
   isOpen,
   toggleMenu,
 }) => {
@@ -45,10 +47,26 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
     };
   }, [isOpen, toggleMenu]);
 
-  // DELETE
-  const handleDelete = async () => {
+  // DELETE FILE
+  const handleDeleteFile = async () => {
     try {
-      const response = await fetch(`/api/files/${fileName}`, {
+      const response = await fetch(`http://127.0.0.1:8000/api/file`, {
+        
+      });
+      if (response.ok) {
+        console.log(`File ${fileName} deleted successfully`);
+      } else {
+        console.error("Failed to delete file");
+      }
+    } catch (error) {
+      console.error("Error deleting file:", error);
+    }
+  };
+
+  // DELETE DIRECTORY
+  const handleDeleteDirectory = async () => {
+    try {
+      const response = await fetch(`http://127.0.0.1:8000/api/directory`, {
         method: "DELETE",
       });
       if (response.ok) {
@@ -167,7 +185,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
           </li>
           <li>
             <button
-              onClick={handleDelete}
+              onClick={() => mime_type === 'inode/directory' ?  handleDeleteDirectory() : handleDeleteFile()}
               className="block w-full text-left px-4 py-2 text-md text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white"
             >
               {onDelete}
diff --git a/client/src/components/home/RecentFileCard.tsx b/client/src/components/home/RecentFileCard.tsx
index 2d7436a..10ec59f 100644
--- a/client/src/components/home/RecentFileCard.tsx
+++ b/client/src/components/home/RecentFileCard.tsx
@@ -57,6 +57,7 @@ const RecentFileCard: React.FC<RecentFileCardProps> = ({
             rename="Rename"
             modify="Modify"
             onDelete="Delete"
+            mime_type={file.mime_type}
             isOpen={isOpen}
             toggleMenu={toggleMenu}
           />
diff --git a/client/src/components/home/RecentFilesTable.tsx b/client/src/components/home/RecentFilesTable.tsx
index d4a8cec..7a8da52 100644
--- a/client/src/components/home/RecentFilesTable.tsx
+++ b/client/src/components/home/RecentFilesTable.tsx
@@ -82,6 +82,7 @@ const RecentFilesTable: React.FC<RecentFilesTableProps> = ({ files }) => {
                   rename="Rename"
                   modify="Modify"
                   onDelete="Delete"
+                  mime_type={file.mime_type}
                   isOpen={openMenuIndex === index}
                   toggleMenu={() => toggleMenu(index)}
                 />
diff --git a/client/src/components/home/SuggestedFileCard.tsx b/client/src/components/home/SuggestedFileCard.tsx
index 563ac8c..9ff0a1b 100644
--- a/client/src/components/home/SuggestedFileCard.tsx
+++ b/client/src/components/home/SuggestedFileCard.tsx
@@ -62,6 +62,7 @@ const SuggestedFileCard: React.FC<SuggestedFileCardProps> = ({ file }) => {
           rename="Rename"
           modify="Modify"
           onDelete="Delete"
+          mime_type={file.mime_type}
           isOpen={isMenuOpen}
           toggleMenu={toggleMenu}
         />

From 726671efa172f94e45a0afa81c90b76ca940831c Mon Sep 17 00:00:00 2001
From: Liam Stamper <136619788+liamstamper@users.noreply.github.com>
Date: Fri, 8 Nov 2024 20:18:18 -0600
Subject: [PATCH 23/25] delete request working

---
 client/src/components/home/ContextMenu.tsx | 63 ++++++++++++----------
 1 file changed, 35 insertions(+), 28 deletions(-)

diff --git a/client/src/components/home/ContextMenu.tsx b/client/src/components/home/ContextMenu.tsx
index 681518c..a8cd196 100644
--- a/client/src/components/home/ContextMenu.tsx
+++ b/client/src/components/home/ContextMenu.tsx
@@ -47,37 +47,44 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
     };
   }, [isOpen, toggleMenu]);
 
-  // DELETE FILE
-  const handleDeleteFile = async () => {
-    try {
-      const response = await fetch(`http://127.0.0.1:8000/api/file`, {
-        
-      });
-      if (response.ok) {
-        console.log(`File ${fileName} deleted successfully`);
-      } else {
-        console.error("Failed to delete file");
-      }
-    } catch (error) {
-      console.error("Error deleting file:", error);
+ // DELETE FILE
+const handleDeleteFile = async () => {
+  try {
+    const response = await fetch(`http://127.0.0.1:8000/api/file?path=${encodeURIComponent(fileName)}`, {
+      method: "DELETE",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+    if (response.ok) {
+      console.log(`File ${fileName} deleted successfully`);
+    } else {
+      console.error("Failed to delete file");
     }
-  };
+  } catch (error) {
+    console.error("Error deleting file:", error);
+  }
+};
 
-  // DELETE DIRECTORY
-  const handleDeleteDirectory = async () => {
-    try {
-      const response = await fetch(`http://127.0.0.1:8000/api/directory`, {
-        method: "DELETE",
-      });
-      if (response.ok) {
-        console.log(`File ${fileName} deleted successfully`);
-      } else {
-        console.error("Failed to delete file");
-      }
-    } catch (error) {
-      console.error("Error deleting file:", error);
+// DELETE DIRECTORY
+const handleDeleteDirectory = async () => {
+  try {
+    const response = await fetch(`http://127.0.0.1:8000/api/directory?path=${encodeURIComponent(fileName)}`, {
+      method: "DELETE",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+    if (response.ok) {
+      console.log(`Directory ${fileName} deleted successfully`);
+    } else {
+      console.error("Failed to delete directory");
     }
-  };
+  } catch (error) {
+    console.error("Error deleting directory:", error);
+  }
+};
+
 
   // OPEN
   const handleOpen = async () => {

From 036eda96d6c00c81f514d1ab20221b5d5ce9b192 Mon Sep 17 00:00:00 2001
From: Liam Stamper <136619788+liamstamper@users.noreply.github.com>
Date: Fri, 8 Nov 2024 20:22:42 -0600
Subject: [PATCH 24/25] updated rename to check if old path exists instead of
 if old directory exists

---
 app.py | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app.py b/app.py
index b57327e..9a5d4ce 100644
--- a/app.py
+++ b/app.py
@@ -128,16 +128,16 @@ async def rename_file(files: dict[str, str], verbose: Optional[bool] = Query(Fal
     failed_paths = {}
     
     for old_name, new_name in files.items():
-        old_directory = secure_path(old_name)
-        new_directory = secure_path(new_name)
+        old_path = secure_path(old_name)
+        new_path = secure_path(new_name)
 
-        if not old_directory.exists() or not old_directory.is_dir():
+        if not old_path.exists() or not old_path.exists():
             #raise HTTPException(status_code=404, detail="Directory not found")
             failed_paths[old_name] = new_name
             continue
         
         try:
-            old_directory.rename(new_directory)
+            old_path.rename(new_path)
         except Exception as e:
             #raise HTTPException(status_code=500, detail=str(e))
             failed_paths[old_name] = new_name

From 1a9a1f205f0a368e20743c9186fc5ccfad832588 Mon Sep 17 00:00:00 2001
From: Liam Stamper <136619788+liamstamper@users.noreply.github.com>
Date: Sun, 10 Nov 2024 17:18:48 -0600
Subject: [PATCH 25/25] Cleanup (#27)

* removed modify

* modified to make fetchData callable in contextmenu

* removed modify from props for components using context menu

* added refreshdata to props and streamlined naming convention

* updated to refetch files on rename or delete

* created confirmationmodal and notifiaction. delete confirmation working but notification not
---
 .../src/components/home/ConfirmationModal.tsx |  35 ++++
 client/src/components/home/ContextMenu.tsx    | 157 +++++++++++-------
 client/src/components/home/Notification.tsx   |  25 +++
 client/src/components/home/RecentFileCard.tsx |   6 +-
 client/src/components/home/RecentFileGrid.tsx |  12 +-
 .../src/components/home/RecentFilesTable.tsx  |   5 +-
 .../src/components/home/SuggestedFileCard.tsx |   6 +-
 .../components/home/SuggestedFilesGrid.tsx    |   7 +-
 client/src/components/home/sections/Home.tsx  |  55 +++---
 9 files changed, 211 insertions(+), 97 deletions(-)
 create mode 100644 client/src/components/home/ConfirmationModal.tsx
 create mode 100644 client/src/components/home/Notification.tsx

diff --git a/client/src/components/home/ConfirmationModal.tsx b/client/src/components/home/ConfirmationModal.tsx
new file mode 100644
index 0000000..35fea44
--- /dev/null
+++ b/client/src/components/home/ConfirmationModal.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+
+interface ConfirmationModalProps {
+  message: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+const ConfirmationModal: React.FC<ConfirmationModalProps> = ({ message, onConfirm, onCancel }) => {
+  return (
+    <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 w-80 text-center">
+        <h2 className="text-lg text-gray-900 dark:text-white mb-4">
+          {message}
+        </h2>
+        <div className="flex justify-center space-x-4">
+          <button
+            onClick={onCancel}
+            className="px-4 py-2 bg-gray-300 dark:bg-gray-700 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-400 dark:hover:bg-gray-600 focus:outline-none"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={onConfirm}
+            className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none"
+          >
+            Delete
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ConfirmationModal;
diff --git a/client/src/components/home/ContextMenu.tsx b/client/src/components/home/ContextMenu.tsx
index a8cd196..f994dcc 100644
--- a/client/src/components/home/ContextMenu.tsx
+++ b/client/src/components/home/ContextMenu.tsx
@@ -1,29 +1,35 @@
-import React, { useRef, useEffect } from "react";
+import React, { useRef, useEffect, useState } from "react";
+import ConfirmationModal from "./ConfirmationModal";
+import Notification from "./Notification";
 
 interface ContextMenuProps {
   fileName: string;
   open: string;
-  modify: string;
   onDelete: string;
   rename: string;
   mime_type: string;
   isOpen: boolean;
   toggleMenu: () => void;
+  refreshData: () => void;
 }
 
 const ContextMenu: React.FC<ContextMenuProps> = ({
   fileName,
   open,
-  modify,
   onDelete,
   rename,
   mime_type,
   isOpen,
   toggleMenu,
+  refreshData,
 }) => {
   const menuRef = useRef<HTMLDivElement>(null);
   const buttonRef = useRef<HTMLButtonElement>(null);
 
+  const [showConfirmation, setShowConfirmation] = useState(false);
+  const [notificationMessage, setNotificationMessage] = useState("");
+  const [showNotification, setShowNotification] = useState(false);
+
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (
@@ -47,44 +53,57 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
     };
   }, [isOpen, toggleMenu]);
 
- // DELETE FILE
-const handleDeleteFile = async () => {
-  try {
-    const response = await fetch(`http://127.0.0.1:8000/api/file?path=${encodeURIComponent(fileName)}`, {
-      method: "DELETE",
-      headers: {
-        "Content-Type": "application/json",
-      },
-    });
-    if (response.ok) {
-      console.log(`File ${fileName} deleted successfully`);
-    } else {
-      console.error("Failed to delete file");
-    }
-  } catch (error) {
-    console.error("Error deleting file:", error);
-  }
-};
+  const showNotificationMessage = (message: string) => {
+    setNotificationMessage(message);
+    setShowNotification(false); 
+    setTimeout(() => setShowNotification(true), 0); 
+  };
 
-// DELETE DIRECTORY
-const handleDeleteDirectory = async () => {
-  try {
-    const response = await fetch(`http://127.0.0.1:8000/api/directory?path=${encodeURIComponent(fileName)}`, {
-      method: "DELETE",
-      headers: {
-        "Content-Type": "application/json",
-      },
-    });
-    if (response.ok) {
-      console.log(`Directory ${fileName} deleted successfully`);
-    } else {
-      console.error("Failed to delete directory");
+  // DELETE FILE
+  const handleDeleteFile = async () => {
+    try {
+      const response = await fetch(
+        `http://127.0.0.1:8000/api/file?path=${encodeURIComponent(fileName)}`,
+        {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      );
+      if (response.ok) {
+        showNotificationMessage(`File ${fileName} deleted successfully`);
+        refreshData();
+      } else {
+        console.error("Failed to delete file");
+      }
+    } catch (error) {
+      console.error("Error deleting file:", error);
     }
-  } catch (error) {
-    console.error("Error deleting directory:", error);
-  }
-};
+  };
 
+  // DELETE DIRECTORY
+  const handleDeleteDirectory = async () => {
+    try {
+      const response = await fetch(
+        `http://127.0.0.1:8000/api/directory?path=${encodeURIComponent(fileName)}`,
+        {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      );
+      if (response.ok) {
+        showNotificationMessage(`Directory ${fileName} deleted successfully`);
+        refreshData();
+      } else {
+        console.error("Failed to delete directory");
+      }
+    } catch (error) {
+      console.error("Error deleting directory:", error);
+    }
+  };
 
   // OPEN
   const handleOpen = async () => {
@@ -93,20 +112,15 @@ const handleDeleteDirectory = async () => {
         method: "OPEN",
       });
       if (response.ok) {
-        console.log(`File ${fileName} openedsuccessfully`);
+        console.log(`File ${fileName} opened successfully`);
       } else {
         console.error("Failed to open file");
       }
     } catch (error) {
-      console.error("Error openingß file:", error);
+      console.error("Error opening file:", error);
     }
   };
 
-  // MODIFY
-  const handleModify = () => {
-    console.log(`Modifying file: ${fileName}`);
-  };
-
   // RENAME
   const handleRename = async () => {
     const newName = prompt("Enter new file name:");
@@ -117,11 +131,14 @@ const handleDeleteDirectory = async () => {
           headers: {
             "Content-Type": "application/json",
           },
-          body: JSON.stringify({ 
-            [fileName]: newName, }),
+          body: JSON.stringify({
+            [fileName]: newName,
+          }),
         });
         if (response.ok) {
-          console.log(`File ${fileName} renamed to ${newName} successfully`);
+          showNotificationMessage(`File ${fileName} renamed to ${newName} successfully`);
+          setShowNotification(true);
+          refreshData();
         } else {
           const errorData = await response.json();
           console.error("Failed to rename file:", errorData.details || response.statusText);
@@ -132,6 +149,23 @@ const handleDeleteDirectory = async () => {
     }
   };
 
+  const confirmDelete = () => {
+    setShowConfirmation(true);
+  };
+
+  const handleConfirmDelete = () => {
+    setShowConfirmation(false);
+    if (mime_type === "inode/directory") {
+      handleDeleteDirectory();
+    } else {
+      handleDeleteFile();
+    }
+  };
+
+  const handleCancelDelete = () => {
+    setShowConfirmation(false);
+  };
+
   return (
     <div
       className="relative"
@@ -165,7 +199,7 @@ const handleDeleteDirectory = async () => {
           !isOpen ? "hidden" : ""
         }`}
       >
-        <ul className="">
+        <ul>
           <li>
             <button
               onClick={handleOpen}
@@ -184,15 +218,7 @@ const handleDeleteDirectory = async () => {
           </li>
           <li>
             <button
-              onClick={handleModify}
-              className="block w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white border-b border-gray-200 dark:border-gray-700"
-            >
-              {modify}
-            </button>
-          </li>
-          <li>
-            <button
-              onClick={() => mime_type === 'inode/directory' ?  handleDeleteDirectory() : handleDeleteFile()}
+              onClick={confirmDelete}
               className="block w-full text-left px-4 py-2 text-md text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white"
             >
               {onDelete}
@@ -200,6 +226,21 @@ const handleDeleteDirectory = async () => {
           </li>
         </ul>
       </div>
+
+      {showConfirmation && (
+        <ConfirmationModal
+          message="Are you sure you want to delete this file?"
+          onConfirm={handleConfirmDelete}
+          onCancel={handleCancelDelete}
+        />
+      )}
+
+      {showNotification && (
+        <Notification
+          message={notificationMessage}
+          onClose={() => setShowNotification(false)}
+        />
+      )}
     </div>
   );
 };
diff --git a/client/src/components/home/Notification.tsx b/client/src/components/home/Notification.tsx
new file mode 100644
index 0000000..f9f2cf6
--- /dev/null
+++ b/client/src/components/home/Notification.tsx
@@ -0,0 +1,25 @@
+import React, { useEffect } from "react";
+
+interface NotificationProps {
+  message: string;
+  onClose: () => void;
+}
+
+const Notification: React.FC<NotificationProps> = ({ message, onClose }) => {
+  useEffect(() => {
+    const timer = setTimeout(onClose, 3000);
+    return () => clearTimeout(timer);
+  }, [onClose]);
+
+  return (
+    <div className="fixed bottom-4 right-4 text-grey-900 dark:text-white dark:bg-gray-800 px-4 py-3 rounded-lg shadow-lg flex items-center space-x-3 cursor-pointer transition-opacity duration-300 opacity-90 hover:opacity-100"
+         onClick={onClose}>
+      <span className="flex-1">{message}</span>
+      <button onClick={onClose} className="text-white font-bold hover:text-gray-200 focus:outline-none">
+        &times;
+      </button>
+    </div>
+  );
+};
+
+export default Notification;
diff --git a/client/src/components/home/RecentFileCard.tsx b/client/src/components/home/RecentFileCard.tsx
index 10ec59f..2ed0f8d 100644
--- a/client/src/components/home/RecentFileCard.tsx
+++ b/client/src/components/home/RecentFileCard.tsx
@@ -12,12 +12,14 @@ interface RecentFileCardProps {
   };
   isOpen: boolean;
   toggleMenu: () => void;
+  refreshData: () => void;
 }
 
 const RecentFileCard: React.FC<RecentFileCardProps> = ({
   file,
   isOpen,
   toggleMenu,
+  refreshData
 }) => {
   const formatDate = (epoch: string) => {
     const date = new Date(parseInt(epoch) * 1000);
@@ -40,7 +42,7 @@ const RecentFileCard: React.FC<RecentFileCardProps> = ({
         <div className="w-full h-36 mb-2 bg-gray-200 dark:bg-gray-600 rounded-lg overflow-hidden">
           <img
             src={file.imagepath || "/path/to/placeholder-image.png"}
-            className="w-full h-full object-cover"
+            className="w-full h-full object-cover dark:bg-gray-600"
           />
         </div>
 
@@ -55,11 +57,11 @@ const RecentFileCard: React.FC<RecentFileCardProps> = ({
             fileName={file.fileName}
             open="Open"
             rename="Rename"
-            modify="Modify"
             onDelete="Delete"
             mime_type={file.mime_type}
             isOpen={isOpen}
             toggleMenu={toggleMenu}
+            refreshData={refreshData}
           />
         </div>
 
diff --git a/client/src/components/home/RecentFileGrid.tsx b/client/src/components/home/RecentFileGrid.tsx
index 9c150b6..22cb7d1 100644
--- a/client/src/components/home/RecentFileGrid.tsx
+++ b/client/src/components/home/RecentFileGrid.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import FileCard2 from "./RecentFileCard";
+import RecentFileCard from "./RecentFileCard";
 
 interface File {
   files: {
@@ -9,9 +9,10 @@ interface File {
     imagepath: string;
     mime_type: string;
   }[];
+  refreshData: () => void;
 }
 
-const RecentFilesGrid: React.FC<File> = ({ files }) => {
+const RecentFilesGrid: React.FC<File> = ({ files, refreshData }) => {
   const [openMenuIndex, setOpenMenuIndex] = useState<number | null>(null);
 
   const toggleMenu = (index: number) => {
@@ -25,11 +26,12 @@ const RecentFilesGrid: React.FC<File> = ({ files }) => {
   return (
     <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 mb-8">
       {files.map((file, index) => (
-        <FileCard2
+        <RecentFileCard
           key={index}
           file={file}
-          isOpen={openMenuIndex === index} // Check if this card's menu is open
-          toggleMenu={() => toggleMenu(index)} // Pass the toggle function
+          isOpen={openMenuIndex === index} 
+          toggleMenu={() => toggleMenu(index)}
+          refreshData={refreshData}
         />
       ))}
     </div>
diff --git a/client/src/components/home/RecentFilesTable.tsx b/client/src/components/home/RecentFilesTable.tsx
index 7a8da52..4426384 100644
--- a/client/src/components/home/RecentFilesTable.tsx
+++ b/client/src/components/home/RecentFilesTable.tsx
@@ -10,9 +10,10 @@ interface RecentFilesTableProps {
     imagepath: string;
     mime_type: string;
   }[];
+  refreshData: () => void
 }
 
-const RecentFilesTable: React.FC<RecentFilesTableProps> = ({ files }) => {
+const RecentFilesTable: React.FC<RecentFilesTableProps> = ({ files, refreshData }) => {
   const [openMenuIndex, setOpenMenuIndex] = useState<number | null>(null);
 
   const formatDate = (epoch: string) => {
@@ -80,11 +81,11 @@ const RecentFilesTable: React.FC<RecentFilesTableProps> = ({ files }) => {
                   fileName={file.fileName}
                   open="Open"
                   rename="Rename"
-                  modify="Modify"
                   onDelete="Delete"
                   mime_type={file.mime_type}
                   isOpen={openMenuIndex === index}
                   toggleMenu={() => toggleMenu(index)}
+                  refreshData={refreshData}
                 />
               </td>
             </tr>
diff --git a/client/src/components/home/SuggestedFileCard.tsx b/client/src/components/home/SuggestedFileCard.tsx
index 9ff0a1b..294bcb4 100644
--- a/client/src/components/home/SuggestedFileCard.tsx
+++ b/client/src/components/home/SuggestedFileCard.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import ContextMenu from "./ContextMenu";
+import { faRefresh } from "@fortawesome/free-solid-svg-icons";
 
 interface SuggestedFileCardProps {
   file: {
@@ -10,9 +11,10 @@ interface SuggestedFileCardProps {
     imagepath: string;
     mime_type: string;
   };
+  refreshData: () => void;
 }
 
-const SuggestedFileCard: React.FC<SuggestedFileCardProps> = ({ file }) => {
+const SuggestedFileCard: React.FC<SuggestedFileCardProps> = ({ file, refreshData }) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
   const formatDate = (epoch: string) => {
@@ -60,11 +62,11 @@ const SuggestedFileCard: React.FC<SuggestedFileCardProps> = ({ file }) => {
           fileName={file.fileName}
           open="Open"
           rename="Rename"
-          modify="Modify"
           onDelete="Delete"
           mime_type={file.mime_type}
           isOpen={isMenuOpen}
           toggleMenu={toggleMenu}
+          refreshData={refreshData}
         />
       </div>
     </div>
diff --git a/client/src/components/home/SuggestedFilesGrid.tsx b/client/src/components/home/SuggestedFilesGrid.tsx
index 7a12c18..b933669 100644
--- a/client/src/components/home/SuggestedFilesGrid.tsx
+++ b/client/src/components/home/SuggestedFilesGrid.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import FileCard from "./SuggestedFileCard";
+import SuggestedFileCard from "./SuggestedFileCard";
 
 interface SuggestedFilesGridProps {
   files: {
@@ -9,13 +9,14 @@ interface SuggestedFilesGridProps {
     imagepath: string;
     mime_type: string;
   }[];
+  refreshData: () => void;
 }
 
-const SuggestedFilesGrid: React.FC<SuggestedFilesGridProps> = ({ files }) => {
+const SuggestedFilesGrid: React.FC<SuggestedFilesGridProps> = ({ files, refreshData }) => {
   return (
     <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 mb-8">
       {files.slice(0, 10).map((file, index) => (
-        <FileCard key={index} file={file} />
+        <SuggestedFileCard key={index} file={file} refreshData={refreshData}/>
       ))}
     </div>
   );
diff --git a/client/src/components/home/sections/Home.tsx b/client/src/components/home/sections/Home.tsx
index 7565028..d8b7ff1 100644
--- a/client/src/components/home/sections/Home.tsx
+++ b/client/src/components/home/sections/Home.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState, useEffect } from "react";
+import React, { FC, useState, useEffect, useCallback} from "react";
 import LoadingIndicator from "../../../components/home/LoadingIndicator";
 import ErrorDisplay from "../../../components/home/ErrorDisplay";
 import SuggestedFilesGrid from "../../../components/home/SuggestedFilesGrid";
@@ -20,36 +20,41 @@ interface APIResponse {
   files: File[];
 }
 
+
 const Home: FC = () => {
   const [files, setFiles] = useState<File[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [view, setView] = useState<number>(2);
 
-  useEffect(() => {
+  const fetchData = useCallback(() => {
+    setLoading(true);
     axios
-  .get('http://127.0.0.1:8000/api/directory', {
-    params: {
-      path: ".",
-    },
-  })
-  .then((response) => {
-    const directories = response.data.directories;
-    const requestedPath = "."; 
-    if (directories && Array.isArray(directories[requestedPath])) {
-      setFiles(directories[requestedPath]);
-    } else {
-      setFiles([]);
-      setError("Unexpected response format.");
-    }
-    setLoading(false);
-  })
-  .catch((err) => {
-    setError("Failed to fetch files.");
-    setLoading(false);
-  });
+      .get("http://127.0.0.1:8000/api/directory", {
+        params: {
+          path: ".",
+        },
+      })
+      .then((response) => {
+        const directories = response.data.directories;
+        const requestedPath = ".";
+        if (directories && Array.isArray(directories[requestedPath])) {
+          setFiles(directories[requestedPath]);
+        } else {
+          setFiles([]);
+          setError("Unexpected response format.");
+        }
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError("Failed to fetch files.");
+        setLoading(false);
+      });
+  }, []); 
 
-}, []);
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
 
   if (loading) {
     return (
@@ -67,7 +72,7 @@ const Home: FC = () => {
     <div>
       <section className="px-6">
         <h2 className="text-xl font-bold mt-6 mb-4 dark:text-white">For you</h2>
-        <SuggestedFilesGrid files={files} />
+        <SuggestedFilesGrid files={files} refreshData={fetchData} />
       </section>
       <section className="px-6">
         <div className="mb-4 flex justify-between items-center">
@@ -76,7 +81,7 @@ const Home: FC = () => {
             <ButtonGroup activeView={view} onChangeView={setView} />
           </div>
         </div>
-        {view === 1 ? <RecentFilesGrid files={files} /> : <RecentFilesTable files={files} />}
+        {view === 1 ? <RecentFilesGrid files={files} refreshData={fetchData} /> : <RecentFilesTable files={files} refreshData={fetchData} />}
       </section>
     </div>
   );