Refactor getting bowser height

canopas · Apr 30, 2024 · c9d6db4 · c9d6db4
1 parent c15b2fa
commit c9d6db4
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 9 deletions.
diff --git a/website/components/FoodCategory/index.tsx b/website/components/FoodCategory/index.tsx
@@ -24,7 +24,7 @@ const FoodCategory = () => {
       try {
         const { data, error } = await supabase
           .from("categories")
-          .select()
+          .select("*")
           .eq("restaurant_id", 0)
           .order("id", { ascending: true });
 
@@ -43,7 +43,7 @@ const FoodCategory = () => {
 
   return (
     <>
-      <section className="bg-primary/[.03] py-16 md:py-20 lg:py-28">
+      <section className="py-16 md:py-20 lg:py-28">
         <div className="container">
           <SectionTitle
             title="What's on your mind?"

diff --git a/website/components/Hero/index.tsx b/website/components/Hero/index.tsx
@@ -76,6 +76,14 @@ const Hero = () => {
 
   useEffect(() => {
     setScreenHeight(window.innerHeight);
+
+    window.addEventListener("resize", () =>
+      setScreenHeight(window.innerHeight)
+    );
+    return () =>
+      window.removeEventListener("resize", () =>
+        setScreenHeight(window.innerHeight)
+      );
   }, []);
 
   return (

diff --git a/website/components/PageNotFound/index.tsx b/website/components/PageNotFound/index.tsx
@@ -1,9 +1,29 @@
 import Image from "next/image";
+import { useEffect, useState } from "react";
 
 const NotFound = () => {
+  const [screenHeight, setScreenHeight] = useState<number>(0);
+
+  useEffect(() => {
+    setScreenHeight(window.innerHeight);
+
+    window.addEventListener("resize", () =>
+      setScreenHeight(window.innerHeight)
+    );
+    return () =>
+      window.removeEventListener("resize", () =>
+        setScreenHeight(window.innerHeight)
+      );
+  }, []);
+
   return (
-    <div className="h-screen select-none">
-      <div className="animated-fade-y flex h-screen w-full">
+    <div className="select-none">
+      <div
+        className="animated-fade-y flex w-full"
+        style={{
+          height: screenHeight != 0 ? screenHeight + "px" : "100vh",
+        }}
+      >
         <Image
           className="object-cover w-full h-full"
           src="/images/not-found.webp"
@@ -12,7 +32,12 @@ const NotFound = () => {
           loading="lazy"
         />
       </div>
-      <div className="animated-fade-y absolute top-0 bg-black h-screen w-full bg-opacity-60">
+      <div
+        className="animated-fade-y absolute top-0 bg-black w-full bg-opacity-60"
+        style={{
+          height: screenHeight != 0 ? screenHeight + "px" : "100vh",
+        }}
+      >
         <div className="container h-full items-center justify-center text-white flex flex-col">
           <div className="text-3xl sm:text-5xl md:text-7xl font-extrabold border-b border-primary pb-2 sm:pb-3 md:pb-5">
             Not Found

diff --git a/website/pages/about/index.tsx b/website/pages/about/index.tsx
@@ -11,6 +11,14 @@ const About = () => {
 
   useEffect(() => {
     setScreenHeight(window.innerHeight);
+
+    window.addEventListener("resize", () =>
+      setScreenHeight(window.innerHeight)
+    );
+    return () =>
+      window.removeEventListener("resize", () =>
+        setScreenHeight(window.innerHeight)
+      );
   }, []);
 
   return (

diff --git a/website/pages/category/[category].tsx b/website/pages/category/[category].tsx
@@ -21,6 +21,10 @@ const Category = () => {
 
   useEffect(() => {
     const fetchCategoryData = async () => {
+      if (restaurantsData.length != 0) {
+        return;
+      }
+
       if (suffix) {
         try {
           const { data, error } = await supabase
@@ -38,7 +42,7 @@ const Category = () => {
               .from("categories")
               .select("id, restaurant_id, image")
               .neq("restaurant_id", 0)
-              .order('id', { ascending: false })
+              .order("id", { ascending: false })
               .contains("tags", [data.name.toLowerCase()]);
 
           if (categoriesError) throw categoriesError;
@@ -89,7 +93,7 @@ const Category = () => {
     };
 
     fetchCategoryData();
-  }, [suffix]);
+  }, [restaurantsData.length, suffix]);
 
   return (
     <>

diff --git a/website/pages/restaurants/[restaurant]/index.tsx b/website/pages/restaurants/[restaurant]/index.tsx
@@ -99,6 +99,15 @@ const RestaurantMenu = () => {
 
     fetchRestaurantData();
     fetchDishes();
+
+    window.addEventListener("resize", () =>
+      setScreenHeight(window.innerHeight)
+    );
+
+    return () =>
+      window.removeEventListener("resize", () =>
+        setScreenHeight(window.innerHeight)
+      );
   }, [restaurant, router, suffix]);
 
   const resizableRestaurantDivRef = useRef<HTMLDivElement>(null);
@@ -391,7 +400,7 @@ const RestaurantMenu = () => {
                 </div>
               </div>
               <div className="scrollbar-hidden mx-3">
-                <p className="text-2xl font-bold mb-5 border-b dark:border-white dark:border-opacity-30 border-black border-opacity-10 pb-2">
+                <p className="text-center text-2xl font-bold mb-5 border-b dark:border-white dark:border-opacity-30 border-black border-opacity-10 pb-2">
                   Menus
                 </p>
                 <div className="grid grid-cols-2 gap-3 h-full w-full">

diff --git a/website/pages/restaurants/[restaurant]/menus/[menu].tsx b/website/pages/restaurants/[restaurant]/menus/[menu].tsx
@@ -35,6 +35,8 @@ const RestaurantMenu = () => {
     setScreenHeight(window.innerHeight);
 
     const fetchDishes = async () => {
+      if (menuData) return;
+
       if (suffix && menuSuffix) {
         try {
           const { data, error } = await supabase
@@ -70,7 +72,7 @@ const RestaurantMenu = () => {
     };
 
     fetchDishes();
-  }, [suffix, menuSuffix]);
+  }, [suffix, menuSuffix, menuData]);
 
   const carouselRef = useRef<HTMLDivElement>(null);
   const [numDivsToRender, setNumDivsToRender] = useState(2); // Initial number of dish to render
@@ -109,6 +111,15 @@ const RestaurantMenu = () => {
         }
       };
     }
+
+    window.addEventListener("resize", () =>
+      setScreenHeight(window.innerHeight)
+    );
+
+    return () =>
+      window.removeEventListener("resize", () =>
+        setScreenHeight(window.innerHeight)
+      );
   }, [carouselRef, numDivsToRender, menuData?.length]);
 
   return (