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

Redesign restaurants categories page
canopas · Jun 3, 2024 · f455133 · f455133
2 parents 6474ef8 + 32cd0fe
commit f455133
Show file tree

Hide file tree

Showing 8 changed files with 250 additions and 158 deletions.
diff --git a/website/components/Reel/LoadImage.tsx b/website/components/Reel/LoadImage.tsx
@@ -0,0 +1,21 @@
+import { useState } from "react";
+import Image from "next/image";
+
+const LoadImage = ({ src, alt }: { src: string; alt: string }) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  return (
+    <Image
+      src={src}
+      alt={alt}
+      height={100}
+      width={100}
+      className={`w-full transition-opacity duration-[2000]  ${
+        isLoaded ? "opacity-100" : "opacity-0"
+      }`}
+      onLoad={() => setIsLoaded(true)}
+    />
+  );
+};
+
+export default LoadImage;
diff --git a/website/components/Reel/index.tsx b/website/components/Reel/index.tsx
@@ -71,75 +71,66 @@ const Reels = ({ dishesData, isDishesLoading }: ReelProps) => {
 
   return (
     <section className="select-none">
-      <div
-        className="reelsContainer scrollbar-hidden animated-fade"
-        style={{
-          height: screenHeight != 0 ? screenHeight + "px" : "100vh",
-        }}
-      >
-        {isDishesLoading ? (
-          <div className="reelsContainer scrollbar-hidden w-full">
-            <MenuDishSkeleton classes="reel" />
-          </div>
-        ) : dishesData.length > 0 ? (
-          <div
-            ref={carouselRef}
-            className="reelsContainer scrollbar-hidden w-full"
-            style={{
-              height: screenHeight != 0 ? screenHeight + "px" : "100vh",
-            }}
-          >
-            {dishesData
-              .slice(0, numDivsToRender)
-              .map((data: any, index: any) => (
-                <div
-                  key={"menu-dish-key-" + index}
-                  id={`menu-dish-${index}`}
-                  className={`reel relative carousel-item ${
-                    data ? "animated-fade" : ""
+      {isDishesLoading ? (
+        <div className="reelsContainer scrollbar-hidden w-full">
+          <MenuDishSkeleton classes="reel" />
+        </div>
+      ) : dishesData.length > 0 ? (
+        <div
+          ref={carouselRef}
+          className="reelsContainer scrollbar-hidden w-full"
+          style={{
+            height: screenHeight != 0 ? screenHeight + "px" : "100vh",
+          }}
+        >
+          {dishesData.slice(0, numDivsToRender).map((data: any, index: any) => (
+            <div
+              key={"menu-dish-key-" + index}
+              id={`menu-dish-${index}`}
+              className={`reel relative carousel-item ${
+                data ? "animated-fade" : ""
+              }`}
+              style={{
+                height: screenHeight != 0 ? screenHeight + "px" : "100vh",
+              }}
+            >
+              {data.video ? (
+                <VideoPlayer
+                  src={data.video}
+                  poster={data.video_thumbnail}
+                  classes={"h-full w-full object-cover"}
+                />
+              ) : (
+                <SwiperComponent images={data.images}></SwiperComponent>
+              )}
+              <div className="absolute bottom-0 z-[1] flex h-full w-full flex-col gap-2 bg-gradient-to-t from-black/80 via-transparent to-black/60 p-5 pb-5 text-white">
+                <div className="flex h-full items-end justify-between gap-5 text-xl font-bold">
+                  <p className="min-w-2/5">{data.name}</p>
+                  <p className="text-lg text-white/70">₹{data.price}</p>
+                </div>
+                <p
+                  className={`text-sm pt-2 ${
+                    data.description && data.description != ""
+                      ? "border-t border-gray-300 border-opacity-30"
+                      : ""
                   }`}
-                  style={{
-                    height: screenHeight != 0 ? screenHeight + "px" : "100vh",
-                  }}
                 >
-                  {data.video ? (
-                    <VideoPlayer
-                      src={data.video}
-                      poster={data.video_thumbnail}
-                      classes={"h-full w-full object-cover"}
-                    />
-                  ) : (
-                    <SwiperComponent images={data.images}></SwiperComponent>
-                  )}
-                  <div className="absolute bottom-0 z-[1] flex h-full w-full flex-col gap-2 bg-gradient-to-t from-black/80 via-transparent to-black/60 p-5 pb-5 text-white">
-                    <div className="flex h-full items-end justify-between gap-5 text-xl font-bold">
-                      <p className="min-w-2/5">{data.name}</p>
-                      <p className="text-lg text-white/70">₹{data.price}</p>
-                    </div>
-                    <p
-                      className={`text-sm pt-2 ${
-                        data.description && data.description != ""
-                          ? "border-t border-gray-300 border-opacity-30"
-                          : ""
-                      }`}
-                    >
-                      {data.description}
-                    </p>
-                  </div>
-                </div>
-              ))}
-          </div>
-        ) : (
-          <div
-            className="flex items-center justify-center"
-            style={{
-              height: screenHeight != 0 ? screenHeight + "px" : "100vh",
-            }}
-          >
-            <NoDataFound text="😕 Oops, No dishes available at the moment!" />
-          </div>
-        )}
-      </div>
+                  {data.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div
+          className="flex items-center justify-center"
+          style={{
+            height: screenHeight != 0 ? screenHeight + "px" : "100vh",
+          }}
+        >
+          <NoDataFound text="😕 Oops, No dishes available at the moment!" />
+        </div>
+      )}
     </section>
   );
 };

diff --git a/website/components/Reel/swiper.tsx b/website/components/Reel/swiper.tsx
@@ -9,6 +9,7 @@ import "swiper/css/effect-fade";
 import { useEffect, useRef, useState } from "react";
 import useAutoplayVisibility from "./hook";
 import { useAppSelector } from "@/store/store";
+import LoadImage from "./LoadImage";
 
 type SwiperCore = any;
 
@@ -60,13 +61,14 @@ const SwiperComponent = ({ images }: { images: any }) => {
                 }}
               >
                 <div className="flex h-full w-full items-center bg-black bg-opacity-20 backdrop-blur-sm">
-                  <Image
+                  {/* <Image
                     src={imageUrl}
                     height={100}
                     width={100}
                     alt="menu-dish-image"
                     className="w-full"
-                  />
+                  /> */}
+                  <LoadImage src={imageUrl} alt="menu-dish-image" />
                 </div>
               </div>
             </SwiperSlide>

diff --git a/website/hooks/useScrollReset.tsx b/website/hooks/useScrollReset.tsx
@@ -0,0 +1,17 @@
+import { useRef, useEffect } from "react";
+
+const useScrollReset = (isOpen: boolean) => {
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    console.log("ref called");
+    if (isOpen && contentRef.current) {
+      console.log(contentRef.current.scrollTop);
+      contentRef.current.scrollTop = 0;
+    }
+  }, [isOpen]);
+
+  return contentRef;
+};
+
+export default useScrollReset;