diff --git a/website/components/FoodCategory/index.tsx b/website/components/FoodCategory/index.tsx index 0719a38..8808a7a 100644 --- a/website/components/FoodCategory/index.tsx +++ b/website/components/FoodCategory/index.tsx @@ -44,7 +44,7 @@ const FoodCategory = () => { { {itemData ? (
@@ -74,6 +74,7 @@ const ItemCard = () => { {({ inView, ref, entry }) => ( + + Bite Space + + +
+ {children} + +
+ ); +} diff --git a/website/components/YouMayLike/index.tsx b/website/components/YouMayLike/index.tsx index befd035..5f55121 100644 --- a/website/components/YouMayLike/index.tsx +++ b/website/components/YouMayLike/index.tsx @@ -24,7 +24,7 @@ const YouMayLike = () => { .from("restaurants") .select("*") .eq("is_public", true) - .order('id', { ascending: true }) + .order("id", { ascending: true }) .limit(4); if (error) return error; @@ -45,13 +45,14 @@ const YouMayLike = () => {
{restaurants.map((item: any, key: any) => ( { item-image { + ); + } + }; + + 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 6b282ee..0714d12 100644 --- a/website/pages/about/index.tsx +++ b/website/pages/about/index.tsx @@ -1,7 +1,7 @@ "use client"; +import RootLayout from "@/components/Layout/root"; 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 96% rename from website/pages/category/[id].tsx rename to website/pages/category/[category].tsx index 7dfb5d9..f36d209 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/root"; 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); diff --git a/website/pages/index.tsx b/website/pages/index.tsx index b0f270e..3971f91 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/root"; 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 73bbb25..8d67c66 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/root"; 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 ( <> @@ -53,7 +53,7 @@ const CuisineRestaurant = () => {
diff --git a/website/pages/restaurants/[id]/index.tsx b/website/pages/restaurants/[restaurant]/index.tsx similarity index 77% rename from website/pages/restaurants/[id]/index.tsx rename to website/pages/restaurants/[restaurant]/index.tsx index 1558ff1..d8bb751 100644 --- a/website/pages/restaurants/[id]/index.tsx +++ b/website/pages/restaurants/[restaurant]/index.tsx @@ -3,7 +3,7 @@ import supabase from "@/utils/supabase"; import Image from "next/image"; -import React, { useEffect, useState } from "react"; +import React, { useEffect, useRef, useState } from "react"; import { Autoplay, EffectFade } from "swiper/modules"; import { Swiper, SwiperSlide } from "swiper/react"; @@ -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/root"; 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,13 +95,46 @@ const RestaurantMenu = () => { fetchRestaurantData(); fetchDishes(); - }, [id, router, suffix]); + }, [restaurant, router, suffix]); + + const resizableRestaurantDivRef = useRef(null); + const [scrolled, setScrolled] = useState(false); + + useEffect(() => { + const handleScroll = () => { + const resizableRestaurantDiv = resizableRestaurantDivRef.current; + if (!resizableRestaurantDiv || scrolled) return; + + if (window.scrollY > 0) { + resizableRestaurantDiv.style.height = "60vh"; + setScrolled(true); + } + }; + + const handleScrollUp = () => { + const resizableRestaurantDiv = resizableRestaurantDivRef.current; + 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 ? ( -
+
@@ -131,7 +170,7 @@ const RestaurantMenu = () => {

{restaurantData.address}

-
+
{

{restaurantData.phone}

-
+ {/*
{ >

Website

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

+

{item.name}

{isDishesLoading ? ( @@ -264,8 +303,11 @@ const RestaurantMenu = () => {
-
-
+
+
{restaurantData.images ? ( {
-
+
{restaurantData.name}
@@ -314,7 +356,7 @@ const RestaurantMenu = () => {

{restaurantData.phone}

-
+ {/*
{ >

Website

-
+
*/}
-
-
+
+

+ Menus +

+
{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}

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

{item.name}

+
- )} +
) : ( "" @@ -424,4 +454,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..6197fd8 --- /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/withoutFooter"; + +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 75c69b4..3b546ea 100644 --- a/website/styles/index.css +++ b/website/styles/index.css @@ -56,6 +56,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); @@ -67,7 +79,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 { @@ -79,3 +95,7 @@ input#checkboxLabel:checked ~ .box span { opacity: 1; animation: fadeIn 0.5s ease-out; } + +.smooth-resize { + transition: height 0.5s ease-in-out; +}