From 558fbc703a43da54cc517e592505163e18008896 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Thu, 5 Nov 2020 18:06:07 +0700
Subject: [PATCH 1/2] made simple replacement for flow hero slider

---
 src/components/flow/FlowHero/index.tsx   | 93 +++++++-----------------
 src/components/flow/FlowHero/styles.scss | 17 +++++
 2 files changed, 43 insertions(+), 67 deletions(-)

diff --git a/src/components/flow/FlowHero/index.tsx b/src/components/flow/FlowHero/index.tsx
index 2f0c36b8..fae9074d 100644
--- a/src/components/flow/FlowHero/index.tsx
+++ b/src/components/flow/FlowHero/index.tsx
@@ -7,111 +7,70 @@ import { getURL } from '~/utils/dom';
 import { withRouter, RouteComponentProps } from 'react-router';
 import { URLS, PRESETS } from '~/constants/urls';
 import { Icon } from '~/components/input/Icon';
+import { INode } from "~/redux/types";
 
 type IProps = RouteComponentProps & {
   heroes: IFlowState['heroes'];
 };
 
 const FlowHeroUnconnected: FC<IProps> = ({ heroes, history }) => {
-  const [limit, setLimit] = useState(Math.min(heroes.length, 6));
+  const preset = useMemo(() => (window.innerWidth <= 768 ? PRESETS.cover : PRESETS.small_hero), []);
+  const [limit, setLimit] = useState(6);
   const [current, setCurrent] = useState(0);
-  const [loaded, setLoaded] = useState([]);
+  const [loaded, setLoaded] = useState<Partial<INode>[]>([]);
 
-  const timer = useRef(null);
-  const onLoad = useCallback(id => () => setLoaded([...loaded, id]), [setLoaded, loaded]);
-  const onNext = useCallback(() => {
-    clearTimeout(timer.current);
+  const onLoad = useCallback((i: number) => {
+    setLoaded([...loaded, heroes[i]])
+  }, [heroes, loaded, setLoaded])
 
-    if (loaded.length <= 1) return;
-
-    const index = loaded.findIndex(el => el === current);
-
-    setCurrent(index > loaded.length - 2 ? loaded[0] : loaded[index + 1]);
-  }, [loaded, current, setCurrent, timer]);
-
-  const onNextPress = useCallback(() => {
-    setLimit(Math.min(heroes.length, limit + 1));
-    onNext();
-  }, [onNext, heroes, limit, setLimit]);
-
-  const onPrevious = useCallback(() => {
-    clearTimeout(timer.current);
-
-    if (loaded.length <= 1) return;
-
-    const index = loaded.findIndex(el => el === current);
-
-    setCurrent(index > 0 ? loaded[index - 1] : loaded[loaded.length - 1]);
-  }, [loaded, current, setCurrent, timer]);
-
-  useEffect(() => {
-    timer.current = setTimeout(onNext, 5000);
-  }, [current, onNext]);
-
-  useEffect(() => {
-    if (current === 0 && loaded.length > 0) setCurrent(loaded[0]);
-  }, [loaded]);
-
-  useEffect(() => {
-    setLimit(limit > 0 ? Math.min(heroes.length, limit) : heroes.length);
-  }, [heroes, limit]);
-
-  const stopSliding = useCallback(() => {
-    clearTimeout(timer.current);
-    timer.current = setTimeout(onNext, 5000);
-  }, [timer, onNext]);
-
-  const onClick = useCallback(() => {
-    if (!current) return;
-
-    history.push(URLS.NODE_URL(current));
-  }, [current]);
+  const items = Math.min(heroes.length, limit)
 
   const title = useMemo(() => {
-    if (loaded.length === 0) return null;
-
-    const item = heroes.find(hero => hero.id === current);
-
-    if (!item || !item.title) return null;
-
-    return item.title;
+    return loaded[current]?.title || '';
   }, [loaded, current, heroes]);
 
-  const preset = useMemo(() => (window.innerWidth <= 768 ? PRESETS.cover : PRESETS.small_hero), []);
+  const onNext = useCallback(() => setCurrent(current < items - 1 ? current + 1 : 0), [current, items])
+  const onPrev = useCallback(() => setCurrent(current > 0 ? current - 1 : items - 1), [current, items])
 
   return (
-    <div className={styles.wrap} onMouseOver={stopSliding} onFocus={stopSliding}>
-      {loaded && loaded.length > 0 && (
+    <div className={styles.wrap}>
+      <div className={styles.loaders}>
+        {
+          heroes.slice(0, items).map((hero, i) => (
+            <img src={getURL({ url: hero.thumbnail }, preset)} key={hero.id} onLoad={() => onLoad(i)} />
+          ))
+        }
+      </div>
+
+      {loaded.length > 0 && (
         <div className={styles.info}>
           <div className={styles.title_wrap}>{title}</div>
 
           <div className={styles.buttons}>
-            <div className={styles.button} onClick={onPrevious}>
+            <div className={styles.button} onClick={onPrev}>
               <Icon icon="left" />
             </div>
-            <div className={styles.button} onClick={onNextPress}>
+            <div className={styles.button} onClick={onNext}>
               <Icon icon="right" />
             </div>
           </div>
         </div>
       )}
 
-      {heroes.slice(0, limit).map(hero => (
+      {loaded.length > 0 && loaded.slice(0, limit).map((hero, index) => (
         <div
           className={classNames(styles.hero, {
-            [styles.is_visible]: loaded.includes(hero.id),
-            [styles.is_active]: current === hero.id,
+            [styles.is_visible]: true,
+            [styles.is_active]: current === index,
           })}
           style={{
             backgroundImage: `url("${getURL({ url: hero.thumbnail }, preset)}")`,
           }}
           key={hero.id}
-          onClick={onClick}
         >
           <img
             src={getURL({ url: hero.thumbnail }, preset)}
             alt={hero.thumbnail}
-            onLoad={onLoad(hero.id)}
           />
         </div>
       ))}
diff --git a/src/components/flow/FlowHero/styles.scss b/src/components/flow/FlowHero/styles.scss
index f7f9865b..3bedb03f 100644
--- a/src/components/flow/FlowHero/styles.scss
+++ b/src/components/flow/FlowHero/styles.scss
@@ -145,3 +145,20 @@
     }
   }
 }
+
+// new
+.loaders {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  pointer-events: none;
+  touch-action: none;
+
+  img {
+    position: absolute;
+    left: 0;
+    top: 0;
+
+  }
+}

From 916883ad16fa7183d9e0db400eed3c943f480468 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 6 Nov 2020 12:02:46 +0700
Subject: [PATCH 2/2] fixed hero slider

---
 src/components/flow/FlowHero/index.tsx   | 27 ++++++++++++++++++++----
 src/components/flow/FlowHero/styles.scss | 16 --------------
 2 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/components/flow/FlowHero/index.tsx b/src/components/flow/FlowHero/index.tsx
index fae9074d..9b795640 100644
--- a/src/components/flow/FlowHero/index.tsx
+++ b/src/components/flow/FlowHero/index.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import * as styles from './styles.scss';
 import { getURL } from '~/utils/dom';
-import { withRouter, RouteComponentProps } from 'react-router';
+import { withRouter, RouteComponentProps, useHistory } from 'react-router';
 import { URLS, PRESETS } from '~/constants/urls';
 import { Icon } from '~/components/input/Icon';
 import { INode } from "~/redux/types";
@@ -13,11 +13,13 @@ type IProps = RouteComponentProps & {
   heroes: IFlowState['heroes'];
 };
 
-const FlowHeroUnconnected: FC<IProps> = ({ heroes, history }) => {
+const FlowHeroUnconnected: FC<IProps> = ({ heroes }) => {
   const preset = useMemo(() => (window.innerWidth <= 768 ? PRESETS.cover : PRESETS.small_hero), []);
   const [limit, setLimit] = useState(6);
   const [current, setCurrent] = useState(0);
   const [loaded, setLoaded] = useState<Partial<INode>[]>([]);
+  const timer = useRef(null)
+  const history = useHistory();
 
   const onLoad = useCallback((i: number) => {
     setLoaded([...loaded, heroes[i]])
@@ -29,9 +31,25 @@ const FlowHeroUnconnected: FC<IProps> = ({ heroes, history }) => {
     return loaded[current]?.title || '';
   }, [loaded, current, heroes]);
 
-  const onNext = useCallback(() => setCurrent(current < items - 1 ? current + 1 : 0), [current, items])
+  const onNext = useCallback(() => {
+    if (heroes.length > limit) setLimit(limit + 1)
+    setCurrent(current < items - 1 ? current + 1 : 0)
+  }, [current, items, limit, heroes.length])
   const onPrev = useCallback(() => setCurrent(current > 0 ? current - 1 : items - 1), [current, items])
 
+  const goToNode = useCallback(() => {
+    history.push(URLS.NODE_URL(loaded[current].id))
+  }, [current, loaded]);
+
+  useEffect(() => {
+    timer.current = setTimeout(onNext, 5000)
+    return () => clearTimeout(timer.current)
+  }, [current, timer.current])
+
+  useEffect(() => {
+    if (loaded.length === 1) onNext()
+  }, [loaded])
+
   return (
     <div className={styles.wrap}>
       <div className={styles.loaders}>
@@ -57,7 +75,7 @@ const FlowHeroUnconnected: FC<IProps> = ({ heroes, history }) => {
         </div>
       )}
 
-      {loaded.length > 0 && loaded.slice(0, limit).map((hero, index) => (
+      {loaded.slice(0, limit).map((hero, index) => (
         <div
           className={classNames(styles.hero, {
             [styles.is_visible]: true,
@@ -67,6 +85,7 @@ const FlowHeroUnconnected: FC<IProps> = ({ heroes, history }) => {
             backgroundImage: `url("${getURL({ url: hero.thumbnail }, preset)}")`,
           }}
           key={hero.id}
+          onClick={goToNode}
         >
           <img
             src={getURL({ url: hero.thumbnail }, preset)}
diff --git a/src/components/flow/FlowHero/styles.scss b/src/components/flow/FlowHero/styles.scss
index 3bedb03f..62a8500f 100644
--- a/src/components/flow/FlowHero/styles.scss
+++ b/src/components/flow/FlowHero/styles.scss
@@ -109,25 +109,11 @@
   }
 }
 
-// .title {
-//   flex: 0;
-//   height: 48px;
-//   display: flex;
-//   align-items: center;
-//   justify-content: center;
-//   padding: 0 $gap 0 0;
-//   background: red;
-//   border-radius: $radius;
-//   font: $font_hero_title;
-//   text-transform: uppercase;
-// }
-
 .buttons {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 48px;
-  // background: rgba(0, 0, 0, 0.7);
   flex-direction: row;
   width: 96px;
   border-radius: $radius;
@@ -146,7 +132,6 @@
   }
 }
 
-// new
 .loaders {
   position: absolute;
   top: 0;
@@ -159,6 +144,5 @@
     position: absolute;
     left: 0;
     top: 0;
-
   }
 }