From 8dc60b55a21e619f9978bbd870430b0fd10ec6f7 Mon Sep 17 00:00:00 2001
From: Jonath-z <jonathanzihindula95@gmail.com>
Date: Thu, 29 Dec 2022 10:18:55 +0200
Subject: [PATCH] fix: fix carousel not scrolling on first render

---
 components/modules/FeaturedAlbum/index.tsx        |  8 ++------
 components/modules/__modules__/Carousel/index.tsx |  6 ++----
 components/modules/hooks/useSideScroll.ts         | 10 ++++------
 tsconfig.json                                     |  3 ++-
 4 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/components/modules/FeaturedAlbum/index.tsx b/components/modules/FeaturedAlbum/index.tsx
index a777559..6ebc016 100644
--- 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
index 4040c06..20e82f3 100644
--- 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
index e21c921..cc00184 100644
--- 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
index 217cf20..ae6428b 100644
--- 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"]
 }