From b2b2832a721aefd2e310edf0efa075a97f7a8463 Mon Sep 17 00:00:00 2001 From: Ian Holloway Date: Mon, 13 May 2024 23:24:08 -0700 Subject: [PATCH 1/2] fixed many errors related to main pages --- app/[dh_choice]/accordian.css | 32 ------ app/[dh_choice]/page.tsx | 188 ---------------------------------- app/[location]/page.tsx | 79 ++++++++++++++ app/page.tsx | 13 ++- backend/myapi/views.py | 8 +- backend/webscraper/food.py | 2 +- components/dh_bar_main.tsx | 24 +---- 7 files changed, 94 insertions(+), 252 deletions(-) delete mode 100644 app/[dh_choice]/accordian.css delete mode 100644 app/[dh_choice]/page.tsx create mode 100644 app/[location]/page.tsx diff --git a/app/[dh_choice]/accordian.css b/app/[dh_choice]/accordian.css deleted file mode 100644 index 696ea83..0000000 --- a/app/[dh_choice]/accordian.css +++ /dev/null @@ -1,32 +0,0 @@ -.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; -} - -.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; -} diff --git a/app/[dh_choice]/page.tsx b/app/[dh_choice]/page.tsx deleted file mode 100644 index 8db273c..0000000 --- a/app/[dh_choice]/page.tsx +++ /dev/null @@ -1,188 +0,0 @@ -"use client"; -import React, { useState, useEffect, useRef } from "react"; -import axios from "axios"; -import "./accordian.css"; -import Link from "next/link"; - -interface Food { - name: string; - allergies: Array; -} - -interface subCategory { - name: string; - foods: Array; -} - -interface Category { - name: string; - sub_categories: Array; -} - -interface DiningHall { - name: string; - categories: Category[]; -} - -function name_to_dh_index(dhName: string, dhArray: DiningHall[]) { - for (let i = 0; i < dhArray.length; i++) { - if (dhArray[i].name === dhName) { - return i; - } - } - return -1; -} - -function Accordion({ category, isOpen }) { - const [isOpenState, setIsOpenState] = useState(isOpen); - - useEffect(() => { - setIsOpenState(isOpen); - }, [isOpen]); - - return ( -
- - {isOpenState && ( -
- {category.sub_categories.map((sub_category, j) => ( -
-

{sub_category.name}

-
    - {sub_category.foods.map((food, k) => ( -
  • - {food.name} -
    • - ))} -
-
- ))} -
- )} -
- ); -} - -export default function Page({ searchParams }) { - const [categories, set_categories] = useState([]); - const [searchInput, setSearchInput] = useState(""); - const [filteredFoods, setFilteredFoods] = useState([]); - const [expandedCategory, setExpandedCategory] = useState(null); - const [noFoodsFound, setNoFoodsFound] = useState(false); - const [searchActive, setSearchActive] = useState(false); - const searchRef = useRef(null); - - useEffect(() => { - axios - .get("http://localhost:8000/myapi/locations/") - .then((response) => { - const dhs = response.data.locations; - const dh_index = name_to_dh_index(searchParams.name, dhs); - if (dh_index === -1) { - alert("Dining hall not found"); - return; - } - const a_dh = dhs[dh_index]; - set_categories(a_dh.categories); - if (Object.keys(a_dh.categories).length === 0) { - 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); - - useEffect(() => { - const timeOfDay = getTimeOfDay(); - const timeIndex = categories.findIndex( - (category) => category.name.toLowerCase() === timeOfDay, - ); - if (timeIndex !== -1) { - setExpandedCategory(timeIndex); - } - }, [categories]); - - const handleSearchInputChange = ( - event: React.ChangeEvent, - ) => { - 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 ( -
-
-

- {searchParams.name} -

- - {/* Search button */} -
- -
- - {/* Categories */} - {categories.map((category, i) => ( -
- -
- ))} -
-
- ); -} diff --git a/app/[location]/page.tsx b/app/[location]/page.tsx new file mode 100644 index 0000000..dee79b8 --- /dev/null +++ b/app/[location]/page.tsx @@ -0,0 +1,79 @@ +"use client"; +import { useState, useEffect, use } from "react"; +import axios from "axios"; + +interface Food { + name: string; + restrictions: Array; +} + +interface subCategory { + name: string; + foods: Array; +} + +interface Category { + name: string; + sub_categories: Array; +} + +interface Location { + name: string; + categories: Category[]; +} + +export default function Page({ params }: { params: { location: number } }) { + const [location, setLocation] = useState(); + + // fetch location data + useEffect(() => { + axios + .get("http://localhost:8000/myapi/locations/") + .then((response) => { + // Fetch the locations data + const locations: Location[] = response.data["locations"]; + + // get the location data + const location = locations[params.location]; + + // Set the location + setLocation(location); + }) + .catch((error) => { + console.log(error); + }); + }, []); + + return ( +
+
+

+ {location && location.name} +

+ {location && location.categories.map((category, i) => ( +
+

{category.name}

+ {category.sub_categories.map((subCategory, j) => ( +
+

{subCategory.name}

+ {subCategory.foods.map((food, k) => ( +
+

{food.name}

+
    + {food.restrictions.map((restrictions, l) => ( + // note the restrictions is an array of strings + // this should probably be displayed in a different way for the images +
  • {restrictions}
    • + ))} +
+
+ ))} +
+ ))} +
+ )) + } +
+
+ ); +} diff --git a/app/page.tsx b/app/page.tsx index b10e852..40d447a 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -4,7 +4,7 @@ import axios from "axios"; interface Food { name: string; - extra_data: Array; + restrictions: Array; } interface subCategory { @@ -17,7 +17,7 @@ interface Category { sub_categories: Array; } -interface DiningHall { +interface Location { name: string; categories: Category; } @@ -25,14 +25,13 @@ interface DiningHall { import DhBar from "@/components/dh_bar_main"; export default function Home() { - const [dhs, setDhs] = useState([]); + const [locations, setLocations] = useState([]); useEffect(() => { axios .get("http://localhost:8000/myapi/locations/") .then((response) => { - const dhs: DiningHall[] = response.data["locations"]; - setDhs(dhs); + setLocations(response.data["locations"]); }) .catch((error) => { console.log(error); @@ -65,9 +64,9 @@ export default function Home() {

    - {dhs.map((dh, i) => ( + {locations.map((location, i) => (
  • - +
    • ))}
diff --git a/backend/myapi/views.py b/backend/myapi/views.py index 40a0491..2e9b9ce 100644 --- a/backend/myapi/views.py +++ b/backend/myapi/views.py @@ -32,10 +32,10 @@ def get_locations(request): # check if the last update time doesn't exist if last_update is None: task = set_task(task_name="locations") - last_update = str_to_datetime(task["last_update"]) - - # get the current time and make it naive - time_now: datetime = timezone.now().replace(tzinfo=None) + time_now = str_to_datetime(task["last_update"]) + else: + # get the current time and make it naive + time_now: datetime = timezone.now().replace(tzinfo=None) print("Last time : ", last_update) print("Current time: ", time_now) diff --git a/backend/webscraper/food.py b/backend/webscraper/food.py index f46ce7e..3e9daa2 100644 --- a/backend/webscraper/food.py +++ b/backend/webscraper/food.py @@ -26,4 +26,4 @@ def __str__(self) -> str: def to_dict(self) -> dict: # foodObj = {self.name: self.allergies} - return {"name": self.name, self.name: self.allergies} + return {"name": self.name, "restrictions": self.allergies} diff --git a/components/dh_bar_main.tsx b/components/dh_bar_main.tsx index 59ffa47..c654593 100644 --- a/components/dh_bar_main.tsx +++ b/components/dh_bar_main.tsx @@ -1,30 +1,14 @@ "use client"; import Link from "next/link"; -function ButtonLink(props: any) { - return ( -
- - {props.name} - -
- ); -} - -export default function DhBar({ name }: { name: string }) { +export default function DhBar({ name, index }: { name: string, index: number }) { return (
-
+
  • - + {name} +
From 4903e27863740e60f89f7773848518d52f0c63f9 Mon Sep 17 00:00:00 2001 From: Ian Holloway Date: Mon, 13 May 2024 23:29:14 -0700 Subject: [PATCH 2/2] format all code --- README.md | 1 + app/[location]/page.tsx | 46 +++++++++++++++++++------------------- components/dh_bar_main.tsx | 11 ++++++--- 3 files changed, 32 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index e958fc0..f7c1f14 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,7 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). ## Formatting Code + - For Python code run `black backend/**/*.py` - For All other code run `bun run prettier * --write` diff --git a/app/[location]/page.tsx b/app/[location]/page.tsx index dee79b8..26376e5 100644 --- a/app/[location]/page.tsx +++ b/app/[location]/page.tsx @@ -50,29 +50,29 @@ export default function Page({ params }: { params: { location: number } }) {

{location && location.name}

- {location && location.categories.map((category, i) => ( -
-

{category.name}

- {category.sub_categories.map((subCategory, j) => ( -
-

{subCategory.name}

- {subCategory.foods.map((food, k) => ( -
-

{food.name}

-
    - {food.restrictions.map((restrictions, l) => ( - // note the restrictions is an array of strings - // this should probably be displayed in a different way for the images -
  • {restrictions}
    • - ))} -
-
- ))} -
- ))} -
- )) - } + {location && + location.categories.map((category, i) => ( +
+

{category.name}

+ {category.sub_categories.map((subCategory, j) => ( +
+

{subCategory.name}

+ {subCategory.foods.map((food, k) => ( +
+

{food.name}

+
    + {food.restrictions.map((restrictions, l) => ( + // note the restrictions is an array of strings + // this should probably be displayed in a different way for the images +
  • {restrictions}
    • + ))} +
+
+ ))} +
+ ))} +
+ ))}
); diff --git a/components/dh_bar_main.tsx b/components/dh_bar_main.tsx index c654593..e1d805c 100644 --- a/components/dh_bar_main.tsx +++ b/components/dh_bar_main.tsx @@ -1,14 +1,19 @@ "use client"; import Link from "next/link"; -export default function DhBar({ name, index }: { name: string, index: number }) { +export default function DhBar({ + name, + index, +}: { + name: string; + index: number; +}) { return (
  • - {name} - + {name}