From 59ee9d4908008382d586ae081e9e3eccdd60c19b Mon Sep 17 00:00:00 2001
From: Seun Taiwo <lorddro1532@gmail.com>
Date: Sun, 31 Oct 2021 23:15:19 +0100
Subject: [PATCH] Fixed bugs

---
 src/components/Collection/index.tsx      | 22 ++++++++++------------
 src/components/common/Carousel/index.tsx | 11 +++++++++--
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/components/Collection/index.tsx b/src/components/Collection/index.tsx
index eb47226..332209c 100644
--- a/src/components/Collection/index.tsx
+++ b/src/components/Collection/index.tsx
@@ -1,9 +1,9 @@
-import React, { useEffect, useCallback, useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { useCarousel } from "../common/Carousel";
 import { ApplicationStore } from "../../redux/types";
 import { setSelectedIndex } from "../../redux/App/actionCreators";
-import { playNavigationAudio, pageLoading } from "../../helpers";
+import { pageLoading } from "../../helpers";
 import Collection from "./Collection";
 
 const CollectionContainer: React.FC = () => {
@@ -15,23 +15,21 @@ const CollectionContainer: React.FC = () => {
 
   const dispatch = useDispatch();
 
-  const onNavMove = useCallback(() => {
-    playNavigationAudio();
-  }, []);
+
 
   useEffect(() => {
     document.onkeydown = (e) => {
       if (!pageLoading()) {
         if (e.key === "ArrowRight") {
-          if (selectedIndex + 1 !== games.length)
+          if (selectedIndex + 1 !== games.length) {
             dispatch(setSelectedIndex(selectedIndex + 1));
-          carouselInstance.carouselData?.scrollRight();
-          onNavMove();
+            carouselInstance.carouselData?.scrollRight();
+          }
         } else if (e.key === "ArrowLeft") {
-          if (selectedIndex !== 0)
+          if (selectedIndex !== 0) {
             dispatch(setSelectedIndex(selectedIndex - 1));
-          carouselInstance.carouselData?.scrollLeft();
-          onNavMove();
+            carouselInstance.carouselData?.scrollLeft();
+          }
         }
       }
     };
@@ -40,7 +38,7 @@ const CollectionContainer: React.FC = () => {
     carouselInstance.carouselData,
     games.length,
     dispatch,
-    onNavMove,
+    games
   ]);
 
   useEffect(() => {
diff --git a/src/components/common/Carousel/index.tsx b/src/components/common/Carousel/index.tsx
index 834bdc4..78e328b 100644
--- a/src/components/common/Carousel/index.tsx
+++ b/src/components/common/Carousel/index.tsx
@@ -7,6 +7,7 @@ import React, {
 } from "react";
 import { CarouselProps, RefType, CarouselData } from "./types";
 import Carousel from "./Carousel";
+import { playNavigationAudio } from './../../../helpers'
 
 export const useCarousel = () => {
   const [carouselData, setCarouselData] = useState<CarouselData | null>(null);
@@ -31,15 +32,20 @@ const CarouselContainer: React.FC<CarouselProps> = ({
     React.Children.map(children, () => createRef())
   );
 
+  const onNavMove = useCallback(() => {
+    playNavigationAudio();
+  }, []);
+
   const scrollRight = useCallback(
     (step = 1) => {
       if (transformCount.current < refs.length - numberToShow) {
         transform.current = transform.current + step * itemWidth;
         containerRef.current!.style.transform = `translateX(-${transform.current}px)`;
         transformCount.current += 1;
+        onNavMove();
       }
     },
-    [itemWidth, transform, refs.length, numberToShow]
+    [itemWidth, transform, numberToShow, onNavMove, refs]
   );
 
   const scrollLeft = useCallback(
@@ -48,9 +54,10 @@ const CarouselContainer: React.FC<CarouselProps> = ({
         transform.current = transform.current - step * itemWidth;
         containerRef.current!.style.transform = `translateX(-${transform.current}px)`;
         transformCount.current -= 1;
+        onNavMove();
       }
     },
-    [itemWidth, transform]
+    [itemWidth, transform, onNavMove]
   );
 
   useEffect(() => {