From 7abb33152b11576e956146fbb547eabaed3769e5 Mon Sep 17 00:00:00 2001
From: donganh123 <donganh12321@gmail.com>
Date: Thu, 20 Apr 2023 23:22:34 +0700
Subject: [PATCH] fix: update homepage cursor state

---
 src/containers/Homepage/HomeHero.tsx             | 14 +++++++++++++-
 .../Homepage/RandomIterativeCycler.tsx           | 16 +++++-----------
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/containers/Homepage/HomeHero.tsx b/src/containers/Homepage/HomeHero.tsx
index 0d747409..a479ee14 100644
--- a/src/containers/Homepage/HomeHero.tsx
+++ b/src/containers/Homepage/HomeHero.tsx
@@ -55,6 +55,17 @@ const _HomeHero = ({ randomGenerativeToken, articles }: HomeHeroProps) => {
     const nbObjkts = randomGenerativeTokenWithDups?.objkts.length || 0
     return Math.floor(((cursor + 1) * 100) / nbObjkts)
   }, [cursor, randomGenerativeTokenWithDups?.objkts.length])
+
+  const changeCursorHandler = () => {
+    const randomGenerativeTokenWithDupsIterations =
+      randomGenerativeTokenWithDups?.objkts
+    if (!randomGenerativeTokenWithDupsIterations) return
+    setCursor((oldCursor) =>
+      oldCursor === randomGenerativeTokenWithDupsIterations.length - 1
+        ? 0
+        : oldCursor + 1
+    )
+  }
   return (
     <>
       <div className={style.container}>
@@ -78,7 +89,8 @@ const _HomeHero = ({ randomGenerativeToken, articles }: HomeHeroProps) => {
             {randomGenerativeTokenWithDups && (
               <RandomIterativeCycler
                 generativeToken={randomGenerativeTokenWithDups}
-                onChangeCursor={setCursor}
+                cursor={cursor}
+                onChangeCursor={changeCursorHandler}
               />
             )}
           </div>
diff --git a/src/containers/Homepage/RandomIterativeCycler.tsx b/src/containers/Homepage/RandomIterativeCycler.tsx
index affcb64c..54fe4e9e 100644
--- a/src/containers/Homepage/RandomIterativeCycler.tsx
+++ b/src/containers/Homepage/RandomIterativeCycler.tsx
@@ -23,15 +23,16 @@ type CalculateItemPositionAndOpacity = (data: {
 
 interface RandomIterativeCyclerProps {
   generativeToken: GenerativeToken
-  onChangeCursor: (cursorPos: number) => void
+  cursor: number
+  onChangeCursor: () => void
 }
 
 const maxTimeSec = 5
 const _RandomIterativeCycler = ({
   generativeToken,
+  cursor,
   onChangeCursor,
 }: RandomIterativeCyclerProps) => {
-  const [cursor, setCursor] = useState(0)
   const [counterInSec, setCounterInSec] = useState(0)
   const calculateItemPositionAndOpacity =
     useCallback<CalculateItemPositionAndOpacity>(
@@ -83,17 +84,10 @@ const _RandomIterativeCycler = ({
   }, [])
   useEffect(() => {
     if (counterInSec > maxTimeSec) {
-      setCursor((oldCursor) => {
-        return oldCursor === generativeToken.objkts.length - 1
-          ? 0
-          : oldCursor + 1
-      })
+      onChangeCursor()
       setCounterInSec(0)
     }
-  }, [counterInSec, generativeToken.objkts.length])
-  useEffect(() => {
-    onChangeCursor(cursor)
-  }, [cursor, onChangeCursor])
+  }, [counterInSec, onChangeCursor])
   return (
     <div className={style.cycler}>
       {generativeToken.objkts?.map((objkt, idx) => {