diff --git a/website/components/FoodCategory/index.tsx b/website/components/FoodCategory/index.tsx index e0a20ce..a6597ad 100644 --- a/website/components/FoodCategory/index.tsx +++ b/website/components/FoodCategory/index.tsx @@ -45,7 +45,7 @@ const FoodCategory = () => { { {itemData ? (
@@ -73,6 +73,7 @@ const ItemCard = () => { {({ inView, ref, entry }) => ( + + Bite Space + + +
+ {children} + +
+ ); +} diff --git a/website/components/YouMayLike/index.tsx b/website/components/YouMayLike/index.tsx index 386a499..0fd53f4 100644 --- a/website/components/YouMayLike/index.tsx +++ b/website/components/YouMayLike/index.tsx @@ -24,6 +24,7 @@ const YouMayLike = () => { .from("restaurants") .select("*") .eq("is_public", true) + .order("id", { ascending: true }) .limit(4); if (error) return error; @@ -44,12 +45,13 @@ const YouMayLike = () => {
{restaurants.map((item: any) => ( { effect="fade" className="sm:h-[25rem]" > - {item.images.map((data: any) => ( -
- - item-image - -
+ {item.images.map((data: any, key: any) => ( + + item-image + ))}
diff --git a/website/components/withScrollRestoration/index.tsx b/website/components/withScrollRestoration/index.tsx index 6199cc0..619a73e 100644 --- a/website/components/withScrollRestoration/index.tsx +++ b/website/components/withScrollRestoration/index.tsx @@ -14,17 +14,24 @@ function withScrollRestoration(WrappedComponent: any) { window.sessionStorage.setItem( `scrollY:${router.asPath}`, window.scrollY.toString() - ); - } - }; - - const handleRouteComplete = (url: any) => { + ); + } + }; + + const handleRouteComplete = (url: any) => { const scrollY = window.sessionStorage.getItem(`scrollY:${url}`); if (scrollY) { - window.scrollTo(0, parseInt(scrollY)); + if (url?.includes("/restaurants")) { + // restaurants data is taking time to load that's why added timout to scroll the page + setTimeout(function () { + window.scroll(0, parseInt(scrollY)); + }, 900); + } else { + window.scrollTo(0, parseInt(scrollY)); + } } }; - + const handlePopState = () => { // Retrieve the scroll position for the previous page const scrollY = window.sessionStorage.getItem(`scrollY:${prevPageUrl}`); diff --git a/website/pages/about/index.tsx b/website/pages/about/index.tsx index c394861..47aa59b 100644 --- a/website/pages/about/index.tsx +++ b/website/pages/about/index.tsx @@ -1,7 +1,7 @@ "use client"; +import RootLayout from "@/components/Layout/layout"; import withScrollRestoration from "@/components/withScrollRestoration"; -import RootLayout from "@/pages/layout"; import Image from "next/image"; import Link from "next/link"; diff --git a/website/pages/category/[id].tsx b/website/pages/category/[category].tsx similarity index 95% rename from website/pages/category/[id].tsx rename to website/pages/category/[category].tsx index 4fcc945..a0da77f 100644 --- a/website/pages/category/[id].tsx +++ b/website/pages/category/[category].tsx @@ -7,13 +7,13 @@ import { useEffect, useState } from "react"; import { CategoryData, RestaurantData } from "@/types/category-by-id"; import { useRouter } from "next/router"; import Restaurant from "./restaurant"; -import RootLayout from "../layout"; +import RootLayout from "../../components/Layout/layout"; import NotFound from "@/components/PageNotFound"; const Category = () => { const router = useRouter(); - const { id } = router.query; - const suffix = id?.toString().substring(id?.lastIndexOf("-") + 1); + const { category } = router.query; + const suffix = category?.toString().substring(category?.lastIndexOf("-") + 1); const [isRestaurantsLoading, setIsRestaurantsLoading] = useState(true); const [categoryData, setCategoryData] = useState(null); @@ -38,6 +38,7 @@ const Category = () => { .from("categories") .select("id, restaurant_id, image") .neq("restaurant_id", 0) + .order('id', { ascending: false }) .contains("tags", [data.name.toLowerCase()]); if (categoriesError) throw categoriesError; diff --git a/website/pages/index.tsx b/website/pages/index.tsx index b0f270e..9d4f525 100644 --- a/website/pages/index.tsx +++ b/website/pages/index.tsx @@ -5,7 +5,7 @@ import Hero from "@/components/Hero"; import ItemCard from "@/components/ItemCard"; import YouMayLike from "@/components/YouMayLike"; import { Inter } from "@next/font/google"; -import RootLayout from "./layout"; +import RootLayout from "../components/Layout/layout"; import withScrollRestoration from "@/components/withScrollRestoration"; const inter = Inter({ subsets: ["latin"] }); diff --git a/website/pages/restaurants/[id]/cuisines/index.tsx b/website/pages/restaurants/[restaurant]/cuisines/index.tsx similarity index 94% rename from website/pages/restaurants/[id]/cuisines/index.tsx rename to website/pages/restaurants/[restaurant]/cuisines/index.tsx index 6dd8b0f..c3acac5 100644 --- a/website/pages/restaurants/[id]/cuisines/index.tsx +++ b/website/pages/restaurants/[restaurant]/cuisines/index.tsx @@ -14,12 +14,12 @@ import SectionTitle from "@/components/Common/SectionTitle"; import "swiper/css"; import "swiper/css/effect-fade"; import { useRouter } from "next/router"; -import RootLayout from "@/pages/layout"; +import RootLayout from "@/components/Layout/layout"; import NoDataFound from "@/components/NoDataFound"; const CuisineRestaurant = () => { const router = useRouter(); - const { id } = router.query; + const { restaurant } = router.query; const [isRestaurantsLoading, setIsRestaurantsLoading] = useState(true); const [restaurants, setRestaurantsData] = useState([]); @@ -27,11 +27,11 @@ const CuisineRestaurant = () => { useEffect(() => { const fetchData = async () => { try { - if (id) { + if (restaurant) { const { data, error } = await supabase .from("restaurants") .select("*") - .contains("tags", [(id as string)?.replace(/-/g, " ")]); + .contains("tags", [(restaurant as string)?.replace(/-/g, " ")]); if (error) throw error; @@ -45,7 +45,7 @@ const CuisineRestaurant = () => { }; fetchData(); - }, [id]); + }, [restaurant]); return ( <> @@ -86,8 +86,7 @@ const CuisineRestaurant = () => { item-image diff --git a/website/pages/restaurants/[id]/index.tsx b/website/pages/restaurants/[restaurant]/index.tsx similarity index 76% rename from website/pages/restaurants/[id]/index.tsx rename to website/pages/restaurants/[restaurant]/index.tsx index e8a5b06..b5c5c4c 100644 --- a/website/pages/restaurants/[id]/index.tsx +++ b/website/pages/restaurants/[restaurant]/index.tsx @@ -12,15 +12,19 @@ import "swiper/css"; import "swiper/css/effect-fade"; import { InView } from "react-intersection-observer"; import { useRouter } from "next/router"; -import RootLayout from "@/pages/layout"; +import RootLayout from "@/components/Layout/layout"; import NotFound from "@/components/PageNotFound"; import VideoPlayer from "@/components/VideoPlayer"; import MenuDish from "@/components/SkeletonPlaceholders/MenuDish"; +import Link from "next/link"; +import withScrollRestoration from "@/components/withScrollRestoration"; const RestaurantMenu = () => { const router = useRouter(); - const { id } = router.query; - const suffix = id?.toString().substring(id?.lastIndexOf("-") + 1); + const { restaurant } = router.query; + const suffix = restaurant + ?.toString() + .substring(restaurant?.lastIndexOf("-") + 1); const [isRestaurantLoading, setIsRestaurantLoading] = useState(true); const [isDishesLoading, setIsDishesLoading] = useState(true); @@ -54,7 +58,8 @@ const RestaurantMenu = () => { const { data: menusData, error } = await supabase .from("menus") .select("id, name") - .eq("restaurant_id", atob(suffix!)); + .eq("restaurant_id", atob(suffix!)) + .order("id", { ascending: true }); if (error) return error; @@ -65,7 +70,8 @@ const RestaurantMenu = () => { .select( "id, name, description, price, images, video, video_thumbnail" ) - .eq("menu_id", menu.id); + .eq("menu_id", menu.id) + .order("id", { ascending: true }); if (dishError) { throw dishError; @@ -89,21 +95,56 @@ const RestaurantMenu = () => { fetchRestaurantData(); fetchDishes(); - }, [id, router, suffix]); + }, [restaurant, router, suffix]); + + const [scrolled, setScrolled] = useState(false); + + useEffect(() => { + const handleScroll = () => { + const resizableRestaurantDiv = document.getElementById( + "resizableRestaurantDiv" + ); + if (!resizableRestaurantDiv || scrolled) return; + + if (window.scrollY > 0) { + resizableRestaurantDiv.style.height = "60vh"; + setScrolled(true); + } + }; + + const handleScrollUp = () => { + const resizableRestaurantDiv = document.getElementById( + "resizableRestaurantDiv" + ); + if (!resizableRestaurantDiv || !scrolled) return; + + if (window.scrollY === 0) { + resizableRestaurantDiv.style.height = "100vh"; + setScrolled(false); + } + }; + + window.addEventListener("scroll", handleScroll); + window.addEventListener("scroll", handleScrollUp); + + return () => { + window.removeEventListener("scroll", handleScroll); + window.removeEventListener("scroll", handleScrollUp); + }; + }, [scrolled]); return ( <> {restaurantData ? ( -
+
{restaurantData.images ? ( restaurant-cover-image @@ -132,7 +173,7 @@ const RestaurantMenu = () => {

{restaurantData.address}

-
+
{

{restaurantData.phone}

-
+ {/*
{ >

Website

-
+
*/}
@@ -182,7 +223,7 @@ const RestaurantMenu = () => { inView ? "animated-fade-y" : "" }`} > -

+

{item.name}

{isDishesLoading ? ( @@ -225,8 +266,7 @@ const RestaurantMenu = () => { menu-dish-image @@ -266,14 +306,16 @@ const RestaurantMenu = () => {
-
-
+
+
{restaurantData.images ? ( restaurant-cover-image @@ -283,7 +325,7 @@ const RestaurantMenu = () => {
-
+
{restaurantData.name}
@@ -317,7 +359,7 @@ const RestaurantMenu = () => {

{restaurantData.phone}

-
+ {/*
{ >

Website

-
+
*/}
-
-
+
+

+ Menus +

+
{menuData.map((item: any) => item.dishes.length > 0 ? ( -
- {isDishesLoading ? ( -
- +
+ + {item.dishes[0].video ? ( + + ) : ( + + {item.dishes[0].images?.map( + (data: any, key: any) => ( + + item-image + + ) + )} + + )} +
+
+

{item.name}

+
- ) : ( -
- {item.dishes.map((data: any) => ( -
- {data.video ? ( - - ) : ( - - {data.images.map((data: any) => ( -
- -
-
- menu-dish-image -
-
- -
- ))} - - )} -
-
-

{data.name}

-

- ₹{data.price} -

-
-

{data.description}

-
-
- ))} -
- )} +
) : ( "" @@ -428,4 +457,4 @@ const RestaurantMenu = () => { ); }; -export default RestaurantMenu; +export default withScrollRestoration(RestaurantMenu); diff --git a/website/pages/restaurants/[restaurant]/menus/[menu].tsx b/website/pages/restaurants/[restaurant]/menus/[menu].tsx new file mode 100644 index 0000000..64ca0a4 --- /dev/null +++ b/website/pages/restaurants/[restaurant]/menus/[menu].tsx @@ -0,0 +1,169 @@ +"use client"; + +import supabase from "@/utils/supabase"; + +import Image from "next/image"; +import React, { useEffect, useState } from "react"; + +import { Autoplay, EffectFade } from "swiper/modules"; +import { Swiper, SwiperSlide } from "swiper/react"; + +import "swiper/css"; +import "swiper/css/effect-fade"; +import { useRouter } from "next/router"; +import NotFound from "@/components/PageNotFound"; +import VideoPlayer from "@/components/VideoPlayer"; +import MenuDish from "@/components/SkeletonPlaceholders/MenuDish"; +import LayoutWithoutFooter from "@/components/Layout/layoutWithoutFooter"; + +const RestaurantMenu = () => { + const router = useRouter(); + const { restaurant, menu } = router.query; + const suffix = restaurant + ?.toString() + .substring(restaurant?.lastIndexOf("-") + 1); + const menuSuffix = menu?.toString().substring(menu?.lastIndexOf("-") + 1); + + const [isDishesLoading, setIsDishesLoading] = useState(true); + const [menuData, setMenuData] = useState([]); + + useEffect(() => { + const fetchDishes = async () => { + if (suffix) { + try { + const { data: menusData, error } = await supabase + .from("menus") + .select("id, name") + .eq("restaurant_id", atob(suffix!)); + // .eq("id", atob(menuSuffix!)); + + if (error) return error; + + const dishes = await Promise.all( + menusData.map(async (menu) => { + const { data: dishData, error: dishError } = await supabase + .from("dishes") + .select( + "id, name, description, price, images, video, video_thumbnail" + ) + .eq("menu_id", menu.id); + + if (dishError) { + throw dishError; + } + + return { + ...menu, + dishes: dishData, + }; + }) + ); + + setMenuData(dishes); + } catch (error) { + console.error("Error fetching dishes data:", error); + } finally { + setIsDishesLoading(false); + } + } + }; + + fetchDishes(); + }, []); + + return ( + <> + {menuData ? ( + +
+
+ {menuData.map((item: any) => + item.dishes.length > 0 ? ( +
+ {isDishesLoading ? ( +
+ +
+ ) : ( +
+ {item.dishes.map((data: any) => ( +
+ {data.video ? ( + + ) : ( + + {data.images.map((data: any) => ( +
+ +
+
+ menu-dish-image +
+
+ +
+ ))} + + )} +
+
+

{data.name}

+

+ ₹{data.price} +

+
+

{data.description}

+
+
+ ))} +
+ )} +
+ ) : ( + "" + ) + )} +
+
+ + ) : isDishesLoading ? ( +
+
+
+ ) : ( + + )} + + ); +}; + +export default RestaurantMenu; diff --git a/website/styles/index.css b/website/styles/index.css index 4e0bdee..623a0a6 100644 --- a/website/styles/index.css +++ b/website/styles/index.css @@ -58,6 +58,18 @@ input#checkboxLabel:checked ~ .box span { } @keyframes fadeIn { + 0% { + opacity: 0; + } + 50% { + opacity: 0.5; + } + 100% { + opacity: 1; + } +} + +@keyframes fadeInY { from { opacity: 0; transform: translateY(20px); @@ -69,7 +81,11 @@ input#checkboxLabel:checked ~ .box span { } .animated-fade-y { - animation: fadeIn 0.9s ease-out; + animation: fadeInY 0.9s ease-out; +} + +.animated-fade { + animation: fadeIn 0.5s ease-in-out; } .animated-fade-y-on-scroll { @@ -81,3 +97,7 @@ input#checkboxLabel:checked ~ .box span { opacity: 1; animation: fadeIn 0.5s ease-out; } + +.smooth-resize { + transition: height 0.5s ease-in-out; +}