Update hot projects scrolling logic

NEARBuilders · Aug 8, 2024 · 51ed49b · 51ed49b
1 parent b3b7f63
commit 51ed49b
Showing 1 changed file with 25 additions and 8 deletions.
diff --git a/components/home/hot-projects/scrollable-projects.tsx b/components/home/hot-projects/scrollable-projects.tsx
@@ -2,7 +2,7 @@
 
 import ProjectCard from "@/components/ui/project-card";
 import { useDraggable } from "react-use-draggable-scroll";
-import { useRef, useState, useEffect } from "react";
+import { useRef, useState, useEffect, useMemo } from "react";
 import { ProjectId, ProjectRecord } from "@/lib/types";
 
 interface ScrollableProjectsProps {
@@ -12,7 +12,11 @@ interface ScrollableProjectsProps {
 export default function ScrollableProjects({
   projects,
 }: ScrollableProjectsProps) {
-  const projectKeys = Object.keys(projects);
+  const projectKeys = Object.keys(projects).slice(0, 5);
+  const [duplicatedProjects, setDuplicatedProjects] = useState<ProjectId[]>([
+    ...projectKeys,
+    ...projectKeys,
+  ]);
   const containerRef =
     useRef<HTMLDivElement>() as React.MutableRefObject<HTMLInputElement>;
   const { events } = useDraggable(containerRef, {
@@ -46,19 +50,32 @@ export default function ScrollableProjects({
     };
   }, []);
 
+  const viewportWidth = window.innerWidth;
   useEffect(() => {
     const scrollElement = containerRef.current;
     let scrollInterval: NodeJS.Timeout;
 
+    // do not start scrolling if the viewport is smaller than the container
+    if (viewportWidth > containerRef.current?.scrollWidth / 2) {
+      if (duplicatedProjects.length > projectKeys.length) {
+        setDuplicatedProjects(projectKeys);
+      }
+      return;
+    }
+
     const startScrolling = () => {
       scrollInterval = setInterval(() => {
+        const scrollOffset = 24;
+        const padding = 16;
         if (scrollElement) {
-          scrollElement.scrollLeft += 1;
+          const scrollSpeed = 1;
           if (
             scrollElement.scrollLeft + scrollElement.clientWidth >=
-            scrollElement.scrollWidth
+            scrollElement.scrollWidth / 2 + (viewportWidth + padding)
           ) {
-            scrollElement.scrollLeft = 0; // Reset scroll to top when it reaches the bottom
+            scrollElement.scrollLeft = scrollOffset; // Reset scroll to top when it reaches the bottom
+          } else {
+            scrollElement.scrollLeft += scrollSpeed;
           }
         }
       }, 15); // Adjust the speed of scrolling here
@@ -69,7 +86,7 @@ export default function ScrollableProjects({
     }
 
     return () => clearInterval(scrollInterval);
-  }, [isHovered, isTouched]);
+  }, [isHovered, isTouched, projectKeys, duplicatedProjects, viewportWidth]);
 
   return (
     <div className="relative max-w-full">
@@ -88,8 +105,8 @@ export default function ScrollableProjects({
         onTouchEnd={() => setIsTouched(false)}
         className="no-scrollbar mt-14 flex gap-4 overflow-x-auto px-4"
       >
-        {projectKeys.map((pid: any) => (
-          <ProjectCard project={projects[pid]} key={pid} />
+        {duplicatedProjects.map((pid: any, index) => (
+          <ProjectCard project={projects[pid]} key={index} />
         ))}
       </div>
     </div>