Refactor UI

website/app/category/[category]/category.tsx

@@ -6,17 +6,25 @@ import SectionTitle from "@/components/Common/SectionTitle";
 import Restaurants from "./restaurant";
 import { useEffect, useState } from "react";
 
-const Category = ({
-  paramsData,
-}: {
-  paramsData: { category: string };
-}) => {
+const Category = ({ paramsData }: { paramsData: { category: string } }) => {
   const [isCategoryLoading, setIsCategoryLoading] = useState(true);
   const [categoryData, setCategoryData] = useState<any>({});
   const [isRestaurantsLoading, setIsRestaurantsLoading] = useState(true);
-  const [restaurantsData, setRestaurantsData] = useState([]);
+  const [restaurantsData, setRestaurantsData] = useState<any[]>([]);
 
   useEffect(() => {
+    const fetchRestaurantsDishes = async () => {
+      const { data: dishesData } = await supabase
+        .from("categories")
+        .select("image")
+        .in("tags", [categoryData.name]);
+
+      console.log(dishesData);
+
+      // setRestaurantsData(restaurant);
+      setIsRestaurantsLoading(false);
+    };
+
     const fetchCategoryData = async () => {
       try {
         const { data, error } = await supabase
@@ -25,63 +33,47 @@ const Category = ({
           .eq("id", paramsData.category)
           .single();
 
-        if (error) {
-          throw error;
-        }
+        if (error) throw error;
 
         setCategoryData(data);
         setIsCategoryLoading(false);
-        fetchRestaurantsDishes();
+
+        const { data: categoriesData, error: categoriesError } = await supabase
+          .from("categories")
+          .select("id, restaurant_id, image")
+          .contains("tags", [data.name.toLowerCase()]);
+
+        if (categoriesError) throw categoriesError;
+
+        const restaurant = await Promise.all(
+          categoriesData.map(async (category) => {
+            const { data: restaurantData, error: restaurantError } =
+              await supabase
+                .from("restaurants")
+                .select("id, name, address")
+                .eq("id", category.restaurant_id)
+                .single();
+
+            if (restaurantError) throw restaurantError;
+
+            return {
+              ...restaurantData,
+              image: category.image,
+              rating: 0,
+              reviews: 0,
+            };
+          })
+        );
+
+        setRestaurantsData(restaurant);
+        setIsRestaurantsLoading(false);
       } catch (error) {
         console.error("Error fetching category data:", error.message);
       }
     };
 
-    const fetchRestaurantsDishes = async () => {
-      const { data: dishesData } = await supabase
-        .from("dishes")
-        .select("menu_id, images, video")
-        .eq("category_id", paramsData.category);
-
-      const restaurant = await Promise.all(
-        dishesData.map(async (dish) => {
-          const { data: menuData, error: menuError } = await supabase
-            .from("menus")
-            .select("restaurant_id")
-            .eq("id", dish.menu_id)
-            .single();
-
-          if (menuError) {
-            throw menuError;
-          }
-
-          const { data: restaurantData, error: restaurantError } =
-            await supabase
-              .from("restaurants")
-              .select("id, name, address")
-              .eq("id", menuData.restaurant_id)
-              .single();
-
-          if (restaurantError) {
-            throw restaurantError;
-          }
-
-          return {
-            ...restaurantData,
-            video: dish.video,
-            image: dish.images[0],
-            rating: 4.2,
-            reviews: 250,
-          };
-        })
-      );
-
-      setRestaurantsData(restaurant);
-      setIsRestaurantsLoading(false);
-    };
-
     fetchCategoryData();
-  }, [paramsData.category]);
+  }, []);
 
   return (
     <section className="py-16 md:py-20 lg:py-28">
@@ -92,7 +84,7 @@ const Category = ({
             paragraph={categoryData.description}
             customClass="mx-auto mb-16 mt-20 capitalize animated-fade-y"
           />
-          {!isCategoryLoading ? (
+          {/* {!isCategoryLoading ? (
             <div className="animated-fade-y mb-5 grid w-full grid-cols-2 gap-5 sm:grid-cols-4 lg:w-2/3 xl:w-1/2">
               <button className="rounded-full border border-black px-5 py-2 font-semibold transition-all duration-500 hover:bg-black hover:text-white dark:border-white dark:hover:bg-white dark:hover:text-black">
                 Filter
@@ -109,7 +101,7 @@ const Category = ({
             </div>
           ) : (
             ""
-          )}
+          )} */}
           <Restaurants
             isLoading={isRestaurantsLoading}
             restaurantsData={restaurantsData}
@@ -124,4 +116,4 @@ const Category = ({
   );
 };
 
-export default Category;
+export default Category;

website/app/category/[category]/page.tsx

@@ -12,7 +12,11 @@ const FoodCategoryRestaurants = ({
 export default FoodCategoryRestaurants;
 
 export async function generateStaticParams() {
-  const { data, error } = await supabase.from("categories").select("id");
+  const { data, error } = await supabase
+    .from("categories")
+    .select("id")
+    .eq("restaurant_id", 0);
+
   if (error) throw error;
 
   const pagesParams: any[] = [];

website/app/category/[category]/restaurant.tsx

@@ -49,19 +49,30 @@ const RestaurantsPage = ({
                         alt="item-image"
                       />
                     )}
-                    <p className="absolute -mt-14 w-full bg-black bg-opacity-35 pb-2 pl-5 pt-2 text-xl font-extrabold text-white dark:border-white sm:text-2xl">
+                    <p className="absolute -mt-14 w-full bg-black bg-opacity-35 pb-2 pl-5 pt-2 text-xl font-extrabold capitalize text-white dark:border-white sm:text-2xl">
                       {item.name}
                     </p>
                     <p className="mb-9 mt-3 text-sm sm:mb-14 sm:text-base">
                       {item.address}
                     </p>
                     <div className="absolute bottom-0 flex w-full flex-col gap-2">
                       <div className="flex items-center justify-between font-extrabold">
-                        <p className="">
-                          {item.reviews}{" "}
-                          <span className="text-sm font-normal"> Reviews</span>
-                        </p>
-                        <p className="px-4 sm:py-2">⭐ {item.rating}</p>
+                        {item.reviews > 0 ? (
+                          <p className="">
+                            {item.reviews}{" "}
+                            <span className="text-sm font-normal">
+                              {" "}
+                              Reviews
+                            </span>
+                          </p>
+                        ) : (
+                          ""
+                        )}
+                        {item.rating > 0 ? (
+                          <p className="px-4 sm:py-2">⭐ {item.rating}</p>
+                        ) : (
+                          ""
+                        )}
                       </div>
                     </div>
                   </Link>

website/components/FoodCategory/index.tsx

@@ -20,7 +20,11 @@ const FoodCategory = () => {
 
   useEffect(() => {
     const fetchCategories = async () => {
-      const { data } = await supabase.from("categories").select();
+      const { data } = await supabase
+        .from("categories")
+        .select()
+        .eq("restaurant_id", 0);
+
       setFoodData(data);
     };
 

website/next.config.js

@@ -5,7 +5,6 @@ const nextConfig = {
     appDir: true,
   },
   images: {
-    unoptimized: true,
     domains: ["mbbmnygwewvjsxsjtzbo.supabase.co"],
   },
 };