[WIP] Connect Categories With Main Page and Adding Categories

.github/workflows/lint-check.yml

@@ -16,16 +16,6 @@ jobs:
       run: |
         npm ci
         npm run lint-check
-  frontend:
-    name: Frontend lint and style check
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
-    - working-directory: dfm-sideline-sidekick-app # Change this to the name of your frontend directory
-      run: |
-        npm ci
-        npm run lint-check
   admin-portal-frontend:
     name: Admin portal frontend lint and style check
     runs-on: ubuntu-latest

admin-portal-frontend/next.config.mjs

@@ -5,7 +5,6 @@ const nextConfig = {
   env: {
     API_URL: process.env.API_URL,
   },
-  output: "export",
   images: {
     unoptimized: true,
   },

admin-portal-frontend/src/app/pages/EmergencyFlow.tsx → admin-portal-frontend/src/app/add-emergency/page.tsx

@@ -1,8 +1,5 @@
 "use client";
 
-// import searchIcon from "../icons/ic_search_grey.png";
-// import Image from "next/image";
-import { useRouter } from "next/navigation";
 import React from "react";
 
 import { CreateEmergencyRequest, createEmergency } from "../../../emergencies";
@@ -58,7 +55,6 @@ const EmergencyFlow: React.FC = () => {
   const [acuteManagement, setAcuteManagement] = React.useState("");
   const [dispo, setDispo] = React.useState("");
   const [considerations, setConsiderations] = React.useState("");
-  const router = useRouter();
 
   const handlePublish = () => {
     //make an object of type CreateEmergencyRequest
@@ -120,7 +116,6 @@ const EmergencyFlow: React.FC = () => {
           setDispo("");
           setConsiderations("");
           //redirect to homepage/main page
-          router.push("/");
         } else {
           // You should always clearly inform the user when something goes wrong.
           // In this case, we're just doing an `alert()` for brevity, but you'd

admin-portal-frontend/src/app/api/Categories.ts

@@ -1,3 +1,5 @@
+import { updateVersion } from "./Version";
+
 export type Category = {
   _id: string;
   title: string;
@@ -44,6 +46,8 @@ export const deleteCategory = async (itemId: string) => {
     await fetch(url, {
       method: "DELETE",
     });
+
+    await updateVersion();
   } catch (error) {
     console.log("Error delete category", error);
   }
@@ -65,6 +69,35 @@ export const deletePage = async (itemId: string, title: string) => {
     await fetch(url, {
       method: "PUT",
     });
+
+    await updateVersion();
+  } catch (error) {
+    console.log("Error deleting page", error);
+  }
+};
+
+// Add a page (title) to a category
+export const addPage = async (itemId: string, title: string) => {
+  try {
+    if (!process.env.API_URL) {
+      throw new Error("API URL is not defined");
+    }
+
+    const url = `${process.env.API_URL}/categories/${itemId}`;
+
+    if (!url) {
+      throw new Error("API URL is not defined");
+    }
+
+    await fetch(url, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ title }),
+    });
+
+    await updateVersion();
   } catch (error) {
     console.log("Error deleting page", error);
   }

admin-portal-frontend/src/app/api/Version.ts

@@ -0,0 +1,15 @@
+export const updateVersion = async (): Promise<void> => {
+  try {
+    if (!process.env.API_URL) {
+      throw new Error("API URL is not defined");
+    }
+
+    const url = `${process.env.API_URL}/version`;
+
+    await fetch(url, {
+      method: "PUT",
+    });
+  } catch (error) {
+    console.log("Error updating version", error);
+  }
+};

admin-portal-frontend/src/app/category/page.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { useSearchParams } from "next/navigation";
+
+import { Category } from "../api/Categories";
+
+const CategoryDetail: React.FC = () => {
+  const searchParams = useSearchParams();
+  const categoryString = searchParams.get("category");
+  const category = categoryString ? (JSON.parse(categoryString) as Category) : null;
+  return (
+    <div>
+      <h1>Category Detail: {category.title}</h1>
+    </div>
+  );
+};
+
+export default CategoryDetail;

admin-portal-frontend/src/app/components/CategoryContainer.tsx

@@ -69,10 +69,10 @@
             setAllowEdits(!allowEdits);
           }}
         >
           <img src={(EditIcon as IconProps).src} alt="Edit" className="w-4 h-4" />
         </button>
         <button className="bg-[#E5EFF5] p-2 rounded-full border border-black">
           <img
             src={(TrashIcon as IconProps).src}
             alt="Delete"
             className="w-4 h-4"
