hooks to show node loader

src/components/flow/Cell/index.tsx

@@ -14,18 +14,18 @@ interface IProps {
   // title?: string;
   // is_hero?: boolean;
   // is_stamp?: boolean;
-  onSelect: (id: INode['id']) => void;
+  onSelect: (id: INode['id'], type: INode['type']) => void;
   is_text?: boolean;
 }
 
-const Cell: FC<IProps> = ({ node: { id, title, brief }, onSelect, is_text = false }) => {
+const Cell: FC<IProps> = ({ node: { id, title, brief, type }, onSelect, is_text = false }) => {
   const [is_loaded, setIsLoaded] = useState(false);
 
   const onImageLoad = useCallback(() => {
     setIsLoaded(true);
   }, [setIsLoaded]);
 
-  const onClick = useCallback(() => onSelect(id), [onSelect, id]);
+  const onClick = useCallback(() => onSelect(id, type), [onSelect, id]);
 
   return (
     <div

src/components/flow/FlowGrid/index.tsx

@@ -6,7 +6,7 @@ import { IFlowState } from '~/redux/flow/reducer';
 import { INode } from '~/redux/types';
 
 type IProps = Partial<IFlowState> & {
-  onSelect: (id: INode['id']) => void;
+  onSelect: (id: INode['id'], type: INode['type']) => void;
 };
 
 export const FlowGrid: FC<IProps> = ({ nodes, onSelect }) => (

src/components/node/NodeImageBlock/index.tsx

@@ -1,21 +1,41 @@
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
 import { ImageSwitcher } from '../ImageSwitcher';
 import * as styles from './styles.scss';
+import { INode } from '~/redux/types';
+import classNames from 'classnames';
+import { getImageSize } from '~/utils/dom';
+import { UPLOAD_TYPES } from '~/redux/uploads/constants';
 
-interface IProps {}
+interface IProps {
+  is_loading: boolean;
+  node: INode;
+}
 
-const NodeImageBlock: FC<IProps> = ({}) => (
-  <div>
-    <ImageSwitcher total={5} current={2} />
+const NodeImageBlock: FC<IProps> = ({ node, is_loading }) => {
+  const images = useMemo(() => node.files.filter(({ type }) => type === UPLOAD_TYPES.IMAGE), [
+    node,
+  ]);
 
-    <div className={styles.image_container}>
-      <img
-        className={styles.image}
-        src="http://37.192.131.144/full/attached/2019/08/e4fb2a1d0a2e20d499aaa1f5f83a7115.jpg"
-        alt=""
-      />
+  return (
+    <div className={classNames(styles.wrap, { is_loading })}>
+      {!is_loading && (
+        <div>
+          <ImageSwitcher total={5} current={2} />
+
+          <div className={styles.image_container}>
+            {images.map(file => (
+              <img
+                className={styles.image}
+                src={getImageSize(file.url, 'node')}
+                alt=""
+                key={file.id}
+              />
+            ))}
+          </div>
+        </div>
+      )}
     </div>
-  </div>
-);
+  );
+};
 
 export { NodeImageBlock };