diff --git a/website/components/Reel/LoadImage.tsx b/website/components/Reel/LoadImage.tsx new file mode 100644 index 0000000..fe08464 --- /dev/null +++ b/website/components/Reel/LoadImage.tsx @@ -0,0 +1,21 @@ +import { useState } from "react"; +import Image from "next/image"; + +const LoadImage = ({ src, alt }: { src: string; alt: string }) => { + const [isLoaded, setIsLoaded] = useState(false); + + return ( + {alt} setIsLoaded(true)} + /> + ); +}; + +export default LoadImage; diff --git a/website/components/Reel/index.tsx b/website/components/Reel/index.tsx index b321aa2..76fedf9 100644 --- a/website/components/Reel/index.tsx +++ b/website/components/Reel/index.tsx @@ -71,75 +71,66 @@ const Reels = ({ dishesData, isDishesLoading }: ReelProps) => { return (
-
- {isDishesLoading ? ( -
- -
- ) : dishesData.length > 0 ? ( -
- {dishesData - .slice(0, numDivsToRender) - .map((data: any, index: any) => ( -
+ +
+ ) : dishesData.length > 0 ? ( +
+ {dishesData.slice(0, numDivsToRender).map((data: any, index: any) => ( +
+ {data.video ? ( + + ) : ( + + )} +
+
+

{data.name}

+

₹{data.price}

+
+

- {data.video ? ( - - ) : ( - - )} -

-
-

{data.name}

-

₹{data.price}

-
-

- {data.description} -

-
-
- ))} -
- ) : ( -
- -
- )} -
+ {data.description} +

+
+
+ ))} + + ) : ( +
+ +
+ )}
); }; diff --git a/website/components/Reel/swiper.tsx b/website/components/Reel/swiper.tsx index 1ad40bc..7656ecb 100644 --- a/website/components/Reel/swiper.tsx +++ b/website/components/Reel/swiper.tsx @@ -9,6 +9,7 @@ import "swiper/css/effect-fade"; import { useEffect, useRef, useState } from "react"; import useAutoplayVisibility from "./hook"; import { useAppSelector } from "@/store/store"; +import LoadImage from "./LoadImage"; type SwiperCore = any; @@ -60,13 +61,14 @@ const SwiperComponent = ({ images }: { images: any }) => { }} >
- menu-dish-image + /> */} +
diff --git a/website/hooks/useScrollReset.tsx b/website/hooks/useScrollReset.tsx new file mode 100644 index 0000000..775803b --- /dev/null +++ b/website/hooks/useScrollReset.tsx @@ -0,0 +1,17 @@ +import { useRef, useEffect } from "react"; + +const useScrollReset = (isOpen: boolean) => { + const contentRef = useRef(null); + + useEffect(() => { + console.log("ref called"); + if (isOpen && contentRef.current) { + console.log(contentRef.current.scrollTop); + contentRef.current.scrollTop = 0; + } + }, [isOpen]); + + return contentRef; +}; + +export default useScrollReset; diff --git a/website/pages/category/restaurant.tsx b/website/pages/category/restaurant.tsx index b4d2257..fb3948f 100644 --- a/website/pages/category/restaurant.tsx +++ b/website/pages/category/restaurant.tsx @@ -2,11 +2,18 @@ import BottomSheet from "@/components/BottomSheet"; import NoDataFound from "@/components/NoDataFound"; -import { useAppSelector } from "@/store/store"; +import { useAppDispatch, useAppSelector } from "@/store/store"; import { RestaurantData } from "@/types/category-by-id"; import Image from "next/image"; import Link from "next/link"; -import { useState } from "react"; +import { useEffect, useState } from "react"; +import { Swiper, SwiperSlide } from "swiper/react"; + +import "swiper/css"; +import "swiper/css/pagination"; + +import { Autoplay, Pagination } from "swiper/modules"; +import { setScreenHeightState } from "@/store/slice"; const Restaurant = ({ isRestaurantsLoading, @@ -28,90 +35,114 @@ const Restaurant = ({ const closeBottomSheet = () => setIsBottomSheetOpen(false); + const dispatch = useAppDispatch(); + + useEffect(() => { + dispatch(setScreenHeightState(window.innerHeight)); + + window.addEventListener("resize", () => { + dispatch(setScreenHeightState(window.innerHeight)); + }); + + return () => + window.removeEventListener("resize", () => + dispatch(setScreenHeightState(window.innerHeight)) + ); + }, [dispatch]); + return ( <> {restaurantsData && restaurantsData.length > 0 ? (

Restaurants to explore

-
+
{restaurantsData.map((item, index) => (
-
- - item-image - -
openBottomSheet(item.name, item.dishes)} - className="sm:hidden cursor-pointer" - > - item-image -
- -

- {item.name} -

- -
-
-

{item.address}

-
-
- {item.reviews > 0 ? ( -

- {item.reviews}{" "} - Reviews -

- ) : ( - "" - )} - {item.rating > 0 ? ( -

⭐ {item.rating}

- ) : ( - "" - )} + + {item.menu.map((data, index) => ( +
+ 1 ? "!w-60 sm:!w-96" : "!w-full" + }`} + > + + 1 ? "w-96" : "w-full" + }`} + alt="item-image" + height={100} + width={100} + /> + +
+ openBottomSheet(item.name, data.dishes) + } + className="sm:hidden cursor-pointer" + > + 1 ? "w-60" : "w-full" + }`} + alt="item-image" + height={100} + width={100} + /> +
+
+

+ {data.name} +

+
+
-
-
+ ))} + + +

+ {item.name} +

+

{item.address}

+
))}
diff --git a/website/pages/restaurants/[restaurant]/index.tsx b/website/pages/restaurants/[restaurant]/index.tsx index 94a36bb..7de6be2 100644 --- a/website/pages/restaurants/[restaurant]/index.tsx +++ b/website/pages/restaurants/[restaurant]/index.tsx @@ -136,7 +136,7 @@ const RestaurantMenu = ({ const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false); const [currentItemsName, setCurrentItemsName] = useState(""); const [currentItems, setCurrentItems] = useState([]); - + const openBottomSheet = (name: string, items: any) => { setCurrentItemsName(name); setCurrentItems(items); @@ -144,7 +144,7 @@ const RestaurantMenu = ({ }; const closeBottomSheet = () => setIsBottomSheetOpen(false); - + return ( <> {restaurantData ? ( @@ -483,12 +483,7 @@ const RestaurantMenu = ({
-
+
{restaurantData.images ? ( { if (menuError) return { data: null, error: menuError }; - const restaurant = await Promise.all( + const restaurants = await Promise.all( menuDatas.map(async (menu: any) => { const { data: restaurantData, error: restaurantError } = await supabase .from("restaurants") @@ -157,8 +157,43 @@ export const getCategoriesData = async (suffix: any) => { }) ); + const restaurant = mergeById(restaurants); + return { data: { menu: data, restaurant }, error: null }; } return { data: null, error: null }; }; + +interface MergedRestaurant { + address: string; + id: number; + menu: any[]; + name: string; +} + +function mergeById(array: any[]): MergedRestaurant[] { + const mergedData: { [key: number]: MergedRestaurant } = {}; + + array.forEach((item) => { + if (!mergedData[item.id]) { + mergedData[item.id] = { + address: item.address, + id: item.id, + name: item.name, + menu: [{ ...item.menu, dishes: [...item.dishes] }], + }; + } else { + const existingMenus = mergedData[item.id].menu; + const existingMenu = existingMenus.find((m) => m.id === item.menu.id); + + if (existingMenu) { + existingMenu.dishes = [...existingMenu.dishes, ...item.dishes]; + } else { + existingMenus.push({ ...item.menu, dishes: [...item.dishes] }); + } + } + }); + + return Object.values(mergedData); +} diff --git a/website/types/category-by-id.ts b/website/types/category-by-id.ts index 415b1e3..db872a3 100644 --- a/website/types/category-by-id.ts +++ b/website/types/category-by-id.ts @@ -3,6 +3,7 @@ export type CategoryData = { name: string; description: string; image: string; + dishes: []; }; export type RestaurantData = { @@ -11,6 +12,5 @@ export type RestaurantData = { address: string; rating: number; reviews: number; - menu: CategoryData; - dishes: []; + menu: CategoryData[]; };