Merge pull request #78 from G-Techs/fix/carousel

fix: fix carousel not scrolling on first render
G-Techs · Dec 30, 2022 · 85d2027 · 85d2027 · vercel · Dec 30, 2022
2 parents 30a6053 + 8dc60b5
commit 85d2027
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 17 deletions.
diff --git a/components/modules/FeaturedAlbum/index.tsx b/components/modules/FeaturedAlbum/index.tsx
@@ -11,12 +11,8 @@ const FeaturedAlbum = () => {
       title="Featured Albums"
       className="mt-8 p-4 rounded-lg shadow-lg mr-4 bg-white"
     >
-      {data.map((song) => {
-        return (
-          <>
-            <FeaturedAlbumCard album={song} />
-          </>
-        );
+      {data.map((song, index) => {
+        return <FeaturedAlbumCard album={song} key={index} />;
       })}
     </Carousel>
   );

diff --git a/components/modules/__modules__/Carousel/index.tsx b/components/modules/__modules__/Carousel/index.tsx
@@ -23,9 +23,7 @@ const Carousel: FC<CarouselProps> = ({
       scrollContainer.current,
       40,
       200,
-      scrollContainer.current?.offsetWidth
-        ? -scrollContainer.current?.offsetWidth
-        : 0
+      -(scrollContainer.current?.offsetWidth as number)
     );
   };
 
@@ -34,7 +32,7 @@ const Carousel: FC<CarouselProps> = ({
       scrollContainer.current,
       40,
       200,
-      scrollContainer.current?.offsetWidth
+      scrollContainer.current?.offsetWidth as number
     );
   };
   return (

diff --git a/components/modules/hooks/useSideScroll.ts b/components/modules/hooks/useSideScroll.ts
@@ -8,12 +8,10 @@ const useSideScroll = () => {
     let scrollAmount = 0;
 
     const slideTimer = setInterval(() => {
-      if (element?.scrollLeft) {
-        element.scrollLeft += step;
-        scrollAmount += Math.abs(step);
-        if (scrollAmount >= distance) {
-          clearInterval(slideTimer);
-        }
+      element!.scrollLeft += step as number;
+      scrollAmount += Math.abs(step as number);
+      if (scrollAmount >= distance) {
+        clearInterval(slideTimer);
       }
     }, speed);
   };

diff --git a/tsconfig.json b/tsconfig.json
@@ -22,7 +22,8 @@
     "components/modules/__modules__/_Vectors/wavePlayVector.jsx",
     "components/modules/AddNewSinger/index.tsx",
     "components/modules/utils/config/audioPlayer.tsx",
-    "components/modules/utils/config/audioControls.tsx"
+    "components/modules/utils/config/audioControls.tsx",
+    "components/modules/__modules__/Carousel/index.jsx"
   ],
   "exclude": ["node_modules"]
 }