Merge with main

.github/workflows/js-ts-formatting-check.yml

@@ -2,22 +2,17 @@ name: Prettier Check
 
 on:
   push: {}
-  pull_request: {}
 
 jobs:
   prettier:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@4
-
-      - name: Use latest Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 'node'  # Use 'node' for latest stable version
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v1
 
       - name: Install dependencies
-        run: npm ci  # Or yarn install if you use Yarn
+        run: bun install
 
       - name: Run Prettier check
-        run: npx prettier --check '**/*.{js,ts}'
+        run: bunx prettier --check '**/*.{js,ts,jsx,tsx}'

.github/workflows/python-formatting-check.yml

@@ -2,15 +2,14 @@ name: Black Formatting Check
 
 on:
   push: {}
-  pull_request: {}
 
 jobs:
   black:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
 
-      - uses: psf/black@stable  # Official Black action
+      - uses: psf/black@stable # Official Black action
         with:
-          options: "--check --verbose"  # Check for formatting issues only
-          src: '.'  # Path to your Python source code (optional)
+          options: "--check --verbose" # Check for formatting issues only
+          src: "." # Path to your Python source code (optional)

README.md

@@ -2,13 +2,13 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next
 
 ## Running Code
 
-* Make sure to have a private folder in the root directory that contains all secrets. (for now you can get this folder from our shared google drive folder) [link](https://drive.google.com/drive/folders/1oz7vGXPAI2S8vzYIpQ2ATTfjgqFHDD_p?usp=sharing)
-* Make sure that you have all the python dependencies installed in the requirements.txt
-* Make sure to install JS dependencies with `bun i` or `npm i`
-* you then will have to have two terminals to run backend and frontend
-* the backend is run with: `python backend/manage.py runserver`
-* the frontend is run one of the commands below in the Getting Started
-* Also, if you have nix installed with flakes you can skip most of the environment setup steps and use `nix develop` to setup your dev environment
+- Make sure to have a private folder in the root directory that contains all secrets. (for now you can get this folder from our shared google drive folder) [link](https://drive.google.com/drive/folders/1oz7vGXPAI2S8vzYIpQ2ATTfjgqFHDD_p?usp=sharing)
+- Make sure that you have all the python dependencies installed in the requirements.txt
+- Make sure to install JS dependencies with `bun i` or `npm i`
+- you then will have to have two terminals to run backend and frontend
+- the backend is run with: `python backend/manage.py runserver`
+- the frontend is run one of the commands below in the Getting Started
+- Also, if you have nix installed with flakes you can skip most of the environment setup steps and use `nix develop` to setup your dev environment
 
 ## Getting Started
 
@@ -24,8 +24,6 @@ pnpm dev
 bun dev
 ```
 
-
-
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
 You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.

app/[dh_choice]/accordian.css

@@ -1,33 +1,32 @@
-
 .accordion {
-    background-color: #ffffff;
-    border: transparent;
-  }
-  .accordion-item {
-    border: 1px solid #1321e1;
-    margin-bottom: 10px;
-  }
-  .accordion-button {
-    background-color: transparent; /* Transparent background */
-    color: #003c6c; /* Category font color */
-    padding: 10px;
-    font-size: 16px;
-    border-bottom: 1px solid #ffffff;
-  }
-  .accordion-collapse {
-    padding: 10px;
-  }
+  background-color: #ffffff;
+  border: transparent;
+}
+.accordion-item {
+  border: 1px solid #1321e1;
+  margin-bottom: 10px;
+}
+.accordion-button {
+  background-color: transparent; /* Transparent background */
+  color: #003c6c; /* Category font color */
+  padding: 10px;
+  font-size: 16px;
+  border-bottom: 1px solid #ffffff;
+}
+.accordion-collapse {
+  padding: 10px;
+}
 
-  .sub-category {
-    background-color: transparent; 
-    padding: 10px; 
-    border-radius: 8px;
-    border-bottom: 1px solid #fdc700;
-  }
+.sub-category {
+  background-color: transparent;
+  padding: 10px;
+  border-radius: 8px;
+  border-bottom: 1px solid #fdc700;
+}
 
-  .food-item {
-    background-color: #9c9c9c;
-    padding: 8px; 
-    margin-bottom: 4px;
-    border-radius: 4px;
-  }
+.food-item {
+  background-color: #9c9c9c;
+  padding: 8px;
+  margin-bottom: 4px;
+  border-radius: 4px;
+}

app/[dh_choice]/page.tsx

@@ -1,13 +1,12 @@
 "use client";
-
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import axios from "axios";
-import './accordian.css';
-
+import "./accordian.css";
+import Link from "next/link";
 
 interface Food {
   name: string;
-  allergies: Array<string>
+  allergies: Array<string>;
 }
 
 interface subCategory {
@@ -22,10 +21,10 @@ interface Category {
 
 interface DiningHall {
   name: string;
-  categories: Category;
+  categories: Category[];
 }
 
-function name_to_dh_index(dhName: string, dhArray: Array<DiningHall>) {
+function name_to_dh_index(dhName: string, dhArray: DiningHall[]) {
   for (let i = 0; i < dhArray.length; i++) {
     if (dhArray[i].name === dhName) {
       return i;
@@ -34,28 +33,32 @@ function name_to_dh_index(dhName: string, dhArray: Array<DiningHall>) {
   return -1;
 }
 
-function Accordion({ category }) {
-  const [isOpen, setIsOpen] = useState(false);
+function Accordion({ category, index, isOpen }) {
+  const [isOpenState, setIsOpenState] = useState(isOpen);
+
+  useEffect(() => {
+    setIsOpenState(isOpen);
+  }, [isOpen]);
 
   return (
     <div className="accordion border border-gray-200 rounded mb-2">
       <button
         className="accordion-button w-full text-left p-3 focus:outline-none"
-        onClick={() => setIsOpen(!isOpen)}
+        onClick={() => setIsOpenState(!isOpenState)}
       >
         {category.name}
-        <span className="float-right">
-          {isOpen ? "▲" : "▼"}
-        </span>
+        <span className="float-right">{isOpenState ? "▲" : "▼"}</span>
       </button>
-      {isOpen && (
+      {isOpenState && (
         <div className="accordion-collapse p-3">
           {category.sub_categories.map((sub_category, j) => (
             <div key={j} className="mb-2">
               <h4 className="sub-category">{sub_category.name}</h4>
               <ul className="pl-4">
                 {sub_category.foods.map((food, k) => (
-                  <li key={k} className="food-item">{food.name}</li>
+                  <li key={k} className="food-item">
+                    {food.name}
+                  </li>
                 ))}
               </ul>
             </div>
@@ -67,11 +70,17 @@ function Accordion({ category }) {
 }
 
 export default function Page({ searchParams }) {
-  const [categories, set_categories] = useState([]);
+  const [categories, set_categories] = useState<Category[]>([]);
+  const [searchInput, setSearchInput] = useState("");
+  const [filteredFoods, setFilteredFoods] = useState<Food[]>([]);
+  const [expandedCategory, setExpandedCategory] = useState<number | null>(null);
+  const [noFoodsFound, setNoFoodsFound] = useState(false);
+  const [searchActive, setSearchActive] = useState(false);
+  const searchRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     axios
-      .get("http://localhost:8000/myapi/dining-halls/")
+      .get("http://localhost:8000/myapi/locations/")
       .then((response) => {
         const dhs = response.data.locations;
         const dh_index = name_to_dh_index(searchParams.name, dhs);
@@ -85,13 +94,75 @@ export default function Page({ searchParams }) {
           alert("No food categories found");
           return;
         }
+        const timeOfDay = getTimeOfDay();
+        const timeIndex = a_dh.categories.findIndex(
+          (category) => category.name.toLowerCase() === timeOfDay,
+        );
+        if (timeIndex !== -1) {
+          setExpandedCategory(timeIndex);
+        }
       })
       .catch((error) => {
         console.log(error);
       });
   }, []);
-  console.log(categories)
+  console.log(categories);
+
+  useEffect(() => {
+    const timeOfDay = getTimeOfDay();
+    const timeIndex = categories.findIndex(
+      (category) => category.name.toLowerCase() === timeOfDay,
+    );
+    if (timeIndex !== -1) {
+      setExpandedCategory(timeIndex);
+    }
+  }, [categories]);
+
+  const handleSearchInputChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    setSearchInput(event.target.value);
+  };
+
+  function handleSearch() {
+    const dhChoice = searchParams.name;
+    const searchResultPageUrl = `/search?diningHall=${encodeURIComponent(searchParams.name)}`;
+    // Navigate to the search result page
+    window.location.href = searchResultPageUrl;
+    localStorage.setItem("diningHall", dhChoice);
+  }
+
+  function getTimeOfDay(): string {
+    const currentTime = new Date();
+    const currentHour = currentTime.getHours();
+
+    if (currentHour >= 7 && currentHour < 11) {
+      return "breakfast";
+    } else if (currentHour >= 11 && currentHour < 16) {
+      return "lunch";
+    } else if (currentHour >= 16 && currentHour < 19) {
+      return "dinner";
+    } else {
+      return "late night";
+    }
+  }
 
+  useEffect(() => {
+    const handleOutsideClick = (event: MouseEvent) => {
+      if (
+        searchRef.current &&
+        !searchRef.current.contains(event.target as Node)
+      ) {
+        setSearchActive(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleOutsideClick);
+
+    return () => {
+      document.removeEventListener("mousedown", handleOutsideClick);
+    };
+  }, []);
 
   return (
     <main>
@@ -102,18 +173,26 @@ export default function Page({ searchParams }) {
         </h1>
 
 
-
 
 
+
+
+        {/* Search button */}
+        <div>
+          <button onClick={handleSearch}>Search</button>
+        </div>
+
+        {/* Categories */}
         {categories.map((category, i) => (
           <div key={i}>
-            {/* <h3 className="text-lg">{category.name}</h3> */}
-            <div>
-              <Accordion category={category} />
-            </div>
+            <Accordion
+              category={category}
+              index={i}
+              isOpen={expandedCategory === i}
+            />
           </div>
         ))}
       </div>
     </main>
   );
-}
+}