refactored lab

src/components/lab/LabLine/index.tsx

@@ -1,16 +0,0 @@
-import { FC } from 'react';
-
-import { NodeComponentProps } from '~/constants/node';
-import { useColorGradientFromString } from '~/hooks/color/useColorGradientFromString';
-
-import styles from './styles.module.scss';
-
-interface Props extends NodeComponentProps {}
-
-const LabLine: FC<Props> = ({ node: { title } }) => {
-  const background = useColorGradientFromString(title, 5, 3, 270);
-
-  return <div className={styles.line} style={{ background }} />;
-};
-
-export { LabLine };

src/components/lab/LabLine/styles.module.scss

@@ -1,7 +0,0 @@
-@import "src/styles/variables";
-
-.line {
-  height: 4px;
-  border-radius: $radius $radius 0 0;
-  width: 100%;
-}

src/constants/node/index.ts

@@ -1,12 +1,5 @@
 import { FC } from 'react';
 
-import { LabAudio } from '~/components/lab/LabAudioBlock';
-import { LabDescription } from '~/components/lab/LabDescription';
-import { LabImage } from '~/components/lab/LabImage';
-import { LabNodeTitle } from '~/components/lab/LabNodeTitle';
-import { LabPad } from '~/components/lab/LabPad';
-import { LabText } from '~/components/lab/LabText';
-import { LabVideo } from '~/components/lab/LabVideo';
 import { NodeAudioBlock } from '~/components/node/NodeAudioBlock';
 import { NodeAudioImageBlock } from '~/components/node/NodeAudioImageBlock';
 import { NodeImageSwiperBlock } from '~/components/node/NodeImageSwiperBlock';
@@ -52,20 +45,6 @@ export type INodeComponents = Record<
   FC<NodeComponentProps>
 >;
 
-export const LAB_PREVIEW_LAYOUT: Record<string, FC<NodeComponentProps>[]> = {
-  [NODE_TYPES.IMAGE]: [LabImage, LabPad, LabNodeTitle, LabDescription],
-  [NODE_TYPES.VIDEO]: [LabVideo, LabPad, LabNodeTitle, LabDescription],
-  [NODE_TYPES.AUDIO]: [
-    LabPad,
-    LabNodeTitle,
-    LabPad,
-    NodeAudioImageBlock,
-    LabAudio,
-    LabPad,
-  ],
-  [NODE_TYPES.TEXT]: [LabPad, LabNodeTitle, LabPad, LabText, LabPad],
-};
-
 export const NODE_HEADS: INodeComponents = {
   [NODE_TYPES.IMAGE]: NodeImageSwiperBlock,
 };

src/containers/lab/LabGrid/components/LabNode/constants/index.ts

@@ -0,0 +1,26 @@
+import { FC } from 'react';
+
+import { NodeAudioImageBlock } from '~/components/node/NodeAudioImageBlock';
+import { NODE_TYPES, NodeComponentProps } from '~/constants/node';
+
+import { LabAudio } from '../components/LabAudioBlock';
+import { LabDescription } from '../components/LabDescription';
+import { LabImage } from '../components/LabImage';
+import { LabNodeTitle } from '../components/LabNodeTitle';
+import { LabPad } from '../components/LabPad';
+import { LabText } from '../components/LabText';
+import { LabVideo } from '../components/LabVideo';
+
+export const LAB_PREVIEW_LAYOUT: Record<string, FC<NodeComponentProps>[]> = {
+  [NODE_TYPES.IMAGE]: [LabImage, LabPad, LabNodeTitle, LabDescription],
+  [NODE_TYPES.VIDEO]: [LabVideo, LabPad, LabNodeTitle, LabDescription],
+  [NODE_TYPES.AUDIO]: [
+    LabPad,
+    LabNodeTitle,
+    LabPad,
+    NodeAudioImageBlock,
+    LabAudio,
+    LabPad,
+  ],
+  [NODE_TYPES.TEXT]: [LabPad, LabNodeTitle, LabPad, LabText, LabPad],
+};

src/containers/lab/LabGrid/components/LabNode/hooks/useLabNodeBlocks.ts

