Pages: Home: Show most common files component

2 files changed, 44 insertions, 23 deletions

diff --git a/src/components/MostEditedFiles.tsx b/src/components/MostEditedFiles.tsx
new file mode 100644
index 0000000..dc01c2e
--- /dev/null
+++ b/src/components/MostEditedFiles.tsx
@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+import { FSTracerFile } from '../lib/types';
+import FileComponent from './Other/FSTracerFile';
+
+export default function MostEditedFiles(props: any) {
+  const [data, setData] = useState([] as any);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const timeframeEnd = props.timeframe.end.toDate();
+      const timeframeStart = props.timeframe.start.toDate();
+      timeframeStart.setHours(timeframeStart.getHours() - 12)
+      const numDatapoints = 12;
+
+      // TODO: Actually get the max edited files
+      const { data: rawData } = await props.supabase
+        .from('file')
+        .select().gte('timestamp', timeframeStart.toISOString()).lte('timestamp', timeframeEnd.toISOString())
+        .limit(numDatapoints);
+      console.log(rawData)
+
+      if (rawData.length === 0) {
+        return;
+      }
+
+      console.log("RAWDATA xdd: ", rawData);
+
+      setData(rawData);
+    }
+    fetchData()
+  }, [props.timeframe])
+
+  console.log("DATA: ", data);
+
+  return (
+    <ol>
+      {data.map((file: FSTracerFile) => {
+        return <li key={file.id}><FileComponent file={file} /></li>
+      })}
+    </ol>
+  )
+}
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 3d4d2c7..82b2c86 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -5,35 +5,17 @@ import SideBar from "../components/Sidebar/Sidebar"
 import LineGraph from "../components/Graphs/LineGraph"
 import TimePicker from "../components/TimePicker/TimePicker"
 import DonutChart from "../components/Graphs/DonutChart"
+import MostEditedFiles from "../components/MostEditedFiles"
 
 export default function Home(props: any) {
   const navigate = useNavigate()
 
-  const [_, 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">
@@ -66,10 +48,7 @@ export default function Home(props: any) {
               <div className="w-1/2 flex flex-col">
                 <p className="text-center">Most edited files</p>
                 <div className="flex-grow block bg-white-500 border border-gray-200 rounded-lg shadow">
-                  <ol>
-                    <li>File 1</li>
-                    <li>File 2</li>
-                  </ol>
+                  <MostEditedFiles supabase={props.supabase} timeframe={props.timeframe} />
                 </div>
               </div>
             </div>