From e077670472f50611289ab34dc2f4d0fcb1d5b5a0 Mon Sep 17 00:00:00 2001
From: Manuel Palenzuela Merino <manuel.palenzuela@datadoghq.com>
Date: Fri, 12 Jul 2024 17:34:10 +0200
Subject: Pages: File: Show more info about file

---
 src/pages/File.tsx   | 67 ++++++++++++++++++++++++++++++++++++++++++++++++++--
 src/pages/Recent.tsx | 10 ++++----
 src/pages/Search.tsx |  3 ++-
 3 files changed, 73 insertions(+), 7 deletions(-)

diff --git a/src/pages/File.tsx b/src/pages/File.tsx
index f1377b2..2f940de 100644
--- a/src/pages/File.tsx
+++ b/src/pages/File.tsx
@@ -1,11 +1,47 @@
-import { useParams } from "react-router-dom"
+import { useNavigate, useParams } from "react-router-dom"
 import SideBar from "../components/Sidebar/Sidebar"
+import { useCallback, useEffect, useState } from "react";
+import { FSTracerFile } from "../lib/types";
 
-export default function File() {
+export default function File(props: any) {
+  const navigate = useNavigate()
   let { filepath } = useParams();
 
   console.log("FILEPATH: ", filepath)
 
+  const [files, setFiles] = useState([])
+
+  const latestFile = files[0] as FSTracerFile | undefined
+
+  useEffect(() => {
+    if (!props.session) {
+      navigate('/login')
+    }
+  }, [props.session])
+
+  const fetchFiles = useCallback(async () => {
+    console.log("FETCHIN FILES")
+    const { data, error } = await props.supabase
+      .from('file')
+      .select()
+      .eq('absolute_path', filepath)
+      .order('timestamp', { ascending: false })
+      .range(0, 20)
+    if (error) {
+      console.error(error)
+      return
+    }
+    console.log("RAW FILES: ", data)
+    setFiles(data.map((file: any) => {
+      return file as File
+    }))
+    console.log("FETCHED FILES")
+  }, [props.supabase])
+
+  useEffect(() => {
+    fetchFiles()
+  }, [])
+
   return (
     <>
       <div className="flex h-screen">
@@ -14,8 +50,35 @@ export default function File() {
           <div className="flex flex-col items-center">
             {filepath}
           </div>
+          <div className="mt-5 flex flex-col items-center">
+            {latestFile && <FileInfo file={latestFile} />
+            }
+          </div>
+          <div className="mt-5 flex flex-col items-center">
+            {files.map((file: FSTracerFile) => (
+              <div key={file.id}>
+                <p>{file.absolute_path} - {file.timestamp}</p>
+              </div>
+            ))
+            }
+          </div>
         </main>
       </div>
     </>
   )
 }
+
+interface FileInfoProps {
+  file: FSTracerFile
+}
+
+function FileInfo(props: FileInfoProps) {
+  return (
+    <>
+      <p>Absolute path: {props.file.absolute_path}</p>
+      <p>Timestamp: {props.file.timestamp}</p>
+      <p>Content: {props.file.contents}</p>
+      <p>ID: {props.file.id}</p>
+    </>
+  )
+}
diff --git a/src/pages/Recent.tsx b/src/pages/Recent.tsx
index 1ec1ebb..302ce81 100644
--- a/src/pages/Recent.tsx
+++ b/src/pages/Recent.tsx
@@ -24,7 +24,9 @@ export default function Recent(props: any) {
     console.log("FETCHIN FILES, pagination: ", paginationOffset)
     const { data, error } = await props.supabase
       .from('file')
-      .select().range(paginationOffset, paginationOffset + numOfFilesToShow - 1)
+      .select()
+      .order('timestamp', { ascending: false })
+      .range(paginationOffset, paginationOffset + numOfFilesToShow - 1)
     if (error) {
       console.error(error)
       return
@@ -49,7 +51,7 @@ export default function Recent(props: any) {
           <div className="flex flex-col items-center">
             <div className="flex flex-col gap-2">
               {files.map((file: FSTracerFile) => (
-                <div key={file.id} role="button" onClick={() => console.log("clocked file")}>
+                <div key={file.id} role="button">
                   <FileComponent file={file} />
                 </div>
               ))
@@ -64,8 +66,8 @@ export default function Recent(props: any) {
               next
             </button>
           </div>
-        </main>
-      </div>
+        </main >
+      </div >
     </>
   )
 }
diff --git a/src/pages/Search.tsx b/src/pages/Search.tsx
index 54816ff..0d85cb7 100644
--- a/src/pages/Search.tsx
+++ b/src/pages/Search.tsx
@@ -27,6 +27,7 @@ export default function Search(props: any) {
       .from('file')
       .select()
       .ilike('absolute_path', `%${search}%`)
+      .order('timestamp', { ascending: false })
       .range(paginationOffset, paginationOffset + numOfFilesToShow - 1)
     if (error) {
       console.error(error)
@@ -61,7 +62,7 @@ export default function Search(props: any) {
           <div className="flex flex-col items-center">
             <div className="flex flex-col gap-2">
               {files.map((file: FSTracerFile) => (
-                <div key={file.id} role="button" onClick={() => console.log("clocked file")}>
+                <div key={file.id} role="button">
                   <FileComponent file={file} />
                 </div>
               ))
-- 
cgit 1.4.1