fix(ts): refactor codebase for capacitor setup

components/SlidingGallery.tsx

@@ -1,13 +1,15 @@
-import React, { useState, useRef, useEffect } from "react";
-import Link from "next/link";
-import Image from "next/image";
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  UIEvent,
+} from "react";
 import styles from "../css/SlidingGallery.module.css";
+import { GalleryViews } from "@/types/gallery";
 
 interface SlidingGalleryProps {
-  views?: {
-    id: string;
-    content: React.ReactNode;
-  }[];
+  views: GalleryViews[] | undefined;
   className?: string;
   showPagination?: boolean;
   autoScroll?: boolean;
@@ -17,7 +19,7 @@ interface SlidingGalleryProps {
 }
 
 const SlidingGallery = ({
-  views = [],
+  views,
   className = "",
   showPagination = true,
   autoScroll = false,
@@ -25,15 +27,47 @@ const SlidingGallery = ({
   onSlideChange = () => {},
   height = "100vh",
 }: SlidingGalleryProps) => {
-  const [activeIdx, setActiveIdx] = useState(0);
+  const [activeIdx, setActiveIdx] = useState<number>(0);
   const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
-  const scrollRef = useRef(null);
-  const galleryRef = useRef(null);
-  const autoScrollRef = useRef(null);
+
+  const scrollRef = useRef<HTMLDivElement | null>(null);
+  const galleryRef = useRef<HTMLDivElement | null>(null);
+  const autoScrollRef = useRef<NodeJS.Timeout | null>(null);
+
+  const handleScroll = (event: UIEvent<HTMLDivElement>) => {
+    handleUserInteraction();
+    const scrollLeft = event.currentTarget.scrollLeft;
+    const slideWidth = dimensions.width;
+    const index = Math.round(scrollLeft / slideWidth);
+
+    if (index !== activeIdx) {
+      setActiveIdx(index);
+      onSlideChange(index);
+    }
+  };
+
+  const goToSlide = useCallback(
+    (index: number) => {
+      if (scrollRef.current) {
+        scrollRef.current.scrollTo({
+          left: index * dimensions.width,
+          behavior: "smooth",
+        });
+      }
+    },
+    [dimensions.width]
+  );
+
+  const handleDotClick = (index: number) => {
+    handleUserInteraction();
+    goToSlide(index);
+    setActiveIdx(index);
+    onSlideChange(index);
+  };
 
   // Auto-scroll functionality
   useEffect(() => {
-    if (autoScroll && views.length > 1) {
+    if (autoScroll && views && views.length > 1) {
       autoScrollRef.current = setInterval(() => {
         setActiveIdx((prevIdx) => {
           const nextIdx = (prevIdx + 1) % views.length;
@@ -48,15 +82,17 @@ const SlidingGallery = ({
         }
       };
     }
-  }, [autoScroll, autoScrollInterval, views.length]);
+  }, [autoScroll, autoScrollInterval, views?.length, goToSlide, views]);
 
   // Clear auto-scroll on user interaction
   const handleUserInteraction = () => {
     if (autoScrollRef.current) {
       clearInterval(autoScrollRef.current);
+      autoScrollRef.current = null;
     }
   };
 
+  // Update dimensions
   useEffect(() => {
     const updateDimensions = () => {
       if (galleryRef.current) {
@@ -67,18 +103,13 @@ const SlidingGallery = ({
       }
     };
 
-    // Initial dimension update
     updateDimensions();
-
-    // Add resize listener
     window.addEventListener("resize", updateDimensions);
-
-    // Cleanup
     return () => window.removeEventListener("resize", updateDimensions);
   }, []);
 
+  // Recalculate index when dimension changes
   useEffect(() => {
-    // Recalculate active index when dimensions change
     if (scrollRef.current && dimensions.width > 0) {
       const scrollLeft = scrollRef.current.scrollLeft;
       const slideWidth = dimensions.width;
@@ -87,34 +118,6 @@ const SlidingGallery = ({
     }
   }, [dimensions]);
 
-  const handleScroll = (event: { target: { scrollLeft: any } }) => {
-    handleUserInteraction();
-    const scrollLeft = event.target.scrollLeft;
-    const slideWidth = dimensions.width;
-    const index = Math.round(scrollLeft / slideWidth);
-    if (index !== activeIdx) {
-      setActiveIdx(index);
-      onSlideChange(index);
-    }
-  };
-
-  const goToSlide = (index) => {
-    if (scrollRef.current) {
-      scrollRef.current.scrollTo({
-        left: index * dimensions.width,
-        behavior: "smooth",
-      });
-    }
-  };
-
-  const handleDotClick = (index) => {
-    handleUserInteraction();
-    goToSlide(index);
-    setActiveIdx(index);
-    onSlideChange(index);
-  };
-
-  // Early return if no views
   if (!views || views.length === 0) {
     return (
       <div className={`${styles.gallery} ${className}`}>
@@ -138,6 +141,8 @@ const SlidingGallery = ({
         style={{
           width: "100%",
           height: "100%",
+          overflowX: "scroll",
+          display: "flex",
         }}
       >
         {views.map((item) => (
@@ -154,6 +159,7 @@ const SlidingGallery = ({
           </div>
         ))}
       </div>
+
       {showPagination && views.length > 1 && (
         <div className={styles.pagination}>
           {views.map((_, index) => (