@@ -0,0 +1,31 @@
+import { createElement, FC, useCallback, useMemo } from 'react';
+
+import { NodeComponentProps } from '~/constants/node';
+import { INode } from '~/types';
+import { isNil, prop } from '~/utils/ramda';
+
+import { LAB_PREVIEW_LAYOUT } from '../constants';
+
+// useNodeBlocks returns head, block and inline blocks of node
+export const useLabNodeBlocks = (node: INode, isLoading: boolean) => {
+  const createBlock = useCallback(
+    (block?: FC<NodeComponentProps>, key = 0) =>
+      !isNil(block) &&
+      createElement(block, {
+        node,
+        isLoading,
+        key: `${node.id}-${key}`,
+      }),
+    [node, isLoading],
+  );
+
+  return useMemo(
+    () =>
+      node?.type && prop(node.type, LAB_PREVIEW_LAYOUT)
+        ? prop(node.type, LAB_PREVIEW_LAYOUT).map((comp, i) =>
+            createBlock(comp, i),
+          )
+        : undefined,
+    [node, createBlock],
+  );
+};

src/containers/lab/LabGrid/components/LabNode/index.tsx

@@ -3,22 +3,22 @@ import { FC, useMemo } from 'react';
 import classNames from 'classnames';
 import { isAfter, parseISO } from 'date-fns';
 
-import { LabBottomPanel } from '~/components/lab/LabBottomPanel';
 import { useColorGradientFromString } from '~/hooks/color/useColorGradientFromString';
-import { useNodeBlocks } from '~/hooks/node/useNodeBlocks';
 import { INode } from '~/types';
 
+import { LabBottomPanel } from './components/LabBottomPanel';
+import { useLabNodeBlocks } from './hooks/useLabNodeBlocks';
 import styles from './styles.module.scss';
 
