refactor flow components

src/components/common/NodeHorizontalCard/index.tsx

@@ -10,13 +10,13 @@ import { getPrettyDate } from '~/utils/dom';
 
 import styles from './styles.module.scss';
 
-interface IProps {
+interface Props {
   node: Partial<INode>;
-  has_new?: boolean;
+  hasNew?: boolean;
   onClick?: MouseEventHandler;
 }
 
-const FlowRecentItem: FC<IProps> = ({ node, has_new, onClick }) => {
+const NodeHorizontalCard: FC<Props> = ({ node, hasNew, onClick }) => {
   return (
     <Anchor
       key={node.id}
@@ -26,7 +26,7 @@ const FlowRecentItem: FC<IProps> = ({ node, has_new, onClick }) => {
     >
       <div
         className={classNames(styles.thumb, {
-          [styles.new]: has_new,
+          [styles.new]: hasNew,
           [styles.lab]: !node.is_promoted,
         })}
       >
@@ -44,4 +44,4 @@ const FlowRecentItem: FC<IProps> = ({ node, has_new, onClick }) => {
   );
 };
 
-export { FlowRecentItem };
+export { NodeHorizontalCard };

src/components/flow/FlowCellImageLazyLoad/index.tsx

@@ -1,21 +0,0 @@
-import { FC } from 'react';
-
-import classNames from 'classnames';
-import LazyLoad from 'react-lazyload';
-
-import { IMGProps } from '~/utils/types';
-
-import styles from './styles.module.scss';
-
-interface Props extends IMGProps {
-  height?: number;
-}
-
-const FlowCellImageLazyLoad: FC<Props> = ({ className, children, ...rest }) => (
-  <LazyLoad once offset={600} className={classNames(styles.wrapper, className)}>
-    <img {...rest} src={rest.src} alt="" />
-    {children}
-  </LazyLoad>
-);
-
-export { FlowCellImageLazyLoad };

src/components/flow/FlowCellImageLazyLoad/styles.module.scss

@@ -1,15 +0,0 @@
-.wrapper {
-  width: 100%;
-  height: 100%;
-  position: relative;
-
-  img {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    min-width: 100%;
-    min-height: 100%;
-    transform: translate(-50%, -50%);
-    object-fit: cover;
-  }
-}

src/components/flow/HeroPlaceholder/index.tsx

@@ -1,7 +0,0 @@
-import * as React from 'react';
-
-const style = require('./style.scss');
-
-export const HeroPlaceholder = () => (
-  <div className={style.container} />
-);

src/components/flow/HeroPlaceholder/style.scss

@@ -1,14 +0,0 @@
-@import 'src/styles/variables';
-
-.container {
-  height: 280px;
-  width: 100%;
-  background: $gray_90
-    url('http://37.192.131.144/hero/photos/photo-20140527-1639766.jpg')
-    no-repeat 50% 30%;
-  background-size: cover;
-  opacity: 0.7;
-  will-change: transform;
-  //box-shadow: white 0 0 0 1px;
-  //border-radius: $panel_radius $panel_radius 0 0;
-}

src/components/sidebar/TagSidebarList/index.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 
-import { FlowRecentItem } from '~/components/flow/FlowRecentItem';
+import { NodeHorizontalCard } from '~/components/common/NodeHorizontalCard';
 import { INode } from '~/types';
 
 import styles from './styles.module.scss';
@@ -12,7 +12,7 @@ interface IProps {
 const TagSidebarList: FC<IProps> = ({ nodes }) => (
   <div className={styles.list}>
     {nodes.map((node) => (
-      <FlowRecentItem node={node} key={node.id} />
+      <NodeHorizontalCard node={node} key={node.id} />
     ))}
   </div>
 );

src/containers/flow/FlowGrid/components/FlowCell/index.tsx

@@ -3,16 +3,16 @@ import { FC, useMemo } from 'react';
 import classNames from 'classnames';
 
 import { Anchor } from '~/components/common/Anchor';
-import { CellShade } from '~/components/flow/CellShade';
-import { FlowCellImage } from '~/components/flow/FlowCellImage';
-import { FlowCellMenu } from '~/components/flow/FlowCellMenu';
-import { FlowCellText } from '~/components/flow/FlowCellText';
 import { MenuDots } from '~/components/menu/MenuDots';
 import { useClickOutsideFocus } from '~/hooks/dom/useClickOutsideFocus';
 import { useWindowSize } from '~/hooks/dom/useWindowSize';
 import { useFlowCellControls } from '~/hooks/flow/useFlowCellControls';
 import { FlowDisplay, INode } from '~/types';
 
+import { CellShade } from './components/CellShade';
+import { FlowCellImage } from './components/FlowCellImage';
+import { FlowCellMenu } from './components/FlowCellMenu';
+import { FlowCellText } from './components/FlowCellText';
 import styles from './styles.module.scss';
 
 interface Props {

src/containers/flow/FlowGrid/index.tsx

@@ -3,7 +3,6 @@ import { FC, Fragment } from 'react';
 import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';
 
-import { FlowCell } from '~/components/flow/FlowCell';
 import { flowDisplayToPreset, URLS } from '~/constants/urls';
 import { useAuth } from '~/hooks/auth/useAuth';
 import { FlowDisplay, IFlowNode, INode } from '~/types';
@@ -11,6 +10,7 @@ import { IUser } from '~/types/auth';
 import { getURLFromString } from '~/utils/dom';
 import { canEditNode } from '~/utils/node';
 
+import { FlowCell } from './components/FlowCell';
 import styles from './styles.module.scss';
 
 interface Props {

src/containers/flow/FlowStamp/components/FlowRecent/index.tsx

@@ -1,9 +1,8 @@
 import { FC } from 'react';
 
+import { NodeHorizontalCard } from '~/components/common/NodeHorizontalCard';
 import { IFlowNode } from '~/types';
 
-import { FlowRecentItem } from '../FlowRecentItem';
-
 import styles from './styles.module.scss';
 
 interface IProps {
@@ -17,13 +16,15 @@ const FlowRecent: FC<IProps> = ({ recent, updated }) => {
       <div className={styles.updates}>
         {updated &&
           updated.map((node) => (
-            <FlowRecentItem node={node} key={node.id} has_new />
+            <NodeHorizontalCard node={node} key={node.id} hasNew />
           ))}
       </div>
 
       <div className={styles.recent}>
         {recent &&
-          recent.map((node) => <FlowRecentItem node={node} key={node.id} />)}
+          recent.map((node) => (
+            <NodeHorizontalCard node={node} key={node.id} />
+          ))}
       </div>
     </>
   );

src/containers/flow/FlowStamp/components/FlowSearchResults/index.tsx

@@ -2,10 +2,9 @@ import { FC } from 'react';
 
 import { Icon } from '~/components/common/Icon';
 import { InfiniteScroll } from '~/components/common/InfiniteScroll';
+import { NodeHorizontalCard } from '~/components/common/NodeHorizontalCard';
 import { INode } from '~/types';
 
-import { FlowRecentItem } from '../FlowRecentItem';
-
 import styles from './styles.module.scss';
 
 interface IProps {
@@ -15,12 +14,7 @@ interface IProps {
   onLoadMore: () => void;
 }
 
-const FlowSearchResults: FC<IProps> = ({
-  results,
-  isLoading,
-  onLoadMore,
-  hasMore,
-}) => {
+const FlowSearchResults: FC<IProps> = ({ results, onLoadMore, hasMore }) => {
   if (!results.length) {
     return (
       <div className={styles.loading}>
@@ -34,7 +28,7 @@ const FlowSearchResults: FC<IProps> = ({
     <div className={styles.wrap}>
       <InfiniteScroll hasMore={hasMore} loadMore={onLoadMore}>
         {results.map((node) => (
-          <FlowRecentItem node={node} key={node.id} />
+          <NodeHorizontalCard node={node} key={node.id} />
         ))}
       </InfiniteScroll>
     </div>

src/containers/flow/FlowStamp/index.tsx

@@ -5,8 +5,6 @@ import classNames from 'classnames';
 import { Group } from '~/components/common/Group';
 import { Icon } from '~/components/common/Icon';
 import { Superpower } from '~/components/common/Superpower';
-import { FlowRecent } from '~/components/flow/FlowRecent';
-import { FlowSearchResults } from '~/components/flow/FlowSearchResults';
 import { InputText } from '~/components/input/InputText';
 import { Toggle } from '~/components/input/Toggle';
 import { experimentalFeatures } from '~/constants/features';
@@ -14,6 +12,9 @@ import styles from '~/containers/flow/FlowStamp/styles.module.scss';
 import { useFlowContext } from '~/utils/providers/FlowProvider';
 import { useSearchContext } from '~/utils/providers/SearchProvider';
 
+import { FlowRecent } from './components/FlowRecent';
+import { FlowSearchResults } from './components/FlowSearchResults';
+
 interface IProps {
   isFluid: boolean;
   onToggleLayout: () => void;

src/containers/flow/FlowSwiperHero/index.tsx

@@ -27,20 +27,6 @@ const autoplay = {
   disableOnInteraction: false,
 };
 
-const lazy = {
-  enabled: true,
-  loadPrevNextAmount: 2,
-  loadOnTransitionStart: true,
-  loadPrevNext: true,
-  checkInView: true,
-};
-
-const getSrcSet = (url?: string) =>
-  [
-    `${getURLFromString(url, imagePresets.cover)} 768w`,
-    `${getURLFromString(url, imagePresets.small_hero)}`,
-  ].join(', ');
-
 export const FlowSwiperHero: FC<Props> = ({ heroes }) => {
   const { isTablet } = useWindowSize();
   const { push } = useNavigation();

src/containers/lab/LabStats/index.tsx

@@ -1,8 +1,8 @@
 import { FC } from 'react';
 
 import { Group } from '~/components/common/Group';
+import { NodeHorizontalCard } from '~/components/common/NodeHorizontalCard';
 import { SubTitle } from '~/components/common/SubTitle';
-import { FlowRecentItem } from '~/components/flow/FlowRecentItem';
 import { LabFactoryBanner } from '~/components/lab/LabFactoryBanner';
 import { LabHeroes } from '~/components/lab/LabHeroes';
 import { LabTags } from '~/components/lab/LabTags';
@@ -40,7 +40,7 @@ const LabStats: FC<IProps> = () => {
               <div className={styles.title}>Новые</div>
               <Group className={styles.updates}>
                 {updates.slice(0, 10).map((node) => (
-                  <FlowRecentItem node={node} key={node.id} has_new />
+                  <NodeHorizontalCard node={node} key={node.id} hasNew />
                 ))}
               </Group>
             </>

src/containers/settings/SettingsDeleted/index.tsx

@@ -3,8 +3,8 @@ import { VFC } from 'react';
 import { Filler } from '~/components/common/Filler';
 import { Group } from '~/components/common/Group';
 import { Icon } from '~/components/common/Icon';
+import { NodeHorizontalCard } from '~/components/common/NodeHorizontalCard';
 import { Padder } from '~/components/common/Padder';
-import { FlowRecentItem } from '~/components/flow/FlowRecentItem';
 import { InputText } from '~/components/input/InputText';
 import { HorizontalMenu } from '~/components/menu/HorizontalMenu';
 import { useFlowStore } from '~/store/flow/useFlowStore';
@@ -34,7 +34,7 @@ const SettingsDeleted: VFC<SettingsDeletedProps> = () => {
       <div className={styles.grid}>
         {nodes.map((node) => (
           <div className={styles.item} key={node.id}>
-            <FlowRecentItem node={node} key={node.id} />
+            <NodeHorizontalCard node={node} key={node.id} />
           </div>
         ))}
       </div>

src/layouts/FlowLayout/index.tsx

@@ -3,10 +3,10 @@ import { useEffect, useState } from 'react';
 import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';
 
-import { FlowGrid } from '~/components/flow/FlowGrid';
-import { FlowLoginStamp } from '~/components/flow/FlowLoginStamp';
-import { FlowSwiperHero } from '~/components/flow/FlowSwiperHero';
+import { FlowGrid } from '~/containers/flow/FlowGrid';
+import { FlowLoginStamp } from '~/containers/flow/FlowLoginStamp';
 import { FlowStamp } from '~/containers/flow/FlowStamp';
+import { FlowSwiperHero } from '~/containers/flow/FlowSwiperHero';
 import { SubmitBarRouter } from '~/containers/main/SubmitBarRouter';
 import { useAuth } from '~/hooks/auth/useAuth';
 import { useInfiniteLoader } from '~/hooks/dom/useInfiniteLoader';

src/layouts/ProfileLayout/index.tsx

@@ -2,7 +2,6 @@ import { FC } from 'react';
 
 import { observer } from 'mobx-react-lite';
 
-import { FlowGrid } from '~/components/flow/FlowGrid';
 import { Container } from '~/containers/main/Container';
 import { ProfilePageLeft } from '~/containers/profile/ProfilePageLeft';
 import { useUser } from '~/hooks/auth/useUser';
@@ -34,7 +33,7 @@ const ProfileLayout: FC<Props> = observer(({ username }) => {
           </div>
         </div>
 
-        <FlowGrid nodes={nodes} user={user} onChangeCellView={console.log} />
+        <div>here should be grid</div>
       </div>
     </Container>
   );