rename NodeComponentProps

src/components/lab/LabAudioBlock/index.tsx

@@ -2,9 +2,9 @@ import React, { FC } from 'react';
 
 import { NodeAudioBlock } from '~/components/node/NodeAudioBlock';
 import { Placeholder } from '~/components/placeholders/Placeholder';
-import { INodeComponentProps } from '~/constants/node';
+import { NodeComponentProps } from '~/constants/node';
 
-const LabAudio: FC<INodeComponentProps> = ({ node, isLoading }) => (
+const LabAudio: FC<NodeComponentProps> = ({ node, isLoading }) => (
   <Placeholder active={isLoading} width="100%" height={100}>
     <NodeAudioBlock node={node} isLoading={isLoading} />
   </Placeholder>

src/components/lab/LabDescription/index.tsx

@@ -2,13 +2,13 @@ import React, { FC } from 'react';
 
 import { Markdown } from '~/components/containers/Markdown';
 import { Paragraph } from '~/components/placeholders/Paragraph';
-import { INodeComponentProps } from '~/constants/node';
+import { NodeComponentProps } from '~/constants/node';
 import { useGotoNode } from '~/hooks/node/useGotoNode';
 import { formatText } from '~/utils/dom';
 
 import styles from './styles.module.scss';
 
-const LabDescription: FC<INodeComponentProps> = ({ node, isLoading }) => {
+const LabDescription: FC<NodeComponentProps> = ({ node, isLoading }) => {
   const onClick = useGotoNode(node.id);
 
   if (!node.description) {

src/components/lab/LabImage/index.tsx

@@ -4,7 +4,7 @@ import Image from 'next/future/image';
 import SwiperCore, { A11y, Navigation, Pagination } from 'swiper';
 
 import { Placeholder } from '~/components/placeholders/Placeholder';
-import { INodeComponentProps } from '~/constants/node';
+import { NodeComponentProps } from '~/constants/node';
 import { imagePresets } from '~/constants/urls';
 import { useGotoNode } from '~/hooks/node/useGotoNode';
 import { useNodeImages } from '~/hooks/node/useNodeImages';
@@ -15,7 +15,7 @@ import styles from './styles.module.scss';
 
 SwiperCore.use([Navigation, Pagination, A11y]);
 
-interface IProps extends INodeComponentProps {}
+interface IProps extends NodeComponentProps {}
 
 const LabImage: FC<IProps> = ({ node, isLoading }) => {
   const images = useNodeImages(node);

src/components/lab/LabLine/index.tsx

@@ -1,11 +1,11 @@
 import React, { FC } from 'react';
 
-import { INodeComponentProps } from '~/constants/node';
+import { NodeComponentProps } from '~/constants/node';
 import { useColorGradientFromString } from '~/hooks/color/useColorGradientFromString';
 
 import styles from './styles.module.scss';
 
-interface Props extends INodeComponentProps {}
+interface Props extends NodeComponentProps {}
 
 const LabLine: FC<Props> = ({ node: { title } }) => {
   const background = useColorGradientFromString(title, 5, 3, 270);

src/components/lab/LabNodeTitle/index.tsx

@@ -5,12 +5,12 @@ import Tippy from '@tippyjs/react';
 import { Group } from '~/components/containers/Group';
 import { Icon } from '~/components/input/Icon';
 import { Placeholder } from '~/components/placeholders/Placeholder';
-import { INodeComponentProps } from '~/constants/node';
+import { NodeComponentProps } from '~/constants/node';
 import { useGotoNode } from '~/hooks/node/useGotoNode';
 
 import styles from './styles.module.scss';
 
-const LabNodeTitle: FC<INodeComponentProps> = ({ node, isLoading }) => {
+const LabNodeTitle: FC<NodeComponentProps> = ({ node, isLoading }) => {
   const onClick = useGotoNode(node.id);
 
   if (!node.title) return null;

src/components/lab/LabPad/index.tsx

@@ -1,11 +1,11 @@
 import React, { FC } from 'react';
 
-import { INodeComponentProps } from '~/constants/node';
+import { NodeComponentProps } from '~/constants/node';
 import { useGotoNode } from '~/hooks/node/useGotoNode';
 
 import styles from './styles.module.scss';
 
-const LabPad: FC<INodeComponentProps> = ({ node }) => {
+const LabPad: FC<NodeComponentProps> = ({ node }) => {
   const onClick = useGotoNode(node.id);
   return <div className={styles.pad} onClick={onClick} />;
 };

src/components/lab/LabText/index.tsx

@@ -2,14 +2,14 @@ import React, { FC, useMemo } from 'react';
 
 import { Markdown } from '~/components/containers/Markdown';
 import { Paragraph } from '~/components/placeholders/Paragraph';
-import { INodeComponentProps } from '~/constants/node';
+import { NodeComponentProps } from '~/constants/node';
 import { useGotoNode } from '~/hooks/node/useGotoNode';
 import { formatTextParagraphs } from '~/utils/dom';
 import { path } from '~/utils/ramda';
 
 import styles from './styles.module.scss';
 
-const LabText: FC<INodeComponentProps> = ({ node, isLoading }) => {
+const LabText: FC<NodeComponentProps> = ({ node, isLoading }) => {
   const content = useMemo(
     () => formatTextParagraphs(path(['blocks', 0, 'text'], node) || ''),
     [node],

src/components/lab/LabVideo/index.tsx

@@ -2,9 +2,9 @@ import React, { FC } from 'react';
 
 import { NodeVideoBlock } from '~/components/node/NodeVideoBlock';
 import { Placeholder } from '~/components/placeholders/Placeholder';
-import { INodeComponentProps } from '~/constants/node';
+import { NodeComponentProps } from '~/constants/node';
 
-const LabVideo: FC<INodeComponentProps> = ({ node, isLoading }) => (
+const LabVideo: FC<NodeComponentProps> = ({ node, isLoading }) => (
   <Placeholder active={isLoading} width="100%" height={400}>
     <NodeVideoBlock node={node} isLoading={isLoading} />
   </Placeholder>

src/components/node/NodeAudioBlock/index.tsx

@@ -1,19 +1,19 @@
 import React, { FC } from 'react';
 
 import { AudioPlayer } from '~/components/media/AudioPlayer';
-import { INodeComponentProps } from '~/constants/node';
+import { NodeComponentProps } from '~/constants/node';
 import { useNodeAudios } from '~/hooks/node/useNodeAudios';
 
 import styles from './styles.module.scss';
 
-interface IProps extends INodeComponentProps {}
+interface IProps extends NodeComponentProps {}
 
 const NodeAudioBlock: FC<IProps> = ({ node }) => {
   const audios = useNodeAudios(node);
 
   return (
     <div className={styles.wrap}>
-      {audios.map(file => (
+      {audios.map((file) => (
         <AudioPlayer key={file.id} file={file} />
       ))}
     </div>

src/components/node/NodeAudioImageBlock/index.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 
-import { INodeComponentProps } from '~/constants/node';
+import { NodeComponentProps } from '~/constants/node';
 import { imagePresets } from '~/constants/urls';
 import { useNodeImages } from '~/hooks/node/useNodeImages';
 import { getURL } from '~/utils/dom';
@@ -8,7 +8,7 @@ import { path } from '~/utils/ramda';
 
 import styles from './styles.module.scss';
 
-interface IProps extends INodeComponentProps {}
+interface IProps extends NodeComponentProps {}
 
 const NodeAudioImageBlock: FC<IProps> = ({ node }) => {
   const images = useNodeImages(node);

src/components/node/NodeImageSwiperBlock/index.tsx

@@ -13,7 +13,7 @@ import { Swiper, SwiperSlide } from 'swiper/react';
 import SwiperClass from 'swiper/types/swiper-class';
 
 import { ImageLoadingWrapper } from '~/components/common/ImageLoadingWrapper/index';
-import { INodeComponentProps } from '~/constants/node';
+import { NodeComponentProps } from '~/constants/node';
 import { imagePresets } from '~/constants/urls';
 import { useModal } from '~/hooks/modal/useModal';
 import { useImageModal } from '~/hooks/navigation/useImageModal';
@@ -26,7 +26,7 @@ import styles from './styles.module.scss';
 
 SwiperCore.use([Navigation, Pagination, Keyboard, Lazy]);
 
-interface IProps extends INodeComponentProps {}
+interface IProps extends NodeComponentProps {}
 
 const breakpoints: SwiperOptions['breakpoints'] = {
   599: {

src/components/node/NodeTextBlock/index.tsx

@@ -2,7 +2,7 @@ import React, { FC, useMemo } from 'react';
 
 import classNames from 'classnames';
 
-import { INodeComponentProps } from '~/constants/node';
+import { NodeComponentProps } from '~/constants/node';
 import { useColorGradientFromString } from '~/hooks/color/useColorGradientFromString';
 import markdown from '~/styles/common/markdown.module.scss';
 import { formatTextParagraphs } from '~/utils/dom';
@@ -10,12 +10,13 @@ import { path } from '~/utils/ramda';
 
 import styles from './styles.module.scss';
 
-interface IProps extends INodeComponentProps {}
+interface IProps extends NodeComponentProps {}
 
 const NodeTextBlock: FC<IProps> = ({ node }) => {
-  const content = useMemo(() => formatTextParagraphs(path(['blocks', 0, 'text'], node) || ''), [
+  const content = useMemo(
-    node,
+    () => formatTextParagraphs(path(['blocks', 0, 'text'], node) || ''),
-  ]);
+    [node],
+  );
 
   const background = useColorGradientFromString(node.title, 3, 2);
 

src/components/node/NodeVideoBlock/index.tsx

@@ -1,11 +1,11 @@
 import React, { FC, useMemo } from 'react';
 
-import { INodeComponentProps } from '~/constants/node';
+import { NodeComponentProps } from '~/constants/node';
 import { path } from '~/utils/ramda';
 
 import styles from './styles.module.scss';
 
-interface IProps extends INodeComponentProps {}
+interface IProps extends NodeComponentProps {}
 
 const NodeVideoBlock: FC<IProps> = ({ node }) => {
   const video = useMemo(() => {
@@ -13,7 +13,7 @@ const NodeVideoBlock: FC<IProps> = ({ node }) => {
     const match =
       url &&
       url.match(
-        /http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-_]*)(&(amp;)?[\w?=]*)?/
+        /http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-_]*)(&(amp;)?[\w?=]*)?/,
       );
 
     return match && match[1];

src/constants/node/index.ts

@@ -53,17 +53,17 @@ export const NODE_TYPES = {
   ROOM: 'room',
 };
 
-export type INodeComponentProps = {
+export type NodeComponentProps = {
   node: INode;
   isLoading: boolean;
 };
 
 export type INodeComponents = Record<
   ValueOf<typeof NODE_TYPES>,
-  FC<INodeComponentProps>
+  FC<NodeComponentProps>
 >;
 
-export const LAB_PREVIEW_LAYOUT: Record<string, FC<INodeComponentProps>[]> = {
+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]: [

src/hooks/node/useNodeBlocks.ts

@@ -1,43 +1,56 @@
 import { createElement, FC, useCallback, useMemo } from 'react';
 
-import { INodeComponentProps, LAB_PREVIEW_LAYOUT, NODE_COMPONENTS, NODE_HEADS, NODE_INLINES } from '~/constants/node';
+import {
+  NodeComponentProps,
+  LAB_PREVIEW_LAYOUT,
+  NODE_COMPONENTS,
+  NODE_HEADS,
+  NODE_INLINES,
+} from '~/constants/node';
 import { INode } from '~/types';
 import { isNil, prop } from '~/utils/ramda';
 
 // useNodeBlocks returns head, block and inline blocks of node
 export const useNodeBlocks = (node: INode, isLoading: boolean) => {
   const createNodeBlock = useCallback(
-    (block?: FC<INodeComponentProps>, key = 0) =>
+    (block?: FC<NodeComponentProps>, key = 0) =>
       !isNil(block) &&
       createElement(block, {
         node,
         isLoading,
         key: `${node.id}-${key}`,
       }),
-    [node, isLoading]
+    [node, isLoading],
   );
 
   const head = useMemo(
-    () => createNodeBlock(node?.type ? prop(node?.type, NODE_HEADS) : undefined),
+    () =>
-    [node, createNodeBlock]
+      createNodeBlock(node?.type ? prop(node?.type, NODE_HEADS) : undefined),
+    [node, createNodeBlock],
   );
 
   const block = useMemo(
-    () => createNodeBlock(node?.type ? prop(node?.type, NODE_COMPONENTS) : undefined),
+    () =>
-    [node, createNodeBlock]
+      createNodeBlock(
+        node?.type ? prop(node?.type, NODE_COMPONENTS) : undefined,
+      ),
+    [node, createNodeBlock],
   );
 
   const inline = useMemo(
-    () => createNodeBlock(node?.type ? prop(node?.type, NODE_INLINES) : undefined),
+    () =>
-    [node, createNodeBlock]
+      createNodeBlock(node?.type ? prop(node?.type, NODE_INLINES) : undefined),
+    [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))
+        ? prop(node.type, LAB_PREVIEW_LAYOUT).map((comp, i) =>
+            createNodeBlock(comp, i),
+          )
         : undefined,
-    [node, createNodeBlock]
+    [node, createNodeBlock],
   );
 
   return { head, block, inline, lab };