From 74c086504be94d95e15d2187e883f781b9fd942e Mon Sep 17 00:00:00 2001
From: Manuel Palenzuela Merino <manuel.palenzuela@datadoghq.com>
Date: Thu, 11 Jul 2024 11:04:21 +0200
Subject: Pages: Search: Add search page

---
 src/App.tsx          |  4 +++
 src/pages/Login.tsx  |  4 +--
 src/pages/Search.tsx | 81 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 87 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/Search.tsx

(limited to 'src')

diff --git a/src/App.tsx b/src/App.tsx
index 739a64a..b77acbc 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,6 +9,7 @@ import Logout from './pages/Logout';
 import Recent from './pages/Recent';
 import { useLocalStorage } from "@uidotdev/usehooks";
 import { useState } from "react";
+import Search from "./pages/Search";
 
 const supabase = createClient('https://slpoocycjgqsuoedhkbn.supabase.co', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InNscG9vY3ljamdxc3VvZWRoa2JuIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTUyMDU0MjUsImV4cCI6MjAzMDc4MTQyNX0.xZYRTRN65rlms1Hb96IBAQvw3EGtMzUxlGPP5TVey34')
 
@@ -32,6 +33,9 @@ function App() {
             <Route path="/recent" element={
               <Recent supabase={supabase} session={session} timeframe={timeframe} setTimeframe={setTimeframe} />
             } />
+            <Route path="/search" element={
+              <Search supabase={supabase} session={session} timeframe={timeframe} setTimeframe={setTimeframe} />
+            } />
             <Route path="/login" element={
               <Login supabase={supabase} session={session} setSession={setSession} timeframe={timeframe} setTimeframe={setTimeframe} />
             } />
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index aa3d284..bde52de 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -36,11 +36,11 @@ export default function Login(props: any) {
             <h1 className="text-4xl text-bold font-sans antialiased text-blue-700 tracking-wide">fs-tracer</h1>
           </div>
 
-          <div className="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
+          <div className="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow">
             <div className="mx-7 my-5">
               <h5 className="mb-2 text-2xl font-bold font-sans antialiased text-gray-900">Hello!</h5>
               <div className="flex flex-row items-center gap-2">
-                <span className="font-normal text-gray-700 dark:text-gray-400" >Continue with</span>
+                <span className="font-normal text-gray-700" >Continue with</span>
                 <span>
                   <GoogleOAuthProvider clientId="952965459060-nrnrsdoq22mf646vfa72hk410pvdda5q.apps.googleusercontent.com">
                     <GoogleLogin
diff --git a/src/pages/Search.tsx b/src/pages/Search.tsx
new file mode 100644
index 0000000..063da14
--- /dev/null
+++ b/src/pages/Search.tsx
@@ -0,0 +1,81 @@
+import { useEffect, useState, useCallback } from "react"
+
+import { useNavigate } from "react-router-dom"
+import SideBar from "../components/Sidebar/Sidebar"
+
+export default function Search(props: any) {
+  const navigate = useNavigate()
+
+  const numOfFilesToShow = 20;
+
+  const [files, setFiles] = useState([])
+  const [search, setSearch] = useState("")
+
+  const [paginationOffset, setPaginationOffset] = useState(0);
+
+  useEffect(() => {
+    if (!props.session) {
+      navigate('/login')
+    }
+  }, [props.session])
+
+  const fetchFiles = useCallback(async () => {
+    console.log("FETCHIN FILES, pagination: ", paginationOffset, " search: ", search)
+    const { data, error } = await props.supabase
+      .from('file')
+      .select()
+      .ilike('absolute_path', `%${search}%`)
+      .range(paginationOffset, paginationOffset + numOfFilesToShow - 1)
+    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, paginationOffset, search])
+
+  useEffect(() => {
+    fetchFiles()
+  }, [paginationOffset])
+
+  return (
+    <>
+      <div className="flex h-screen">
+        <SideBar currentPage="Recent" />
+        <main className="flex-1 overflow-y-auto my-4">
+          <div className="flex flex-col items-center">
+            <label>filename</label>
+            <input placeholder="filename" onChange={e => setSearch(e.target.value)} className="block bg-white w-1/2 rounded">
+            </input>
+          </div>
+          <div className="my-4 flex flex-col items-center">
+            <button className="w-20 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onClick={() => fetchFiles()}>
+              search
+            </button>
+          </div>
+          <div className="flex flex-col items-center">
+            <div className="flex flex-col gap-2">
+              {files.map((file: any) => (
+                <div key={file.id} role="button" onClick={() => console.log("clocked file")}>
+                  <p className="underline">file: {file.absolute_path}</p>
+                </div>
+              ))
+              }
+            </div>
+          </div>
+          <div className="flex flex-row gap-2 mt-4">
+            <button className="ml-7 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onClick={() => setPaginationOffset(paginationOffset + -numOfFilesToShow)}>
+              prev
+            </button>
+            <button className="mr-7 ml-auto bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onClick={() => setPaginationOffset(paginationOffset + numOfFilesToShow)}>
+              next
+            </button>
+          </div>
+        </main>
+      </div>
+    </>
+  )
+}
-- 
cgit 1.4.1