From b9aa36765209d462951fbf23055b5ae8a270f08c Mon Sep 17 00:00:00 2001
From: andrewbrodko <work.andrewbrodko@gmail.com>
Date: Thu, 24 Dec 2020 11:44:05 +0300
Subject: [PATCH] Dedicated timer initialization for Carousel

---
 src/index.tsx | 37 ++++++++++++++-----------------------
 1 file changed, 14 insertions(+), 23 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 0739a4f..6fc1f78 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -23,40 +23,39 @@ const Carousel: React.FC<{
   const [slides, setSlides] = useState(data);
   const [swipe, setSwipe] = useState<number | undefined>();
   const [focused, setFocused] = useState(true);
+  const [rnd, setRnd] = useState(0);
 
   useEffect(() => {
     window.addEventListener('blur', () => setFocused(false));
     window.addEventListener('focus', () => setFocused(true));
+    const int = interval
+      ? setInterval(() => setRnd(Math.random() * 10), interval)
+      : 0;
+
     return () => {
       window.removeEventListener('blur', () => setFocused(false));
       window.removeEventListener('focus', () => () => setFocused(true));
+      if (interval) clearInterval(int);
     };
   }, []);
 
   useEffect(() => {
-    if (data.length === 2) setSlides([...data, ...data]);
-  }, [data]);
-
-  useEffect(() => {
-    if (interval && focused) {
-      if (typeof swipe !== 'undefined') clearInterval(swipe);
-      setSwipe(setInterval(() => getNext(), interval));
-    }
-  }, [focused, move, interval]);
+    if (focused) getNext();
+  }, [rnd]);
 
-  const getPrev = () => {
-    setCurrent(current - 1 < 0 ? slides.length - 1 : current - 1);
-    setMove(move + 1);
+  const getPrev = (m = move, c = current) => {
+    setMove(m + 1);
+    setCurrent(c - 1 < 0 ? data.length - 1 : c - 1);
   };
 
   const getPos = (i: number) => {
-    setCurrent(i);
     setMove(move - (i - current));
+    setCurrent(i);
   };
 
-  const getNext = () => {
-    setCurrent(current + 1 >= slides.length ? 0 : current + 1);
+  const getNext = (m = move, c = current) => {
     setMove(move - 1);
+    setCurrent(c + 1 >= data.length ? 0 : c + 1);
   };
 
   const getOffsets = () => {
@@ -72,14 +71,6 @@ const Carousel: React.FC<{
     dot: (selected: boolean) => cx({ dot: true, selected }),
   };
 
-  // for (const s of slides) {
-  //   const img = new Image();
-  //   img.onload = function () {
-  //     if (this.width > maxW) setMaxW(this.width);
-  //   };
-  //   img.src = s;
-  // }
-
   return (
     <div className={styles.wrapper}>
       <div