Pages: Add Recents page

3 files changed, 55 insertions, 9 deletions

diff --git a/src/App.tsx b/src/App.tsx
index ffbb8f3..5304a62 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -18,6 +18,9 @@ function App() {
           <Route index element={
             <Home supabase={supabase} session={session} />
           } />
+          <Route path="/recent" element={
+            <Recent supabase={supabase} session={session} />
+          } />
           <Route path="/login" element={
             <Login supabase={supabase} session={session} setSession={setSession} />
           } />
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 9c86a9f..37cc7cc 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -7,7 +7,7 @@ import LineGraph from "../components/Graphs/LineGraph"
 export default function Home(props: any) {
   const navigate = useNavigate()
 
-  const [files, setFiles] = useState([])
+  const [_, setFiles] = useState([])
 
   useEffect(() => {
     if (!props.session) {
@@ -43,14 +43,6 @@ export default function Home(props: any) {
           <div className="w-3/12">
             <LineGraph />
           </div>
-          <div>
-            {files.map((file: any) => (
-              <div key={file.id}>
-                <p className="underline">file: {file.absolute_path}</p>
-              </div>
-            ))
-            }
-          </div>
         </main>
       </div>
     </>
diff --git a/src/pages/Recent.tsx b/src/pages/Recent.tsx
new file mode 100644
index 0000000..cecef25
--- /dev/null
+++ b/src/pages/Recent.tsx
@@ -0,0 +1,51 @@
+import { useEffect, useState, useCallback } from "react"
+
+import { useNavigate } from "react-router-dom"
+import SideBar from "../components/Sidebar/Sidebar"
+
+export default function Recent(props: any) {
+  const navigate = useNavigate()
+
+  const [files, setFiles] = useState([])
+
+  useEffect(() => {
+    if (!props.session) {
+      navigate('/login')
+    }
+  }, [props.session])
+
+  const fetchFiles = useCallback(async () => {
+    const { data, error } = await props.supabase
+      .from('file')
+      .select()
+    if (error) {
+      console.error(error)
+      return
+    }
+    setFiles(data.map((file: any) => {
+      return file as File
+    }))
+  }, [props.supabase])
+
+  useEffect(() => {
+    fetchFiles()
+  }, [])
+
+  return (
+    <>
+      <div className="flex h-screen">
+        <SideBar />
+        <main className="flex-1 overflow-y-auto">
+          <div>
+            {files.map((file: any) => (
+              <div key={file.id}>
+                <p className="underline">file: {file.absolute_path}</p>
+              </div>
+            ))
+            }
+          </div>
+        </main>
+      </div>
+    </>
+  )
+}