wip: fix routing

Author: liminalities

web/src/App.tsx

@@ -1,12 +1,10 @@
-import { useState } from "react";
 import { Route, Routes, BrowserRouter } from "react-router-dom";
 import "./App.css";
 import CASCallback from "./auth/CASCallback";
 import ProtectedRoute from "./auth/ProtectedRoute";
 import UploadPage from "./pages/UploadPage";
 import ModifyPage from "./pages/ModifyPage";
 import Nav from "./components/nav-bar/nav-bar";
-import { Card } from "@nextui-org/react";
 import EditEntry from "./pages/edit-entry";
 
 function App() {
@@ -27,7 +25,9 @@ function App() {
                         // </ProtectedRoute>
                         <ModifyPage />
                     }
-                ></Route>
+                >
+                    <Route path="edit-entry" element={<EditEntry paperData={[]} />} />
+                </Route>
                 {/* Protected Routes */}
                 <Route
                     path="/upload"
@@ -40,11 +40,13 @@ function App() {
                 <Route
                     path="/modify"
                     element={
-                        <ProtectedRoute>
+                        // <ProtectedRoute>
                             <ModifyPage />
-                        </ProtectedRoute>
+                        // </ProtectedRoute>
                     }
-                ></Route>
+                >
+                    <Route path="edit-entry" element={<EditEntry paperData={[]}/>} />
+                </Route>
             </Routes>
         </BrowserRouter>
     );

web/src/components/paper-sliver.tsx

@@ -1,3 +1,4 @@
+import { Link } from "react-router-dom";
 import "../App.css";
 import { PaperData } from "../types/types";
 
@@ -22,9 +23,12 @@ export default function PaperSliver({ paper, index }: PaperSliverProp) {
                 <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>
+                <Link to="/edit-entry" state={{paperData: paper}}>
+                    <button className="bg-usask-green text-[#DADADA]">
+                        Modify Entry
+                    </button>
+                </Link>
+                
             </div>
         </div>
     );

web/src/pages/edit-entry.tsx

@@ -1,19 +1,40 @@
 import { HiArrowLeft } from "react-icons/hi";
-import {Accordion, AccordionItem} from "@nextui-org/react";
+import {Accordion, AccordionItem, Button} from "@nextui-org/react";
+import { useState } from "react";
+import { PaperData } from "../types/types";
 
-export default function EditEntry() {
+type PaperProps = {
+ paperData: PaperData[];
+}
+
+export default function EditEntry({ paperData }: PaperProps ) {
     const defaultContent =
     "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
 
+    const [papers] = useState<PaperData[]>(paperData ?? []);
+    const unresolvedConflicts: string[] = [];
+
+    if (papers.length > 1) {
+        // if all 3 outputs are the same, add nothing to the unresolved conflicts
+        // if any of 3 outputs are not the same, go through each property 
+        if (JSON.stringify(papers[0]) === JSON.stringify(papers[1]) &&
+            JSON.stringify(papers[0]) === JSON.stringify(papers[2]) && 
+            JSON.stringify(papers[1]) === JSON.stringify(papers[2])) {
+                console.log('hello')
+            }
+    }
+
     return (
-        <div className="flex flex-col">
-            <div>
-                <HiArrowLeft />
-                {/* TODO: get data of paper */}
+        <div className="flex flex-col gap-2 p-4">
+            <div className="flex flex-row gap-4">
+                <Button className="bg-usask-green" variant="flat">
+                    <HiArrowLeft color="white"/>
+                </Button>
+                <span> paper name placeholder </span>
             </div>
-            <div className="flex flex-row justify-between">
-                <div>
-                    <Accordion>
+            <div className="flex flex-row justify-between gap-3">
+                <div className="grow basis-1/3">
+                    <Accordion variant="light" isCompact selectionMode="multiple">
                         <AccordionItem key="1" aria-label="Accordion 1" title="hellooooooooooooooooooooooooooooooooooooooooooo">
                             {defaultContent}
                         </AccordionItem>
@@ -25,8 +46,14 @@ export default function EditEntry() {
                         </AccordionItem>
                     </Accordion>
                 </div>
-                <div className="border-solid border-2 border-slate-900 rounded">
-                    <p> this is some test content for the page</p>
+                <div className="border-solid border-2 border-slate-900 rounded grow">
+                    <p>Unresolved Conflicts</p>
+
+                    { papers.length > 1 ? (
+                        <span>
+                            { unresolvedConflicts.map((conflict) => conflict)}
+                        </span>
+                    ) : (<span></span>)}
                 </div>
             </div>
         </div>