-interface IProps {
+interface Props {
   node: INode;
   lastSeen: string | null | undefined;
   isLoading?: boolean;
   commentCount: number;
 }
 
-const LabNode: FC<IProps> = ({ node, isLoading, lastSeen, commentCount }) => {
-  const { lab } = useNodeBlocks(node, !!isLoading);
+const LabNode: FC<Props> = ({ node, isLoading, lastSeen, commentCount }) => {
+  const blocks = useLabNodeBlocks(node, !!isLoading);
 
   const hasNewComments = useMemo(
     () =>
@@ -32,7 +32,8 @@ const LabNode: FC<IProps> = ({ node, isLoading, lastSeen, commentCount }) => {
 
   return (
     <div className={classNames(styles.wrap)} style={{ background }}>
-      {lab}
+      {blocks}
+
       <LabBottomPanel
         node={node}
         isLoading={isLoading}

src/containers/lab/LabGrid/index.tsx

@@ -2,10 +2,10 @@ import { FC, memo } from 'react';
 
 import { Columns } from '~/components/common/Columns';
 import { Hoverable } from '~/components/common/Hoverable';
-import { LabNoResults } from '~/components/lab/LabNoResults';
-import { LabNode } from '~/components/lab/LabNode';
 import { useLabContext } from '~/utils/context/LabContextProvider';
 
+import { LabNoResults } from './components/LabNoResults';
+import { LabNode } from './components/LabNode';
 import styles from './styles.module.scss';
 
 interface IProps {}

src/containers/lab/LabLoading/index.tsx

@@ -1,10 +1,11 @@
 import { FC, memo } from 'react';
 
 import { Columns } from '~/components/common/Columns';
-import { LabNode } from '~/components/lab/LabNode';
 import { EMPTY_NODE, NODE_TYPES } from '~/constants/node';
 import { values } from '~/utils/ramda';
 
+import { LabNode } from '../LabGrid/components/LabNode';
+
 interface LabLoadingProps {}
 
 const getRandomNodeType = () =>

src/containers/lab/LabStats/components/LabBanner/index.tsx

@@ -1,13 +1,9 @@
-import { FC } from 'react';
-
 import { Group } from '~/components/common/Group';
-import { LabSquare } from '~/components/lab/LabSquare';
 
+import { LabSquare } from './components/LabSquare';
 import styles from './styles.module.scss';
 
-interface IProps {}
-
-const LabBanner: FC<IProps> = () => (
+const LabBanner = () => (
   <LabSquare className={styles.wrap}>
     <Group>
       <div className={styles.title}>Лаборатория!</div>

src/containers/lab/LabStats/components/LabHeroes/components/LabHero/index.tsx

@@ -10,12 +10,12 @@ import { getPrettyDate } from '~/utils/dom';
 
 import styles from './styles.module.scss';
 
-interface IProps {
+interface Props {
   node?: Partial<INode>;
   isLoading?: boolean;
 }
 
-const LabHero: FC<IProps> = ({ node, isLoading }) => {
+const LabHero: FC<Props> = ({ node, isLoading }) => {
   const { push } = useNavigation();
   const onClick = useCallback(() => {
     push(URLS.NODE_URL(node?.id));

src/containers/lab/LabStats/components/LabHeroes/index.tsx

@@ -1,10 +1,11 @@
 import { FC } from 'react';
 
 import { Group } from '~/components/common/Group';
-import { LabHero } from '~/components/lab/LabHero';
 import styles from '~/containers/lab/LabStats/styles.module.scss';
 import { INode } from '~/types';
 
+import { LabHero } from './components/LabHero';
+
 interface IProps {
   nodes: Partial<INode>[];
   isLoading: boolean;

src/containers/lab/LabStats/components/LabTags/index.tsx

@@ -4,7 +4,7 @@ import { Placeholder } from '~/components/placeholders/Placeholder';
 import { Tag } from '~/components/tags/Tag';
 import { ITag } from '~/types';
 
-import styles from './/styles.module.scss';
+import styles from './styles.module.scss';
 
 interface IProps {
   tags: ITag[];

src/containers/lab/LabStats/index.tsx

@@ -3,11 +3,11 @@ import { FC } from 'react';
 import { Group } from '~/components/common/Group';
 import { NodeHorizontalCard } from '~/components/common/NodeHorizontalCard';
 import { SubTitle } from '~/components/common/SubTitle';
-import { LabFactoryBanner } from '~/components/lab/LabFactoryBanner';
-import { LabHeroes } from '~/components/lab/LabHeroes';
-import { LabTags } from '~/components/lab/LabTags';
+import { LabHeroes } from '~/containers/lab/LabStats/components/LabHeroes';
 import { useLabContext } from '~/utils/context/LabContextProvider';
 
+import { LabFactoryBanner } from './components/LabFactoryBanner';
+import { LabTags } from './components/LabTags';
 import styles from './styles.module.scss';
 
 interface IProps {}

src/hooks/node/useNodeBlocks.ts

@@ -2,7 +2,6 @@ import { createElement, FC, useCallback, useMemo } from 'react';
 
 import {
   NodeComponentProps,
-  LAB_PREVIEW_LAYOUT,
   NODE_COMPONENTS,
   NODE_HEADS,
   NODE_INLINES,
@@ -43,15 +42,5 @@ export const useNodeBlocks = (node: INode, isLoading: boolean) => {
     [node, createNodeBlock],
   );
 
-  const lab = useMemo(
-    () =>
-      node?.type && prop(node.type, LAB_PREVIEW_LAYOUT)
-        ? prop(node.type, LAB_PREVIEW_LAYOUT).map((comp, i) =>
-            createNodeBlock(comp, i),
-          )
-        : undefined,
-    [node, createNodeBlock],
-  );
-
-  return { head, block, inline, lab };
+  return { head, block, inline };
 };

src/layouts/LabLayout/index.tsx

@@ -2,8 +2,8 @@ import { FC } from 'react';
 
 import { Group } from '~/components/common/Group';
 import { Sticky } from '~/components/common/Sticky';
-import { LabHead } from '~/components/lab/LabHead';
 import { LabGrid } from '~/containers/lab/LabGrid';
+import { LabHead } from '~/containers/lab/LabHead';
 import { LabLoading } from '~/containers/lab/LabLoading';
 import { LabStats } from '~/containers/lab/LabStats';
 import { Container } from '~/containers/main/Container';