@@ -110,7 +110,6 @@
         </tr>
 
         {categories
-          // gets only either emergency or general principle
           .filter((category) => category.type === type)
           .map((category: Category) => {
             return (

admin-portal-frontend/src/app/components/VerticalNavBar.tsx

@@ -1,16 +1,34 @@
 "use client";
 
-import React, { ReactNode } from "react";
+import React, { ReactNode, useEffect, useState } from "react";
 import "bootstrap/dist/css/bootstrap.css";
 import { Card } from "react-bootstrap";
 import Accordion from "react-bootstrap/Accordion";
+import Link from "next/link";
+
+import { Category, getAllCategories } from "../api/Categories";
 
 import GpComponent from "./GPComponent";
 import HomeComponent from "./HomeComponent";
 import SearchComponent from "./SearchComponent";
 import styles from "./VerticalNavBarStyles";
 
 const VerticalNavBar: React.FC = () => {
+  const [categories, setCategories] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const fetchedCategories = await getAllCategories();
+        setCategories(fetchedCategories as never);
+      } catch (error) {
+        console.log("Fetch categories failed.");
+      }
+    };
+
+    void fetchData();
+  }, [categories]);
+
   type CustomAccordionProps = {
     children: ReactNode;
   };
@@ -24,8 +42,6 @@
   return (
     <div style={styles.container}>
       <nav style={styles.nav}>
-        <div></div>
-
         <div style={styles.accordionContainer}>
           <Accordion defaultActiveKey="0">
             <a href="#homepagelink" style={{ textDecoration: "none" }}>
@@ -67,13 +83,46 @@
                     {/* <Image src={gpIcon} alt={'General Principles'} style={styles.gpIcon} /> */}
                     <GpComponent />
                   </div>
-                  General Principles
+                  <a
+                    href="/general-principles"
+                    style={{ textDecoration: "none", color: "var(--bs-accordion-btn-color)" }}
+                  >
+                    General Principles
+                  </a>
                 </div>
               </Accordion.Header>
               <Accordion.Body>
                 <ul style={{ listStyleType: "none" }}>
-                  <li style={styles.listItem}>All</li>
-                  <li style={styles.listItem}>Emergency Action Plan</li>
+                  <li style={styles.listItem}>
+                    <Link
+                      href={"/general-principles/"}
+                      style={{
+                        textDecoration: "none",
+                        color: "var(--bs-accordion-btn-color)",
+                        fontWeight: "bold",
+                      }}
+                    >
+                      All
+                    </Link>
+                  </li>
+                  {categories.map((category: Category) => (
+                    <li key={category._id}>
+                      {/* Generate unique link for each category */}
+                      <Link
+                        href={{
+                          pathname: "/category",
+                          query: { category: JSON.stringify(category) },
+                        }}
+                        style={{
+                          textDecoration: "none",
+                          color: "var(--bs-accordion-btn-color)",
+                        }}
+                      >
+                        {category.title}
+                      </Link>
+                    </li>
+                  ))}
+                  {/* <li style={styles.listItem}>Emergency Action Plan</li>
                   <li style={styles.listItem}>Trauma Centers</li>
                   <li style={styles.listItem}>Burn Centers</li>
                   <li style={styles.listItem}>Stroke Centers</li>
@@ -83,7 +132,7 @@
                   <li style={styles.listItem}>Muscle Injuries</li>
                   <li style={styles.listItem}>Ligament Injuries</li>
                   <li style={styles.listItem}>Dislocations/Sublaxations</li>
-                  <li style={styles.listItem}>Fractures</li>
+                  <li style={styles.listItem}>Fractures</li> */}
                 </ul>
               </Accordion.Body>
             </Accordion.Item>

admin-portal-frontend/src/app/components/VerticalNavBarStyles.tsx

@@ -1,7 +1,7 @@
 const VerticalNavBarStyles = {
   container: {
     display: "flex",
-    height: "100vh",
+    height: "100%",
   },
   nav: {
     width: "350px",

admin-portal-frontend/src/app/layout.tsx

@@ -1,13 +1,13 @@
-import { Inter } from "next/font/google";
-
 import type { Metadata } from "next";
-import "./globals.css";
 
-const inter = Inter({ subsets: ["latin"] });
+import "./globals.css";
+import HorizontalNavBar from "./components/HorizontalNavbar";
+import VerticalNavBar from "./components/VerticalNavBar";
+import styles from "./pageStyles";
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Sideline Sidekick Admin",
+  description: "Admin portal for Sideline Sidekick App",
 };
 
 export default function RootLayout({
@@ -17,7 +17,20 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <head></head>
+      <body>
+        <div>
+          <div style={styles.horizontalNavBar}>
+            <HorizontalNavBar />
+          </div>
+          <div className="flex flex-row inline-block">
+            <div style={styles.verticalNavBar}>
+              <VerticalNavBar />
+            </div>
+            {children}
+          </div>
+        </div>
+      </body>
     </html>
   );
 }

admin-portal-frontend/src/app/page.tsx

@@ -1,20 +1,11 @@
 import React from "react";
 
-import HorizontalNavBar from "./components/HorizontalNavbar";
-import VerticalNavBar from "./components/VerticalNavBar";
-import styles from "./pageStyles";
-
-const AnotherPage: React.FC = () => {
+const Home: React.FC = () => {
   return (
     <div>
-      <div style={styles.verticalNavBar}>
-        <VerticalNavBar />
-      </div>
-      <div style={styles.horizontalNavBar}>
-        <HorizontalNavBar />
-      </div>
+      <h1>Home</h1>
     </div>
   );
 };
 
-export default AnotherPage;
+export default Home;

admin-portal-frontend/src/app/pageStyles.tsx

@@ -8,10 +8,9 @@ type Styles = {
 
 const styles: Styles = {
   verticalNavBar: {
-    position: "fixed",
+    position: "relative",
     top: 0,
     left: 0,
-    width: "100%",
     zIndex: 0,
   },
   horizontalNavBar: {

backend/controllers/versionController.js

@@ -24,6 +24,8 @@ export const updatedVersion = async (req, res) => {
       res.status(404).json({ message: "Version not found" });
     }
 
+    console.log("Updated Version: ", updatedVersion);
+
     // Respond with the updated version data
     res.status(200).json(updatedVersion);
   } catch (error) {