fixed hero slider

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)}

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;
-
   }
 }