Refactor layout file and use ref

canopas · Apr 26, 2024 · b5908d9 · b5908d9
1 parent 9bba4f2
commit b5908d9
Show file tree

Hide file tree

Showing 8 changed files with 13 additions and 16 deletions.
diff --git a/website/components/Layout/layout.tsx → website/components/Layout/root.tsx b/website/components/Layout/layout.tsx → website/components/Layout/root.tsx
diff --git a/...components/Layout/layoutWithoutFooter.tsx → website/components/Layout/withoutFooter.tsx b/...components/Layout/layoutWithoutFooter.tsx → website/components/Layout/withoutFooter.tsx
diff --git a/website/pages/about/index.tsx b/website/pages/about/index.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import RootLayout from "@/components/Layout/layout";
+import RootLayout from "@/components/Layout/root";
 import withScrollRestoration from "@/components/withScrollRestoration";
 import Image from "next/image";
 import Link from "next/link";

diff --git a/website/pages/category/[category].tsx b/website/pages/category/[category].tsx
@@ -7,7 +7,7 @@ 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 "../../components/Layout/layout";
+import RootLayout from "../../components/Layout/root";
 import NotFound from "@/components/PageNotFound";
 
 const Category = () => {

diff --git 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 "../components/Layout/layout";
+import RootLayout from "../components/Layout/root";
 import withScrollRestoration from "@/components/withScrollRestoration";
 
 const inter = Inter({ subsets: ["latin"] });

diff --git a/website/pages/restaurants/[restaurant]/cuisines/index.tsx b/website/pages/restaurants/[restaurant]/cuisines/index.tsx
@@ -14,7 +14,7 @@ import SectionTitle from "@/components/Common/SectionTitle";
 import "swiper/css";
 import "swiper/css/effect-fade";
 import { useRouter } from "next/router";
-import RootLayout from "@/components/Layout/layout";
+import RootLayout from "@/components/Layout/root";
 import NoDataFound from "@/components/NoDataFound";
 
 const CuisineRestaurant = () => {

diff --git a/website/pages/restaurants/[restaurant]/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,7 +12,7 @@ import "swiper/css";
 import "swiper/css/effect-fade";
 import { InView } from "react-intersection-observer";
 import { useRouter } from "next/router";
-import RootLayout from "@/components/Layout/layout";
+import RootLayout from "@/components/Layout/root";
 import NotFound from "@/components/PageNotFound";
 import VideoPlayer from "@/components/VideoPlayer";
 import MenuDish from "@/components/SkeletonPlaceholders/MenuDish";
@@ -97,13 +97,12 @@ const RestaurantMenu = () => {
     fetchDishes();
   }, [restaurant, router, suffix]);
 
+  const resizableRestaurantDivRef = useRef<HTMLDivElement>(null);;
   const [scrolled, setScrolled] = useState(false);
 
   useEffect(() => {
     const handleScroll = () => {
-      const resizableRestaurantDiv = document.getElementById(
-        "resizableRestaurantDiv"
-      );
+      const resizableRestaurantDiv = resizableRestaurantDivRef.current;
       if (!resizableRestaurantDiv || scrolled) return;
 
       if (window.scrollY > 0) {
@@ -113,9 +112,7 @@ const RestaurantMenu = () => {
     };
 
     const handleScrollUp = () => {
-      const resizableRestaurantDiv = document.getElementById(
-        "resizableRestaurantDiv"
-      );
+      const resizableRestaurantDiv = resizableRestaurantDivRef.current;
       if (!resizableRestaurantDiv || !scrolled) return;
 
       if (window.scrollY === 0) {
@@ -308,7 +305,7 @@ const RestaurantMenu = () => {
           <section className="sm:hidden">
             <div className="scrollbar-hidden mb-10 animated-fade">
               <div
-                id="resizableRestaurantDiv"
+                ref={resizableRestaurantDivRef}
                 className="smooth-resize h-screen relative capitalize mb-10"
               >
                 <div className="h-full w-full">

diff --git a/website/pages/restaurants/[restaurant]/menus/[menu].tsx b/website/pages/restaurants/[restaurant]/menus/[menu].tsx
@@ -14,7 +14,7 @@ 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";
+import LayoutWithoutFooter from "@/components/Layout/withoutFooter";
 
 const RestaurantMenu = () => {
   const router = useRouter();
@@ -34,8 +34,8 @@ const RestaurantMenu = () => {
           const { data: menusData, error } = await supabase
             .from("menus")
             .select("id, name")
-            .eq("restaurant_id", atob(suffix!));
-          // .eq("id", atob(menuSuffix!));
+            .eq("restaurant_id", atob(suffix!))
+            .eq("id", atob(menuSuffix!));
 
           if (error) return error;