From 65196bbbbbaa0eb4e38745d828f4d81c9d20231e Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Sat, 4 Nov 2023 10:48:57 +0600 Subject: [PATCH] rename NodeComponentProps --- src/components/lab/LabAudioBlock/index.tsx | 4 +-- src/components/lab/LabDescription/index.tsx | 4 +-- src/components/lab/LabImage/index.tsx | 4 +-- src/components/lab/LabLine/index.tsx | 4 +-- src/components/lab/LabNodeTitle/index.tsx | 4 +-- src/components/lab/LabPad/index.tsx | 4 +-- src/components/lab/LabText/index.tsx | 4 +-- src/components/lab/LabVideo/index.tsx | 4 +-- src/components/node/NodeAudioBlock/index.tsx | 6 ++-- .../node/NodeAudioImageBlock/index.tsx | 4 +-- .../node/NodeImageSwiperBlock/index.tsx | 4 +-- src/components/node/NodeTextBlock/index.tsx | 11 +++--- src/components/node/NodeVideoBlock/index.tsx | 6 ++-- src/constants/node/index.ts | 6 ++-- src/hooks/node/useNodeBlocks.ts | 35 +++++++++++++------ 15 files changed, 59 insertions(+), 45 deletions(-) diff --git a/src/components/lab/LabAudioBlock/index.tsx b/src/components/lab/LabAudioBlock/index.tsx index 4655ef72..5c565f2d 100644 --- a/src/components/lab/LabAudioBlock/index.tsx +++ b/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 = ({ node, isLoading }) => ( +const LabAudio: FC = ({ node, isLoading }) => ( diff --git a/src/components/lab/LabDescription/index.tsx b/src/components/lab/LabDescription/index.tsx index eb384060..89a42628 100644 --- a/src/components/lab/LabDescription/index.tsx +++ b/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 = ({ node, isLoading }) => { +const LabDescription: FC = ({ node, isLoading }) => { const onClick = useGotoNode(node.id); if (!node.description) { diff --git a/src/components/lab/LabImage/index.tsx b/src/components/lab/LabImage/index.tsx index e62244d0..f41b8e07 100644 --- a/src/components/lab/LabImage/index.tsx +++ b/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 = ({ node, isLoading }) => { const images = useNodeImages(node); diff --git a/src/components/lab/LabLine/index.tsx b/src/components/lab/LabLine/index.tsx index bd6cf853..a29443fe 100644 --- a/src/components/lab/LabLine/index.tsx +++ b/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 = ({ node: { title } }) => { const background = useColorGradientFromString(title, 5, 3, 270); diff --git a/src/components/lab/LabNodeTitle/index.tsx b/src/components/lab/LabNodeTitle/index.tsx index 88a786fa..4631f13e 100644 --- a/src/components/lab/LabNodeTitle/index.tsx +++ b/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 = ({ node, isLoading }) => { +const LabNodeTitle: FC = ({ node, isLoading }) => { const onClick = useGotoNode(node.id); if (!node.title) return null; diff --git a/src/components/lab/LabPad/index.tsx b/src/components/lab/LabPad/index.tsx index 3eff73ea..cf95f0f1 100644 --- a/src/components/lab/LabPad/index.tsx +++ b/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 = ({ node }) => { +const LabPad: FC = ({ node }) => { const onClick = useGotoNode(node.id); return
; }; diff --git a/src/components/lab/LabText/index.tsx b/src/components/lab/LabText/index.tsx index 81641c29..107f85fb 100644 --- a/src/components/lab/LabText/index.tsx +++ b/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 = ({ node, isLoading }) => { +const LabText: FC = ({ node, isLoading }) => { const content = useMemo( () => formatTextParagraphs(path(['blocks', 0, 'text'], node) || ''), [node], diff --git a/src/components/lab/LabVideo/index.tsx b/src/components/lab/LabVideo/index.tsx index 05cbd5cf..53c4f4b9 100644 --- a/src/components/lab/LabVideo/index.tsx +++ b/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 = ({ node, isLoading }) => ( +const LabVideo: FC = ({ node, isLoading }) => ( diff --git a/src/components/node/NodeAudioBlock/index.tsx b/src/components/node/NodeAudioBlock/index.tsx index b7d43f64..64c5645f 100644 --- a/src/components/node/NodeAudioBlock/index.tsx +++ b/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 = ({ node }) => { const audios = useNodeAudios(node); return (
- {audios.map(file => ( + {audios.map((file) => ( ))}
diff --git a/src/components/node/NodeAudioImageBlock/index.tsx b/src/components/node/NodeAudioImageBlock/index.tsx index 2563ae73..a87ea38a 100644 --- a/src/components/node/NodeAudioImageBlock/index.tsx +++ b/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 = ({ node }) => { const images = useNodeImages(node); diff --git a/src/components/node/NodeImageSwiperBlock/index.tsx b/src/components/node/NodeImageSwiperBlock/index.tsx index 3a96ad2a..f9063883 100644 --- a/src/components/node/NodeImageSwiperBlock/index.tsx +++ b/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: { diff --git a/src/components/node/NodeTextBlock/index.tsx b/src/components/node/NodeTextBlock/index.tsx index f695e2fd..6b82a5b5 100644 --- a/src/components/node/NodeTextBlock/index.tsx +++ b/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 = ({ node }) => { - const content = useMemo(() => formatTextParagraphs(path(['blocks', 0, 'text'], node) || ''), [ - node, - ]); + const content = useMemo( + () => formatTextParagraphs(path(['blocks', 0, 'text'], node) || ''), + [node], + ); const background = useColorGradientFromString(node.title, 3, 2); diff --git a/src/components/node/NodeVideoBlock/index.tsx b/src/components/node/NodeVideoBlock/index.tsx index b43b9f4c..93c10116 100644 --- a/src/components/node/NodeVideoBlock/index.tsx +++ b/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 = ({ node }) => { const video = useMemo(() => { @@ -13,7 +13,7 @@ const NodeVideoBlock: FC = ({ 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]; diff --git a/src/constants/node/index.ts b/src/constants/node/index.ts index b4fd9ad4..49c6a42b 100644 --- a/src/constants/node/index.ts +++ b/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, - FC + FC >; -export const LAB_PREVIEW_LAYOUT: Record[]> = { +export const LAB_PREVIEW_LAYOUT: Record[]> = { [NODE_TYPES.IMAGE]: [LabImage, LabPad, LabNodeTitle, LabDescription], [NODE_TYPES.VIDEO]: [LabVideo, LabPad, LabNodeTitle, LabDescription], [NODE_TYPES.AUDIO]: [ diff --git a/src/hooks/node/useNodeBlocks.ts b/src/hooks/node/useNodeBlocks.ts index aabe128e..5cf1f4d5 100644 --- a/src/hooks/node/useNodeBlocks.ts +++ b/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, key = 0) => + (block?: FC, 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 };