Complete the implementation of frontend

* Improve the server load by slowing down requests.

.gitignore

@@ -0,0 +1 @@
+__pycache__/*

client/package.json

@@ -10,6 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.7.5",
+    "node-xlsx": "^0.24.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

client/src/App.tsx

@@ -1,7 +1,47 @@
+import { useEffect, useState } from 'react'
+import {FileContext} from './contexts/FileContext'
+import './index.css'
+import FrontPage from './pages/FrontPage'
+import ResultPage from './pages/ResultPage'
+import LoadingPage from './pages/LoadingPage'
+import { useRequest } from './hooks/useRequest'
 function App() {
+  const [file, setFile] = useState<File | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [data, setData] = useState(null)
+  useEffect(() => {
+    if (!file) {
+      return
+    }
+    const newBody = new FormData()
+      newBody.append("file", file as File)
+      setLoading(true);
+      fetch('http://localhost:8000/tasks', {method: 'POST', body: newBody}).then((res) => {
+        if (res.ok) {
+          setLoading(false)
+          res.json().then((data) => {
+            setData(data)
+          })
+        }}).catch((err) => {
+          console.log(err)
+        }).finally(() => {
+          setLoading(false)})
+  }, [file?.name])
+
+  if (loading) {
+    return <LoadingPage />
+  }
+  if (data) {
+    return <FileContext.Provider value={{file, setFile, taskId: data["task_id"]}}>
+      <ResultPage />
+    </FileContext.Provider>
+  }
 
   return (
-    <></>
+    <FileContext.Provider value={{file, setFile}}>
+      <FrontPage />
+    </FileContext.Provider>
+
   )
 }
 

client/src/components/Search.tsx

@@ -0,0 +1,18 @@
+import ArrowUpTrayIcon from "../icons/ArrowUpTray";
+import { FilterIcon } from "../icons/Filter";
+
+export default function Search({filterEnabled, filterIconPressed, uploadIconPressed}: {filterIconPressed: () => void; filterEnabled: boolean; uploadIconPressed: () => void}) {
+    return (
+        <div className="flex h-10 w-6/12 bg-neutral-900 hover:ring-1 hover:ring-neutral-400 focus-within:outline focus-within:outline-2 text-white rounded-3xl flex-row px-4">
+            <input className="h-full flex-1 bg-transparent text-white outline-none placeholder:text-neutral-400" type="search" placeholder="Search for a person..." />
+            <div className="flex gap-2">
+                <button onClick={filterIconPressed}>
+                    <FilterIcon filled={filterEnabled} className="h-full size-6 text-neutral-400 hover:text-white" />
+                </button>
+                <button onClick={uploadIconPressed}>
+                    <ArrowUpTrayIcon className="h-full size-6 text-neutral-400 hover:text-white" />
+                </button>
+            </div>
+        </div>
+    )
+}

client/src/components/Table.tsx

@@ -0,0 +1,25 @@
+export default function Table({headers, data}:{headers: string[], data: string[][]}) {
+    return (
+        <div className="flex bg-neutral-900 rounded-3xl outline outline-2 outline-neutral-400 gap-4 text-white">
+            <div className="overflow-x-auto">
+                <table className="table-auto divide-y-2 divide-neutral-400">
+                    <thead className="">
+                        <tr className="divide-x-2 divide-neutral-400">
+                            {headers.map((header, index) => <th key={index} className="px-4 py-2">{header}</th>)}
+                        </tr>
+                    </thead>
+                    <tbody className="divide-y-2 divide-neutral-800">
+                        {data.map((row, index) => (
+                            <tr key={index} className="odd:bg-neutral-950 divide-x-2 divide-neutral-800 even:bg-neutral-900">
+                                {row.map((cell, index) => <td key={index} className="px-4 py-2 w-fit max-w-md">{
+                                (cell.toString()).startsWith("http") ? <a href={`${cell}`} target="_blank" className="text-blue-500 hover:underline">{cell}</a> : cell
+                                }</td>)
+                            }
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    )
+}

client/src/contexts/FileContext.ts

@@ -0,0 +1,17 @@
+import { createContext, useContext } from "react";
+
+type FileContextType = {
+    file: File | null;
+    setFile: React.Dispatch<React.SetStateAction<File | null>>;
+    taskId: string | null;
+}
+
+export const FileContext = createContext<FileContextType | undefined>(undefined);
+
+export default function useFileContext() {
+    const context = useContext(FileContext);
+    if (!context) {
+        return null
+    }
+    return context;
+}

client/src/icons/ArrowDownTray.tsx

@@ -0,0 +1,18 @@
+export default function ArrowDownTray({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className={className}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"
+      />
+    </svg>
+  );
+}