Added fetch function to modify papers page as well as created sliver component

Author: ConnerWithAnE

web/src/components/nav-bar/search-bar.tsx

@@ -2,20 +2,21 @@ import { ChangeEvent, useState } from "react";
 import { HiSearch } from "react-icons/hi";
 import "../../App.css";
 
-type SearchBarProps = {
+interface SearchBarProps {
+    onSearch: (value: string) => void // Callback to send out search value
     className?: string;
 };
 
-export default function SearchBar({ className }: SearchBarProps) {
+export default function SearchBar({ className, onSearch }: SearchBarProps) {
     const [query, setQuery] = useState<string>("");
 
     const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
         setQuery(e.target.value);
+        console.log(query)
     };
 
     const handleSearch = () => {
-        console.log(`Searching for: ${query}`);
-        // Need to implement search function
+        onSearch(query);
     };
 
     const handleKeyPress = (e: any) => {
@@ -34,13 +35,13 @@ export default function SearchBar({ className }: SearchBarProps) {
                 value={query}
                 onChange={handleInputChange}
                 onKeyDown={handleKeyPress}
-                className="py-1 rounded-lg bg-[#D9D9D9] placeholder-[#909090] h-8 pl-3 w-full"
+                className="py-1 rounded-lg bg-[#D9D9D9] focus:outline-none placeholder-[#909090] h-8 pl-3 w-full"
             />
             <button
                 onClick={handleSearch}
                 className="bg-usask-green rounded-lg h-8 p-1"
             >
-                <HiSearch size={24} color="#CDCDCD" />
+                <HiSearch size={24} className="text-[#CDCDCD]" />
             </button>
         </div>
     );

web/src/components/paper-sliver.tsx

@@ -0,0 +1,32 @@
+import "../App.css";
+import { TempPaperData } from "../pages/ModifyPage";
+import { PaperData } from "../types/types";
+
+// TempPaperData is for testing only
+type PaperSliverProp = {
+    paper: TempPaperData;
+    index: number;
+};
+
+export default function PaperSliver({ paper, index }: PaperSliverProp) {
+    return (
+        <div
+            className={`${
+                index % 2 ? "bg-[#DADADA]" : "bg-[#EEEEEE]"
+            } grid grid-cols-6 justify-between p-[3%]`}
+        >
+            <div className="col-span-1">
+                <div className="text-md">{paper.id}.</div>
+            </div>
+            <div className="col-span-3">
+                <div className="text-left text-lg">{paper.paper_name}</div>
+                <div className="text-xs text-left">{paper.author}</div>
+            </div>
+            <div className="col-span-2 flex items-center justify-center">
+                <button className="bg-usask-green text-[#DADADA]">
+                    Modify Entry
+                </button>
+            </div>
+        </div>
+    );
+}

web/src/pages/ModifyPage.tsx

@@ -1,14 +1,85 @@
 import "../App.css";
 import { Card } from "@nextui-org/react";
 import SearchBar from "../components/nav-bar/search-bar";
+import { useEffect, useState } from "react";
+import { PaperData } from "../types/types";
+import PaperSliver from "../components/paper-sliver";
+
+// For testing only. All instances of 'TempPaperData' will be replaced with 'PaperData'
+export type TempPaperData = {
+    id: number;
+    paper_name: string;
+    author: string[];
+};
 
 export default function ModifyPage() {
+    const [papers, setPapers] = useState<TempPaperData[]>([
+        {
+            id: 1,
+            paper_name:
+                "SEE In-Flight Data for two Static 32KB Memories on High Earth Orbit",
+            author: [
+                "S. Duzellier",
+                "S. Bourdarie",
+                "R. Velazco",
+                "B. Nicolescu",
+                "R. Ecoffet",
+            ],
+        },
+    ]);
+
+    const fetchPapers = async (search: string) => {
+        const token = localStorage.getItem("jwtToken");
+
+        try {
+            const response = await fetch(
+                "https://starr-lab-server.usask.ca/api/adminRequest/getFullPapers",
+                {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                        Authorization: `Bearer ${token}`,
+                    },
+                    body: JSON.stringify({ search }),
+                }
+            );
+            if (response.ok) {
+                const result = await response.json();
+                setPapers(result as PaperData[]);
+            } else {
+                console.error(`Failed to fetch papers: ${response.status}`);
+            }
+        } catch (error) {
+            console.error(`Error fetching papers: ${error}`);
+            throw error;
+        }
+    };
+
+    // Fetch papers when the page first loads (with an empty search)
+    useEffect(() => {
+        fetchPapers("");
+    }, []);
+
+    // This is setup to only fetch papers when the search button is clicked,
+    // we could make it auto update easily instead tho
+    const handleSearch = (value: string) => {
+        //console.log(`Search value: ${value}`);
+        fetchPapers(value);
+    };
+
     return (
         <div className="flex flex-col items-center justify-center">
             <div className="bg-[#F4F4F4] w-[70%]">
-                <div className="py-[4%] text-4xl">Modify Paper Data</div>
-                <SearchBar className="pb-4" />
-                <div className="w-full h-8 bg-[#D4D4D4] drop-shadow-md"></div>
+                <div>
+                    <div className="py-[4%] text-4xl">Modify Paper Data</div>
+                    <SearchBar className="pb-4" onSearch={handleSearch} />
+                    <div className="w-full h-8 bg-[#D4D4D4] drop-shadow-md"></div>
+                </div>
+                <div>
+                    {papers.map((paper: TempPaperData, index: number) => (
+                        <PaperSliver paper={paper} index={index} />
+                    ))}
+                </div>
             </div>
         </div>
     );

web/src/types/types.ts

@@ -0,0 +1,17 @@
+export type PaperData = {
+  id: number;
+  paper_name: string;
+  year: number;
+  author: string[];
+  part_no: string;
+  type: string;
+  manufacturer: string;
+  testing_location: TestLocation;
+  testing_type: Testing;
+  data_type: number;
+}
+
+export type TestLocation = "Terrestrial" | "Flight";
+
+// Type to ensure testing types are consistent
+export type Testing = "SEE" | "TID" | "DD" | "OTHER";