hooks to show node loader

src/redux/node/actions.ts

@@ -12,8 +12,9 @@ export const nodeSetSaveErrors = (errors: IValidationErrors) => ({
   type: NODE_ACTIONS.SET_SAVE_ERRORS,
 });
 
-export const nodeLoadNode = (id: string | number) => ({
+export const nodeLoadNode = (id: string | number, node_type: INode['type']) => ({
   id,
+  node_type,
   type: NODE_ACTIONS.LOAD_NODE,
 });
 
@@ -21,3 +22,8 @@ export const nodeSetLoading = (is_loading: INodeState['is_loading']) => ({
   is_loading,
   type: NODE_ACTIONS.SET_LOADING,
 });
+
+export const nodeSetCurrent = (current: INodeState['current']) => ({
+  current,
+  type: NODE_ACTIONS.SET_CURRENT,
+});

src/redux/node/constants.ts

@@ -1,15 +1,16 @@
+import { FC } from 'react';
 import { IBlock, INode, ValueOf } from '../types';
 import { NodeImageBlock } from '~/components/node/NodeImageBlock';
 import { NodeImageBlockPlaceholder } from '~/components/node/NodeImageBlockPlaceholder';
-import { ReactElement, FC } from 'react';
 
 const prefix = 'NODE.';
 export const NODE_ACTIONS = {
-  SAVE: `${prefix}NODE.SAVE`,
+  SAVE: `${prefix}SAVE`,
   LOAD_NODE: `${prefix}LOAD_NODE`,
 
-  SET_SAVE_ERRORS: `${prefix}NODE.SET_SAVE_ERRORS`,
-  SET_LOADING: `${prefix}NODE.SET_LOADING`,
+  SET_SAVE_ERRORS: `${prefix}SET_SAVE_ERRORS`,
+  SET_LOADING: `${prefix}SET_LOADING`,
+  SET_CURRENT: `${prefix}SET_CURRENT`,
 };
 
 export const EMPTY_BLOCK: IBlock = {
@@ -47,14 +48,8 @@ export const NODE_TYPES = {
   TEXT: 'text',
 };
 
-type INodeComponents = Record<
-  ValueOf<typeof NODE_TYPES>,
-  Record<'component' | 'placeholder', FC<{ node: INode }>>
->;
+type INodeComponents = Record<ValueOf<typeof NODE_TYPES>, FC<{ node: INode; is_loading: boolean }>>;
 
 export const NODE_COMPONENTS: INodeComponents = {
-  [NODE_TYPES.IMAGE]: {
-    component: NodeImageBlock,
-    placeholder: NodeImageBlockPlaceholder,
-  },
+  [NODE_TYPES.IMAGE]: NodeImageBlock,
 };

src/redux/node/handlers.ts

@@ -1,6 +1,6 @@
 import assocPath from 'ramda/es/assocPath';
 import { NODE_ACTIONS } from './constants';
-import { nodeSetSaveErrors, nodeSetLoading } from './actions';
+import { nodeSetSaveErrors, nodeSetLoading, nodeSetCurrent } from './actions';
 import { INodeState } from './reducer';
 
 const setSaveErrors = (state: INodeState, { errors }: ReturnType<typeof nodeSetSaveErrors>) =>
@@ -9,7 +9,11 @@ const setSaveErrors = (state: INodeState, { errors }: ReturnType<typeof nodeSetS
 const setLoading = (state: INodeState, { is_loading }: ReturnType<typeof nodeSetLoading>) =>
   assocPath(['is_loading'], is_loading, state);
 
+const setCurrent = (state: INodeState, { current }: ReturnType<typeof nodeSetCurrent>) =>
+  assocPath(['current'], current, state);
+
 export const NODE_HANDLERS = {
   [NODE_ACTIONS.SAVE]: setSaveErrors,
   [NODE_ACTIONS.SET_LOADING]: setLoading,
+  [NODE_ACTIONS.SET_CURRENT]: setCurrent,
 };

src/redux/node/sagas.ts

@@ -1,8 +1,14 @@
 import { takeLatest, call, put, select, delay } from 'redux-saga/effects';
 import { push } from 'connected-react-router';
 
-import { NODE_ACTIONS } from './constants';
-import { nodeSave, nodeSetSaveErrors, nodeLoadNode, nodeSetLoading } from './actions';
+import { NODE_ACTIONS, EMPTY_NODE } from './constants';
+import {
+  nodeSave,
+  nodeSetSaveErrors,
+  nodeLoadNode,
+  nodeSetLoading,
+  nodeSetCurrent,
+} from './actions';
 import { postNode } from './api';
 import { reqWrapper } from '../auth/sagas';
 import { flowSetNodes } from '../flow/actions';
@@ -31,10 +37,12 @@ function* onNodeSave({ node }: ReturnType<typeof nodeSave>) {
   return yield put(modalSetShown(false));
 }
 
-function* onNodeLoad({ id }: ReturnType<typeof nodeLoadNode>) {
+function* onNodeLoad({ id, node_type }: ReturnType<typeof nodeLoadNode>) {
   yield put(nodeSetLoading(true));
   yield put(nodeSetSaveErrors({}));
 
+  if (node_type) yield put(nodeSetCurrent({ ...EMPTY_NODE, type: node_type }));
+
   yield put(push(URLS.NODE_URL(id)));
 
   yield delay(1000);