Merge pull request #27 from canopas/change-menus-flow

Refactor UI in restaurant detail page

Author: cp-dharti-r

admin/pages/admins/index.tsx

@@ -23,7 +23,7 @@ const AdminsPage = () => {
       const { data, error } = await supabase
         .from("admins_roles_restaurants")
         .select("*, admins(id, name, email), roles(name)")
-        .order('id', { ascending: false })
+        .order("id", { ascending: false })
         .range((page - 1) * pageSize, pageSize * page - 1)
         .eq("restaurant_id", user.split("/")[2])
         .neq("admin_id", user.split("/")[0]);
@@ -71,13 +71,12 @@ const AdminsPage = () => {
     fetchAdmins(currentPage);
   }, [currentPage]);
 
-  const deleteRecord = async (id: number, relativeId: number) => {
+  const deleteRecord = async (id: number) => {
     try {
-      await supabase.from("admins").delete().eq("id", id).throwOnError();
       await supabase
         .from("admins_roles_restaurants")
         .delete()
-        .eq("id", relativeId)
+        .eq("id", id)
         .throwOnError();
       setAdminsData(adminsData.filter((x) => x.id != id));
       fetchCountAdmins();
@@ -188,7 +187,7 @@ const AdminsPage = () => {
                       className="text-red"
                       onClick={() =>
                         confirm("Are you sure you want to delete this admin?")
-                          ? deleteRecord(admin.admins.id, admin.id)
+                          ? deleteRecord(admin.id)
                           : ""
                       }
                     >

admin/pages/invited-members/add/index.tsx

@@ -96,7 +96,7 @@ const InvitedMemberPage = () => {
 
       await sendEmail({
         to: email,
-        subject: "Bite Space - Invitation To Join Space",
+        subject: "Invitation To Join Space",
         message: render(
           InviteMemberEmail({
             invited_by: data.admins.name,

website/components/BottomSheet/index.tsx

@@ -31,23 +31,31 @@ const BottomSheet = ({
     };
   }, [isOpen, onClose]);
 
+  const handleClose = () => {
+    if (window.history.state?.bottomSheetOpen) {
+      window.history.back();
+    } else {
+      onClose();
+    }
+  };
+
   return (
     <div
       className={`fixed inset-0 z-[100] flex items-end ${
         isOpen ? "block" : "hidden"
       }`}
     >
-      <div className="fixed inset-0" onClick={onClose}></div>
+      {/* <div className="fixed inset-0" onClick={onClose}></div> */}
       <header className="select-none header left-0 top-0 z-40 w-full items-center absolute p-3 flex gap-2 text-white">
         <button
-          onClick={onClose}
+          onClick={handleClose}
           className="flex gap-2 items-center bg-primary bg-opacity-50 dark:bg-opacity-30 border-b border-primary dark:border-opacity-50 px-3 py-1 text-sm font-semibold rounded-lg"
         >
           <span>{"<"}</span>
           Back
         </button>
         <span>|</span>
-        <p className="font-bold text-sm">{name} dishes</p>
+        <p className="font-bold text-sm">{name}</p>
       </header>
       <div className="h-full w-full bg-white dark:bg-black">
         <Reels dishesData={items} />

website/components/Reel/index.tsx

@@ -83,7 +83,16 @@ const Reels = ({ dishesData }: ReelProps) => {
 
   return (
     <section className="select-none">
-      {isLoading ? <MenuDishSkeleton classes="reel" /> : ""}
+      {isLoading ? (
+        <MenuDishSkeleton
+          classes="reel"
+          style={{
+            height: screenHeight != 0 ? screenHeight + "px" : "100vh",
+          }}
+        />
+      ) : (
+        ""
+      )}
       <div
         ref={carouselRef}
         className="reelsContainer scrollbar-hidden w-full"
@@ -106,11 +115,18 @@ const Reels = ({ dishesData }: ReelProps) => {
               {!isLoading ? (
                 <div className="animated-fade">
                   {data.video ? (
-                    <VideoPlayer
-                      src={data.video}
-                      poster={data.video_thumbnail}
-                      classes={"h-full w-full object-cover"}
-                    />
+                    <div
+                      style={{
+                        height:
+                          screenHeight != 0 ? screenHeight + "px" : "100vh",
+                      }}
+                    >
+                      <VideoPlayer
+                        src={data.video}
+                        poster={data.video_thumbnail}
+                        classes={"h-full w-full object-cover"}
+                      />
+                    </div>
                   ) : (
                     <SwiperComponent images={data.images}></SwiperComponent>
                   )}

website/components/SkeletonPlaceholders/MenuDish.tsx

@@ -1,7 +1,8 @@
-const MenuDishSkeleton = ({ classes }: any) => {
+const MenuDishSkeleton = ({ classes, style }: any) => {
   return (
     <div
       className={`${classes} relative animate-pulse w-full bg-gray-200 dark:bg-black rounded-xl`}
+      style={style}
     >
       <div className="absolute flex h-full w-full flex-col gap-3 p-5 pb-10">
         <div className="flex flex-col justify-end h-full gap-5">

website/pages/category/restaurant.tsx

@@ -2,7 +2,7 @@
 
 import BottomSheet from "@/components/BottomSheet";
 import NoDataFound from "@/components/NoDataFound";
-import { useAppDispatch, useAppSelector } from "@/store/store";
+import { useAppDispatch } from "@/store/store";
 import { RestaurantData } from "@/types/category-by-id";
 import Image from "next/image";
 import Link from "next/link";
@@ -12,7 +12,6 @@ import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/css";
 import "swiper/css/pagination";
 
-import { Autoplay, Pagination } from "swiper/modules";
 import { setScreenHeightState } from "@/store/slice";
 
 const Restaurant = ({
@@ -49,7 +48,7 @@ const Restaurant = ({
       );
   }, [dispatch]);
 
-    return (
+  return (
     <>
       {restaurantsData && restaurantsData.length > 0 ? (
         <div className="flex flex-col gap-5">
@@ -82,8 +81,6 @@ const Restaurant = ({
                 <Swiper
                   slidesPerView={"auto"}
                   spaceBetween={20}
-                  autoplay={true}
-                  modules={[Autoplay]}
                   className="h-full w-full mt-6"
                 >
                   {item.menu.map((data, index) => (
@@ -134,7 +131,7 @@ const Restaurant = ({
                             width={100}
                           />
                         </div>
-                        <p className="mt-1 w-full font-extrabold capitalize sm:text-xl text-center">
+                        <p className="mt-1 w-full sm:w-96 font-extrabold capitalize sm:text-xl text-center">
                           {data.name}
                         </p>
                       </SwiperSlide>

website/pages/restaurants/[restaurant]/categories/[category].tsx

@@ -212,7 +212,7 @@ const RestaurantCategory = ({
                   Back
                 </button>
                 <span>|</span>
-                <p className="font-bold text-sm">{categoryData.name} dishes</p>
+                <p className="font-bold text-sm">{categoryData.name}</p>
               </header>
               <Reels
                 dishesData={dishesData}

website/pages/restaurants/[restaurant]/menus/[menu].tsx

@@ -230,7 +230,7 @@ const RestaurantMenu = ({ name, menus }: { name: string; menus: any }) => {
                   Back
                 </button>
                 <span>|</span>
-                <p className="font-bold text-sm">{menuName} dishes</p>
+                <p className="font-bold text-sm">{menuName}</p>
               </header>
               <Reels dishesData={menusData} />
             </NoHeaderFooterLayout>