Pages: File: Have path be based on fileID instead of path

3 files changed, 37 insertions, 21 deletions

diff --git a/src/App.tsx b/src/App.tsx
index 8d5ebb4..98f216c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -43,8 +43,8 @@ function App() {
             <Route path="/logout" element={
               <Logout supabase={supabase} session={session} setSession={setSession} timeframe={timeframe} setTimeframe={setTimeframe} />
             } />
-            <Route path="/file/:filepath" element={
-              <File supabase={supabase} session={session} setSession={setSession} timeframe={timeframe} setTimeframe={setTimeframe} />
+            <Route path="/file/:fileID" element={
+              <File supabase={supabase} session={session} setSession={setSession} />
             } />
             <Route path="*" element={<p>notfound</p>} />
           </Routes>
diff --git a/src/components/Other/FSTracerFile.tsx b/src/components/Other/FSTracerFile.tsx
index 61c8e35..2bc58b4 100644
--- a/src/components/Other/FSTracerFile.tsx
+++ b/src/components/Other/FSTracerFile.tsx
@@ -6,7 +6,7 @@ interface FileComponentProps {
 
 export default function FileComponent(props: FileComponentProps) {
 	return (
-		<a href={`/file/${encodeURIComponent(props.file.absolute_path)}`}>
+		<a href={`/file/${encodeURIComponent(props.file.id)}`}>
 			<p className="underline">file: {props.file.absolute_path}</p>
 		</a>
 	)
diff --git a/src/pages/File.tsx b/src/pages/File.tsx
index bbbdac2..f9f1a73 100644
--- a/src/pages/File.tsx
+++ b/src/pages/File.tsx
@@ -5,13 +5,12 @@ import { FSTracerFile } from "../lib/types";
 
 export default function File(props: any) {
   const navigate = useNavigate()
-  let { filepath } = useParams();
+  let { fileID } = useParams();
 
-  console.log("FILEPATH: ", filepath)
+  console.log("FILEID: ", fileID)
 
   const [files, setFiles] = useState([])
-
-  const latestFile = files[0] as FSTracerFile | undefined
+  const [file, setFile] = useState<FSTracerFile>()
 
   const maxFilesToShow = 20;
 
@@ -22,19 +21,36 @@ export default function File(props: any) {
   }, [props.session])
 
   const fetchFiles = useCallback(async () => {
-    console.log("FETCHIN FILES")
-    const { data, error } = await props.supabase
+    console.log("FETCHING FILE")
+    const { data: data1, error: err1 } = await props.supabase
       .from('file')
       .select()
-      .eq('absolute_path', filepath)
+      .eq('id', fileID)
+    if (err1) {
+      console.error(err1)
+      return
+    }
+
+    if (data1.length === 0) {
+      return
+    }
+
+    let fetchedFile = data1[0] as FSTracerFile;
+    setFile(fetchedFile)
+
+    console.log("FETCHIN FILES", JSON.stringify(fetchedFile))
+    const { data: data2, error: err2 } = await props.supabase
+      .from('file')
+      .select()
+      .eq('absolute_path', fetchedFile.absolute_path)
       .order('timestamp', { ascending: false })
       .range(0, maxFilesToShow)
-    if (error) {
-      console.error(error)
+    if (err2) {
+      console.error(err2)
       return
     }
-    console.log("RAW FILES: ", data)
-    setFiles(data.map((file: any) => {
+    console.log("RAW FILES: ", data2)
+    setFiles(data2.map((file: any) => {
       return file as File
     }))
     console.log("FETCHED FILES")
@@ -42,7 +58,7 @@ export default function File(props: any) {
 
   useEffect(() => {
     fetchFiles()
-  }, [])
+  }, [props.supabase])
 
   const formatFilePathAsName = (filepath: string) => {
     const parts = filepath.split('/')
@@ -54,22 +70,22 @@ export default function File(props: any) {
       <div className="flex h-screen">
         <SideBar />
         <main className="flex-1 overflow-y-auto my-4">
-          {filepath && latestFile ? <>
+          {fileID && file !== undefined ? <>
             <div className="flex flex-col items-center">
               {
-                formatFilePathAsName(filepath)
+                formatFilePathAsName(file.absolute_path)
               }
             </div>
             <div className="mt-5 flex flex-col items-center">
               <div className="block border rounded shadowpy-5 px-5 bg-blue">
-                {latestFile && <FileInfo file={latestFile} />}
+                <FileInfo file={file} />
               </div>
             </div>
             <div className="mt-5 flex flex-col items-center">
               <div className="block border rounded shadow py-5 px-5 bg-blue">
-                {files.map((file: FSTracerFile) => (
-                  <div key={file.id}>
-                    <p>{file.absolute_path} - {file.timestamp}</p>
+                {files.map((currFile: FSTracerFile) => (
+                  <div key={currFile.id}>
+                    <p>{currFile.absolute_path} - {currFile.timestamp} {currFile.id === file.id && "*"}</p>
                   </div>
                 ))
                 }