From 709689d57b580bd8756e5d004d84cd9523f860d8 Mon Sep 17 00:00:00 2001 From: Akshat Tiwari Date: Sun, 5 May 2024 17:48:23 -0700 Subject: [PATCH 01/11] Added slightly buggy search bar to each dining hall page that filters each food Bug: Automatically opens the breakfast category if the searched food is in the breakfast category --- app/[dh_choice]/page.tsx | 101 +++++++++++++++++++++++++++++++++------ 1 file changed, 86 insertions(+), 15 deletions(-) diff --git a/app/[dh_choice]/page.tsx b/app/[dh_choice]/page.tsx index 021dfc1..5d0aeb2 100644 --- a/app/[dh_choice]/page.tsx +++ b/app/[dh_choice]/page.tsx @@ -1,10 +1,8 @@ "use client"; - import React, { useState, useEffect } from "react"; import axios from "axios"; import './accordian.css'; - interface Food { name: string; } @@ -21,10 +19,12 @@ interface Category { interface DiningHall { name: string; - categories: Category; + categories: Category[]; } -function name_to_dh_index(dhName: string, dhArray: Array) { + + +function name_to_dh_index(dhName: string, dhArray: DiningHall[]) { for (let i = 0; i < dhArray.length; i++) { if (dhArray[i].name === dhName) { return i; @@ -33,21 +33,25 @@ function name_to_dh_index(dhName: string, dhArray: Array) { return -1; } -function Accordion({ category, index }) { - const [isOpen, setIsOpen] = useState(false); +function Accordion({ category, index, isOpen }) { + const [isOpenState, setIsOpenState] = useState(isOpen); + + useEffect(() => { + setIsOpenState(isOpen); + }, [isOpen]); return (
- {isOpen && ( + {isOpenState && (
{category.sub_categories.map((sub_category, j) => (
@@ -65,8 +69,13 @@ function Accordion({ category, index }) { ); } + export default function Page({ searchParams }) { - const [categories, set_categories] = useState([]); + const [categories, set_categories] = useState([]); + const [searchInput, setSearchInput] = useState(''); + const [filteredFoods, setFilteredFoods] = useState([]); + const [expandedCategory, setExpandedCategory] = useState(null); + const [noFoodsFound, setNoFoodsFound] = useState(false); useEffect(() => { axios @@ -90,19 +99,81 @@ export default function Page({ searchParams }) { }); }, []); + const handleSearchInputChange = (event: React.ChangeEvent) => { + setSearchInput(event.target.value); + }; + + const handleSearch = () => { + const allFoods: Food[] = categories.reduce((accumulator: Food[], currentCategory: Category) => { + return accumulator.concat(currentCategory.sub_categories.flatMap(subCategory => subCategory.foods)); + }, []); + + const filtered = allFoods + .filter(food => food.name.toLowerCase().includes(searchInput.toLowerCase())) + .filter((value, index, self) => { + return self.findIndex(f => f.name === value.name) === index; + }); + + setFilteredFoods(filtered); + setNoFoodsFound(filtered.length === 0); + if (filtered.length > 0) { + setExpandedCategory(0); + } + }; + + function getCategoryName(food: Food): string { + for (const category of categories) { + for (const subcategory of category.sub_categories) { + if (subcategory.foods.some(f => f.name === food.name)) { + return category.name; + } + } + } + return ""; + } + return (

{searchParams.name}

+ + {/* Search bar */} +
+ + +
+ + {/* Search results */} + {filteredFoods.length > 0 && ( +
+

Search Results:

+
    + {filteredFoods.map((food, index) => ( +
  • {food.name} - {getCategoryName(food)}
    • + ))} +
+
+ )} + + {/* No foods found message */} + {noFoodsFound && ( +
+

No foods found at this dining hall.

+
+ )} + + {/* Categories */} {categories.map((category, i) => (
- {/*

{category.name}

*/} -
- -
+
))}
); -} \ No newline at end of file +} From 56c3ca271aa1f7cbd9048ff5d45ef1c1f420849d Mon Sep 17 00:00:00 2001 From: Akshat Tiwari Date: Sun, 5 May 2024 18:01:37 -0700 Subject: [PATCH 02/11] Updating search bar for main page, but slightly buggy Bug: Only displaying one result for some reason - i think handle search is deleting duplicates. --- app/page.tsx | 90 ++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 67 insertions(+), 23 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index 438dcc9..e7a743c 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -47,49 +47,93 @@ function ButtonLink(props: any) { } function Home() { - const [dhs_names, set_dhs_names] = useState([""]); + const [dhs, setDhs] = useState([]); + const [searchInput, setSearchInput] = useState(''); + const [filteredFoods, setFilteredFoods] = useState<{ food: Food; dhName: string; categoryName: string }[]>([]); + const [showSearchResults, setShowSearchResults] = useState(false); + useEffect(() => { axios .get("http://localhost:8000/myapi/dining-halls/") .then((response) => { - // get the data from the response - const dhs: Array = response.data["locations"]; - - // print the data to the console - console.log(dhs); - - // extract the names of the dining halls - const dhs_names: string[] = []; - dhs.forEach((dh: DiningHall) => { - dhs_names.push(dh["name"]); - }); - - // set the state of the dining hall names - set_dhs_names(dhs_names); + const dhs: DiningHall[] = response.data["locations"]; + setDhs(dhs); }) .catch((error) => { console.log(error); }); }, []); + const handleSearchInputChange = (event: React.ChangeEvent) => { + setSearchInput(event.target.value); + }; + + const handleSearch = () => { + const allFoods: { food: Food; dhName: string; categoryName: string }[] = []; + dhs.forEach((dh) => { + dh.categories.forEach((category) => { + category.sub_categories.forEach((subCategory) => { + subCategory.foods.forEach((food) => { + allFoods.push({ food, dhName: dh.name, categoryName: category.name }); + }); + }); + }); + }); + + const filtered = allFoods + .filter(({ food }) => food.name.toLowerCase().includes(searchInput.toLowerCase())) + .filter(({ food }, index, self) => self.findIndex(({ food }) => food.name === food.name) === index); + + setFilteredFoods(filtered); + setShowSearchResults(true); + }; + return (
{/* Title */}

Welcome to Hungry Slugs!

- {/* Display All of the dinning hall names as links */} -
    - {dhs_names.map((dh, i) => ( -
  • - -
    • - ))} -
+ {/* Search bar */} +
+ + +
+ {/* Display search results if button clicked */} + {showSearchResults && ( +
+

Search Results:

+
    + {filteredFoods.map(({ food, dhName, categoryName }, index) => ( +
  • + {food.name} - {categoryName} ({dhName}) +
    • + ))} +
+
+ )} + {/* Display all dining halls */} +
+

Dining Halls:

+
    + {dhs.map((dh, i) => ( +
  • + +
    • + ))} +
+
); } + + export default function Page() { const [user, setUser] = useState(null); From f8fbdcef771cb9d14280ac12226a2201dc6a569f Mon Sep 17 00:00:00 2001 From: Akshat Tiwari Date: Sun, 5 May 2024 18:03:58 -0700 Subject: [PATCH 03/11] NVM NO LONGER BUGGY --- app/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/page.tsx b/app/page.tsx index e7a743c..4873bda 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -82,7 +82,7 @@ function Home() { const filtered = allFoods .filter(({ food }) => food.name.toLowerCase().includes(searchInput.toLowerCase())) - .filter(({ food }, index, self) => self.findIndex(({ food }) => food.name === food.name) === index); + // .filter(({ food }, index, self) => self.findIndex(({ food }) => food.name === food.name) === index); setFilteredFoods(filtered); setShowSearchResults(true); From 4c5ff3d3220b33e66ad4f0739263b8a0345861ad Mon Sep 17 00:00:00 2001 From: Akshat Tiwari Date: Sun, 5 May 2024 18:17:50 -0700 Subject: [PATCH 04/11] Updated message for no foods found --- app/page.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/app/page.tsx b/app/page.tsx index 4873bda..ae7d79d 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -51,6 +51,7 @@ function Home() { const [searchInput, setSearchInput] = useState(''); const [filteredFoods, setFilteredFoods] = useState<{ food: Food; dhName: string; categoryName: string }[]>([]); const [showSearchResults, setShowSearchResults] = useState(false); + const [noFoodsFound, setNoFoodsFound] = useState(false); useEffect(() => { axios @@ -84,6 +85,7 @@ function Home() { .filter(({ food }) => food.name.toLowerCase().includes(searchInput.toLowerCase())) // .filter(({ food }, index, self) => self.findIndex(({ food }) => food.name === food.name) === index); + setNoFoodsFound(filtered.length === 0); setFilteredFoods(filtered); setShowSearchResults(true); }; @@ -116,6 +118,12 @@ function Home() {
)} + + {noFoodsFound && ( +
+

No foods found at this dining hall.

+
+ )} {/* Display all dining halls */}

Dining Halls:

From df815292885326b3a2d32defd2013a8e514407ca Mon Sep 17 00:00:00 2001 From: Akshat Tiwari Date: Mon, 6 May 2024 09:31:38 -0700 Subject: [PATCH 05/11] Made accordian dropdown correspondant to the time of day --- app/[dh_choice]/page.tsx | 38 ++++++++++++++++++++++++++++++++++---- 1 file changed, 34 insertions(+), 4 deletions(-) diff --git a/app/[dh_choice]/page.tsx b/app/[dh_choice]/page.tsx index 5d0aeb2..3da7f6a 100644 --- a/app/[dh_choice]/page.tsx +++ b/app/[dh_choice]/page.tsx @@ -22,8 +22,6 @@ interface DiningHall { categories: Category[]; } - - function name_to_dh_index(dhName: string, dhArray: DiningHall[]) { for (let i = 0; i < dhArray.length; i++) { if (dhArray[i].name === dhName) { @@ -69,7 +67,6 @@ function Accordion({ category, index, isOpen }) { ); } - export default function Page({ searchParams }) { const [categories, set_categories] = useState([]); const [searchInput, setSearchInput] = useState(''); @@ -93,12 +90,25 @@ 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); }); }, []); + 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); }; @@ -117,10 +127,29 @@ export default function Page({ searchParams }) { setFilteredFoods(filtered); setNoFoodsFound(filtered.length === 0); if (filtered.length > 0) { - setExpandedCategory(0); + const timeOfDay = getTimeOfDay(); + const timeIndex = categories.findIndex(category => category.name.toLowerCase() === timeOfDay); + if (timeIndex !== -1) { + setExpandedCategory(timeIndex); + } } }; + 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"; + } + } + function getCategoryName(food: Food): string { for (const category of categories) { for (const subcategory of category.sub_categories) { @@ -177,3 +206,4 @@ export default function Page({ searchParams }) { ); } + From e7d4fecacd94dc5414fd28863f7fbf3986e68c29 Mon Sep 17 00:00:00 2001 From: Akshat Tiwari Date: Mon, 6 May 2024 09:41:51 -0700 Subject: [PATCH 06/11] midle of the toggle search --- app/[dh_choice]/page.tsx | 28 ++++++++++++++++++++++++---- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/app/[dh_choice]/page.tsx b/app/[dh_choice]/page.tsx index 3da7f6a..b2b6577 100644 --- a/app/[dh_choice]/page.tsx +++ b/app/[dh_choice]/page.tsx @@ -1,5 +1,5 @@ "use client"; -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect, useRef } from "react"; import axios from "axios"; import './accordian.css'; @@ -73,6 +73,8 @@ export default function Page({ searchParams }) { 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 @@ -150,6 +152,10 @@ export default function Page({ searchParams }) { } } + const toggleSearchActive = () => { + setSearchActive(!searchActive); + }; + function getCategoryName(food: Food): string { for (const category of categories) { for (const subcategory of category.sub_categories) { @@ -161,18 +167,33 @@ export default function Page({ searchParams }) { return ""; } + 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 bar */} -
+
@@ -205,5 +226,4 @@ export default function Page({ searchParams }) {
); -} - +} \ No newline at end of file From d94f1b32e919abbfd9f75d98a9af91d7b2534d0a Mon Sep 17 00:00:00 2001 From: Akshat Tiwari Date: Mon, 6 May 2024 13:08:16 -0700 Subject: [PATCH 07/11] Made global search page that works --- app/[dh_choice]/page.tsx | 7 +++ app/global_search/page.tsx | 103 +++++++++++++++++++++++++++++++++++++ components/navbar.tsx | 33 ++++++++++-- 3 files changed, 139 insertions(+), 4 deletions(-) create mode 100644 app/global_search/page.tsx diff --git a/app/[dh_choice]/page.tsx b/app/[dh_choice]/page.tsx index b2b6577..d7c5560 100644 --- a/app/[dh_choice]/page.tsx +++ b/app/[dh_choice]/page.tsx @@ -2,6 +2,8 @@ import React, { useState, useEffect, useRef } from "react"; import axios from "axios"; import './accordian.css'; +import Link from "next/link"; + interface Food { name: string; @@ -116,6 +118,10 @@ export default function Page({ searchParams }) { }; const handleSearch = () => { + const dhChoice = searchParams.name; + const searchResultPageUrl = `/SearchResultPage`; + // Navigate to the search result page + const allFoods: Food[] = categories.reduce((accumulator: Food[], currentCategory: Category) => { return accumulator.concat(currentCategory.sub_categories.flatMap(subCategory => subCategory.foods)); }, []); @@ -194,6 +200,7 @@ export default function Page({ searchParams }) { value={searchInput} onChange={handleSearchInputChange} onClick={toggleSearchActive} + />
diff --git a/app/global_search/page.tsx b/app/global_search/page.tsx new file mode 100644 index 0000000..d200c17 --- /dev/null +++ b/app/global_search/page.tsx @@ -0,0 +1,103 @@ +"use client"; +import React, { useState, useEffect } from 'react'; +import axios from 'axios'; + +interface Food { + name: string; +} + +interface subCategory { + name: string; + foods: Array; +} + +interface Category { + name: string; + sub_categories: Array; +} + +interface DiningHall { + name: string; + categories: Category[]; +} + +const BarebonesComponent = () => { + const [dhs, setDhs] = useState([]); + const [searchInput, setSearchInput] = useState(''); + const [filteredFoods, setFilteredFoods] = useState<{ food: Food; dhName: string; categoryName: string }[]>([]); + const [showSearchResults, setShowSearchResults] = useState(false); + const [noFoodsFound, setNoFoodsFound] = useState(false); + + useEffect(() => { + axios + .get('http://localhost:8000/myapi/dining-halls/') + .then((response) => { + const dhsData: DiningHall[] = response.data.locations; + setDhs(dhsData); + }) + .catch((error) => { + console.log(error); + }); + }, []); + + const handleSearchInputChange = (event: React.ChangeEvent) => { + setSearchInput(event.target.value); + }; + + const handleSearch = () => { + const allFoods: { food: Food; dhName: string; categoryName: string }[] = []; + dhs.forEach((dh) => { + dh.categories.forEach((category) => { + category.sub_categories.forEach((subCategory) => { + subCategory.foods.forEach((food) => { + allFoods.push({ food, dhName: dh.name, categoryName: category.name }); + }); + }); + }); + }); + + const filtered = allFoods.filter(({ food }) => food.name.toLowerCase().includes(searchInput.toLowerCase())); + + setNoFoodsFound(filtered.length === 0); + setFilteredFoods(filtered); + setShowSearchResults(true); + }; + + return ( +
+ {/* Title */} +

Welcome to Hungry Slugs!

+ {/* Search bar */} +
{/* Adjust margin as needed */} + + +
+ {/* Display search results if button clicked */} + {showSearchResults && ( +
+

Search Results:

+
    + {filteredFoods.map(({ food, dhName, categoryName }, index) => ( +
  • + {food.name} - {categoryName} ({dhName}) +
    • + ))} +
+
+ )} + + {noFoodsFound && ( +
+

No foods found at this dining hall.

+
+ )} +
+ ); +}; + +export default BarebonesComponent; diff --git a/components/navbar.tsx b/components/navbar.tsx index 1250b27..027fecd 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -2,8 +2,33 @@ export default function Navbar({ height }: { height: string }) { return ( -
-

Hungry Slugs

-
+ + + + + ); -} +} \ No newline at end of file From b5f65447ec672dc384ea8184ce6c7606ea59b987 Mon Sep 17 00:00:00 2001 From: Akshat Tiwari Date: Mon, 6 May 2024 14:05:54 -0700 Subject: [PATCH 08/11] updated navbar to have page for DH --- components/navbar.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/components/navbar.tsx b/components/navbar.tsx index 027fecd..9372a7e 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -21,6 +21,10 @@ export default function Navbar({ height }: { height: string }) {
  • Account{/* pr-X dicates how far off right we want. */}
    • +
  • + + {/* pr-X dicates how far off right we want. */} +
    • From b72a995b53927847b21a61bc6d339788f43b4dd3 Mon Sep 17 00:00:00 2001 From: Akshat Tiwari Date: Mon, 6 May 2024 14:13:38 -0700 Subject: [PATCH 09/11] Also made search for each dining hall, but the search needs to only look through that specific dining halls categories --- app/[dh_choice]/page.tsx | 53 +++++++++++--------- app/page.tsx | 4 +- app/search/page.tsx | 103 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 136 insertions(+), 24 deletions(-) create mode 100644 app/search/page.tsx diff --git a/app/[dh_choice]/page.tsx b/app/[dh_choice]/page.tsx index d7c5560..dedec4d 100644 --- a/app/[dh_choice]/page.tsx +++ b/app/[dh_choice]/page.tsx @@ -117,31 +117,39 @@ export default function Page({ searchParams }) { setSearchInput(event.target.value); }; - const handleSearch = () => { - const dhChoice = searchParams.name; - const searchResultPageUrl = `/SearchResultPage`; - // Navigate to the search result page + // const handleSearch = () => { + // const dhChoice = searchParams.name; + // const searchResultPageUrl = `/SearchResultPage`; + // // Navigate to the search result page - const allFoods: Food[] = categories.reduce((accumulator: Food[], currentCategory: Category) => { - return accumulator.concat(currentCategory.sub_categories.flatMap(subCategory => subCategory.foods)); - }, []); + // const allFoods: Food[] = categories.reduce((accumulator: Food[], currentCategory: Category) => { + // return accumulator.concat(currentCategory.sub_categories.flatMap(subCategory => subCategory.foods)); + // }, []); - const filtered = allFoods - .filter(food => food.name.toLowerCase().includes(searchInput.toLowerCase())) - .filter((value, index, self) => { - return self.findIndex(f => f.name === value.name) === index; - }); + // const filtered = allFoods + // .filter(food => food.name.toLowerCase().includes(searchInput.toLowerCase())) + // .filter((value, index, self) => { + // return self.findIndex(f => f.name === value.name) === index; + // }); - setFilteredFoods(filtered); - setNoFoodsFound(filtered.length === 0); - if (filtered.length > 0) { - const timeOfDay = getTimeOfDay(); - const timeIndex = categories.findIndex(category => category.name.toLowerCase() === timeOfDay); - if (timeIndex !== -1) { - setExpandedCategory(timeIndex); - } - } - }; + // setFilteredFoods(filtered); + // setNoFoodsFound(filtered.length === 0); + // if (filtered.length > 0) { + // const timeOfDay = getTimeOfDay(); + // const timeIndex = categories.findIndex(category => category.name.toLowerCase() === timeOfDay); + // if (timeIndex !== -1) { + // setExpandedCategory(timeIndex); + // } + // } + // }; + + function handleSearch() { + const dhChoice = searchParams.name; + const searchResultPageUrl = `/search?diningHall=${encodeURIComponent(searchParams.name)}`; + // Navigate to the search result page + window.location.href = searchResultPageUrl; + + } function getTimeOfDay(): string { const currentTime = new Date(); @@ -203,6 +211,7 @@ export default function Page({ searchParams }) { /> +
    {/* Search results */} diff --git a/app/page.tsx b/app/page.tsx index ae7d79d..f8f6e59 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -96,7 +96,7 @@ function Home() { {/* Title */}

    Welcome to Hungry Slugs!

    {/* Search bar */} -
    + {/*
    -
    +
    */} {/* Display search results if button clicked */} {showSearchResults && (
    diff --git a/app/search/page.tsx b/app/search/page.tsx new file mode 100644 index 0000000..d200c17 --- /dev/null +++ b/app/search/page.tsx @@ -0,0 +1,103 @@ +"use client"; +import React, { useState, useEffect } from 'react'; +import axios from 'axios'; + +interface Food { + name: string; +} + +interface subCategory { + name: string; + foods: Array; +} + +interface Category { + name: string; + sub_categories: Array; +} + +interface DiningHall { + name: string; + categories: Category[]; +} + +const BarebonesComponent = () => { + const [dhs, setDhs] = useState([]); + const [searchInput, setSearchInput] = useState(''); + const [filteredFoods, setFilteredFoods] = useState<{ food: Food; dhName: string; categoryName: string }[]>([]); + const [showSearchResults, setShowSearchResults] = useState(false); + const [noFoodsFound, setNoFoodsFound] = useState(false); + + useEffect(() => { + axios + .get('http://localhost:8000/myapi/dining-halls/') + .then((response) => { + const dhsData: DiningHall[] = response.data.locations; + setDhs(dhsData); + }) + .catch((error) => { + console.log(error); + }); + }, []); + + const handleSearchInputChange = (event: React.ChangeEvent) => { + setSearchInput(event.target.value); + }; + + const handleSearch = () => { + const allFoods: { food: Food; dhName: string; categoryName: string }[] = []; + dhs.forEach((dh) => { + dh.categories.forEach((category) => { + category.sub_categories.forEach((subCategory) => { + subCategory.foods.forEach((food) => { + allFoods.push({ food, dhName: dh.name, categoryName: category.name }); + }); + }); + }); + }); + + const filtered = allFoods.filter(({ food }) => food.name.toLowerCase().includes(searchInput.toLowerCase())); + + setNoFoodsFound(filtered.length === 0); + setFilteredFoods(filtered); + setShowSearchResults(true); + }; + + return ( +
    + {/* Title */} +

    Welcome to Hungry Slugs!

    + {/* Search bar */} +
    {/* Adjust margin as needed */} + + +
    + {/* Display search results if button clicked */} + {showSearchResults && ( +
    +

    Search Results:

    +
      + {filteredFoods.map(({ food, dhName, categoryName }, index) => ( +
    • + {food.name} - {categoryName} ({dhName}) +
      • + ))} +
    +
    + )} + + {noFoodsFound && ( +
    +

    No foods found at this dining hall.

    +
    + )} +
    + ); +}; + +export default BarebonesComponent; From f03b562e899840f4203c6b2b2411777d08e2867a Mon Sep 17 00:00:00 2001 From: Akshat Tiwari Date: Mon, 6 May 2024 14:25:14 -0700 Subject: [PATCH 10/11] Finished both search features and made them independant! --- app/[dh_choice]/page.tsx | 1 + app/search/page.tsx | 41 ++++++++++++++++++++++------------------ 2 files changed, 24 insertions(+), 18 deletions(-) diff --git a/app/[dh_choice]/page.tsx b/app/[dh_choice]/page.tsx index dedec4d..4285568 100644 --- a/app/[dh_choice]/page.tsx +++ b/app/[dh_choice]/page.tsx @@ -148,6 +148,7 @@ export default function Page({ searchParams }) { const searchResultPageUrl = `/search?diningHall=${encodeURIComponent(searchParams.name)}`; // Navigate to the search result page window.location.href = searchResultPageUrl; + localStorage.setItem('diningHall', dhChoice); } diff --git a/app/search/page.tsx b/app/search/page.tsx index d200c17..f2d1596 100644 --- a/app/search/page.tsx +++ b/app/search/page.tsx @@ -28,6 +28,8 @@ const BarebonesComponent = () => { const [showSearchResults, setShowSearchResults] = useState(false); const [noFoodsFound, setNoFoodsFound] = useState(false); + const diningHall = localStorage.getItem('diningHall'); + useEffect(() => { axios .get('http://localhost:8000/myapi/dining-halls/') @@ -45,13 +47,14 @@ const BarebonesComponent = () => { }; const handleSearch = () => { + const currentDiningHall = dhs.find((dh) => dh.name === diningHall); + if (!currentDiningHall) return; + const allFoods: { food: Food; dhName: string; categoryName: string }[] = []; - dhs.forEach((dh) => { - dh.categories.forEach((category) => { - category.sub_categories.forEach((subCategory) => { - subCategory.foods.forEach((food) => { - allFoods.push({ food, dhName: dh.name, categoryName: category.name }); - }); + currentDiningHall.categories.forEach((category) => { + category.sub_categories.forEach((subCategory) => { + subCategory.foods.forEach((food) => { + allFoods.push({ food, dhName: currentDiningHall.name, categoryName: category.name }); }); }); }); @@ -65,18 +68,20 @@ const BarebonesComponent = () => { return (
    - {/* Title */} -

    Welcome to Hungry Slugs!

    - {/* Search bar */} -
    {/* Adjust margin as needed */} - - -
    + {/* Dining Hall Name */} +

    {diningHall} Search

    + + {/* Search bar */} +
    {/* Adjust margin as needed */} + + +
    + {/* Display search results if button clicked */} {showSearchResults && (
    From 4d13fdf2e302bb15a245b32cff04a8fe762700fc Mon Sep 17 00:00:00 2001 From: Akshat Tiwari Date: Mon, 6 May 2024 15:08:01 -0700 Subject: [PATCH 11/11] Update page.tsx --- app/[dh_choice]/page.tsx | 80 +++------------------------------------- 1 file changed, 5 insertions(+), 75 deletions(-) diff --git a/app/[dh_choice]/page.tsx b/app/[dh_choice]/page.tsx index 4285568..e55a646 100644 --- a/app/[dh_choice]/page.tsx +++ b/app/[dh_choice]/page.tsx @@ -117,39 +117,12 @@ export default function Page({ searchParams }) { setSearchInput(event.target.value); }; - // const handleSearch = () => { - // const dhChoice = searchParams.name; - // const searchResultPageUrl = `/SearchResultPage`; - // // Navigate to the search result page - - // const allFoods: Food[] = categories.reduce((accumulator: Food[], currentCategory: Category) => { - // return accumulator.concat(currentCategory.sub_categories.flatMap(subCategory => subCategory.foods)); - // }, []); - - // const filtered = allFoods - // .filter(food => food.name.toLowerCase().includes(searchInput.toLowerCase())) - // .filter((value, index, self) => { - // return self.findIndex(f => f.name === value.name) === index; - // }); - - // setFilteredFoods(filtered); - // setNoFoodsFound(filtered.length === 0); - // if (filtered.length > 0) { - // const timeOfDay = getTimeOfDay(); - // const timeIndex = categories.findIndex(category => category.name.toLowerCase() === timeOfDay); - // if (timeIndex !== -1) { - // setExpandedCategory(timeIndex); - // } - // } - // }; - function handleSearch() { - const dhChoice = searchParams.name; - const searchResultPageUrl = `/search?diningHall=${encodeURIComponent(searchParams.name)}`; + 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 { @@ -167,21 +140,6 @@ export default function Page({ searchParams }) { } } - const toggleSearchActive = () => { - setSearchActive(!searchActive); - }; - - function getCategoryName(food: Food): string { - for (const category of categories) { - for (const subcategory of category.sub_categories) { - if (subcategory.foods.some(f => f.name === food.name)) { - return category.name; - } - } - } - return ""; - } - useEffect(() => { const handleOutsideClick = (event: MouseEvent) => { if (searchRef.current && !searchRef.current.contains(event.target as Node)) { @@ -201,39 +159,11 @@ export default function Page({ searchParams }) {

    {searchParams.name}

    - {/* Search bar */} -
    - + {/* Search button */} +
    -
    - - {/* Search results */} - {filteredFoods.length > 0 && ( -
    -

    Search Results:

    -
      - {filteredFoods.map((food, index) => ( -
    • {food.name} - {getCategoryName(food)}
      • - ))} -
    -
    - )} - {/* No foods found message */} - {noFoodsFound && ( -
    -

    No foods found at this dining hall.

    -
    - )} - {/* Categories */} {categories.map((category, i) => (
    @@ -243,4 +173,4 @@ export default function Page({ searchParams }) {
    ); -} \ No newline at end of file +}