sagas for node creation dialog

src/redux/node/actions.ts

@@ -1,5 +1,5 @@
 import { INode, IValidationErrors, IComment, ITag } from '../types';
-import { NODE_ACTIONS } from './constants';
+import { NODE_ACTIONS, NODE_TYPES } from './constants';
 import { INodeState } from './reducer';
 
 export const nodeSave = (node: INode) => ({
@@ -64,3 +64,18 @@ export const nodeSetTags = (tags: ITag[]) => ({
   type: NODE_ACTIONS.SET_TAGS,
   tags,
 });
+
+export const nodeCreate = (node_type: INode['type']) => ({
+  type: NODE_ACTIONS.CREATE,
+  node_type,
+});
+
+export const nodeEdit = (id: INode['id']) => ({
+  type: NODE_ACTIONS.CREATE,
+  id,
+});
+
+export const nodeSetEditor = (editor: INode) => ({
+  type: NODE_ACTIONS.SET_EDITOR,
+  editor,
+});

src/redux/node/constants.ts

@@ -2,18 +2,24 @@ import { FC } from 'react';
 import { IBlock, INode, ValueOf, IComment } from '../types';
 import { NodeImageBlock } from '~/components/node/NodeImageBlock';
 import { ImageEditor } from '~/components/editors/ImageEditor';
+import { TextEditor } from '~/components/editors/TextEditor';
+import { DIALOGS } from '../modal/constants';
 
 const prefix = 'NODE.';
 export const NODE_ACTIONS = {
   SAVE: `${prefix}SAVE`,
   LOAD_NODE: `${prefix}LOAD_NODE`,
 
+  EDIT: `${prefix}EDIT`,
+  CREATE: `${prefix}CREATE`,
+
   SET_SAVE_ERRORS: `${prefix}SET_SAVE_ERRORS`,
   SET_LOADING: `${prefix}SET_LOADING`,
   SET_LOADING_COMMENTS: `${prefix}SET_LOADING_COMMENTS`,
   SET_SENDING_COMMENT: `${prefix}SET_SENDING_COMMENT`,
   SET_CURRENT: `${prefix}SET_CURRENT`,
   SET_COMMENT_DATA: `${prefix}SET_COMMENT_DATA`,
+  SET_EDITOR: `${prefix}SET_EDITOR`,
 
   POST_COMMENT: `${prefix}POST_COMMENT`,
   SET_COMMENTS: `${prefix}SET_COMMENTS`,
@@ -22,13 +28,6 @@ export const NODE_ACTIONS = {
   SET_TAGS: `${prefix}SET_TAGS`,
 };
 
-export const EMPTY_BLOCK: IBlock = {
-  type: null,
-  files: [],
-  content: null,
-  embeds: [],
-};
-
 export const EMPTY_NODE: INode = {
   id: null,
 
@@ -78,6 +77,16 @@ export const EMPTY_COMMENT: IComment = {
 
 export const NODE_EDITORS = {
   [NODE_TYPES.IMAGE]: ImageEditor,
+  [NODE_TYPES.TEXT]: TextEditor,
 };
 
 export const MAX_NODE_FILES = 16;
+
+export const NODE_EDITOR_DATA: Record<
+  typeof NODE_TYPES[keyof typeof NODE_TYPES],
+  Partial<INode>
+> = {
+  [NODE_TYPES.TEXT]: {
+    blocks: [{ text: '', type: 'text' }],
+  },
+};

src/redux/node/handlers.ts

@@ -9,6 +9,7 @@ import {
   nodeSetComments,
   nodeSetCommentData,
   nodeSetTags,
+  nodeSetEditor,
 } from './actions';
 import { INodeState } from './reducer';
 
@@ -42,6 +43,9 @@ const setCommentData = (
 const setTags = (state: INodeState, { tags }: ReturnType<typeof nodeSetTags>) =>
   assocPath(['current', 'tags'], tags, state);
 
+const setEditor = (state: INodeState, { editor }: ReturnType<typeof nodeSetEditor>) =>
+  assocPath(['current', 'editor'], editor, state);
+
 export const NODE_HANDLERS = {
   [NODE_ACTIONS.SET_SAVE_ERRORS]: setSaveErrors,
   [NODE_ACTIONS.SET_LOADING]: setLoading,
@@ -51,4 +55,5 @@ export const NODE_HANDLERS = {
   [NODE_ACTIONS.SET_COMMENTS]: setComments,
   [NODE_ACTIONS.SET_COMMENT_DATA]: setCommentData,
   [NODE_ACTIONS.SET_TAGS]: setTags,
+  [NODE_ACTIONS.SET_EDITOR]: setEditor,
 };

src/redux/node/sagas.ts

@@ -1,7 +1,7 @@
 import { takeLatest, call, put, select, delay } from 'redux-saga/effects';
 import { push } from 'connected-react-router';
 
-import { NODE_ACTIONS, EMPTY_NODE, EMPTY_COMMENT } from './constants';
+import { NODE_ACTIONS, EMPTY_NODE, EMPTY_COMMENT, NODE_EDITOR_DATA } from './constants';
 import {
   nodeSave,
   nodeSetSaveErrors,
@@ -15,16 +15,19 @@ import {
   nodeSetCommentData,
   nodeUpdateTags,
   nodeSetTags,
+  nodeCreate,
+  nodeSetEditor,
 } from './actions';
 import { postNode, getNode, postNodeComment, getNodeComments, updateNodeTags } from './api';
 import { reqWrapper } from '../auth/sagas';
 import { flowSetNodes } from '../flow/actions';
 import { ERRORS } from '~/constants/errors';
-import { modalSetShown } from '../modal/actions';
+import { modalSetShown, modalShowDialog } from '../modal/actions';
 import { selectFlowNodes } from '../flow/selectors';
 import { URLS } from '~/constants/urls';
 import { selectNode } from './selectors';
 import { IResultWithStatus, INode } from '../types';
+import { NODE_EDITOR_DIALOGS } from '../modal/constants';
 
 function* onNodeSave({ node }: ReturnType<typeof nodeSave>) {
   yield put(nodeSetSaveErrors({}));
@@ -118,9 +121,17 @@ function* onUpdateTags({ id, tags }: ReturnType<typeof nodeUpdateTags>) {
   yield put(nodeSetTags(node.tags));
 }
 
+function* onCreateSaga({ node_type: type }: ReturnType<typeof nodeCreate>) {
+  if (!NODE_EDITOR_DIALOGS[type]) return;
+
+  yield put(nodeSetEditor({ ...EMPTY_NODE, ...(NODE_EDITOR_DATA[type] || {}), type }));
+  yield put(modalShowDialog(NODE_EDITOR_DIALOGS[type]));
+}
+
 export default function* nodeSaga() {
   yield takeLatest(NODE_ACTIONS.SAVE, onNodeSave);
   yield takeLatest(NODE_ACTIONS.LOAD_NODE, onNodeLoad);
   yield takeLatest(NODE_ACTIONS.POST_COMMENT, onPostComment);
   yield takeLatest(NODE_ACTIONS.UPDATE_TAGS, onUpdateTags);
+  yield takeLatest(NODE_ACTIONS.CREATE, onCreateSaga);
 }