editor displaying errors

src/constants/errors.ts

@@ -3,8 +3,13 @@ export const ERRORS = {
   TOO_SHIRT: 'Is_Too_Shirt',
   EMPTY_RESPONSE: 'Empty_Response',
   NO_COMMENTS: 'No_Comments',
+  FILES_REQUIRED: 'Files_Required',
 };
 
 export const ERROR_LITERAL = {
+  [ERRORS.NOT_AN_EMAIL]: 'Введите правильный e-mail',
+  [ERRORS.TOO_SHIRT]: 'Слишком короткий',
   [ERRORS.NO_COMMENTS]: 'Комментариев пока нет',
+  [ERRORS.EMPTY_RESPONSE]: 'Пустой ответ сервера',
+  [ERRORS.FILES_REQUIRED]: 'Добавьте файлы',
 };

src/containers/dialogs/EditorDialog/index.tsx

@@ -1,8 +1,5 @@
-import React, { FC, useState, useCallback, useEffect, FormEvent } from 'react';
+import React, { FC, useState, useCallback, FormEvent, useEffect } from 'react';
 import { connect } from 'react-redux';
-import assocPath from 'ramda/es/assocPath';
-import append from 'ramda/es/append';
-import uuid from 'uuid4';
 import { ScrollDialog } from '../ScrollDialog';
 import { IDialogProps } from '~/redux/modal/constants';
 import { useCloseOnEscape } from '~/utils/hooks';
@@ -16,21 +13,29 @@ import { ImageEditor } from '~/components/editors/ImageEditor';
 import { EditorPanel } from '~/components/editors/EditorPanel';
 import * as NODE_ACTIONS from '~/redux/node/actions';
 import { selectUploads } from '~/redux/uploads/selectors';
+import { ERROR_LITERAL } from '~/constants/errors';
 
 const mapStateToProps = state => {
-  const { editor } = selectNode(state);
+  const { editor, errors } = selectNode(state);
   const { statuses, files } = selectUploads(state);
 
-  return { editor, statuses, files };
+  return { editor, statuses, files, errors };
 };
 
 const mapDispatchToProps = {
   nodeSave: NODE_ACTIONS.nodeSave,
+  nodeSetSaveErrors: NODE_ACTIONS.nodeSetSaveErrors,
 };
 
 type IProps = IDialogProps & ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
 
-const EditorDialogUnconnected: FC<IProps> = ({ onRequestClose, editor, statuses, nodeSave }) => {
+const EditorDialogUnconnected: FC<IProps> = ({
+  onRequestClose,
+  editor,
+  errors,
+  nodeSave,
+  nodeSetSaveErrors,
+}) => {
   const [data, setData] = useState(editor);
   const [temp, setTemp] = useState([]);
 
@@ -49,6 +54,11 @@ const EditorDialogUnconnected: FC<IProps> = ({ onRequestClose, editor, statuses,
     [data, nodeSave]
   );
 
+  useEffect(() => {
+    if (!Object.keys(errors).length) return;
+    nodeSetSaveErrors({});
+  }, [data]);
+
   const buttons = (
     <Padder style={{ position: 'relative' }}>
       <EditorPanel data={data} setData={setData} temp={temp} setTemp={setTemp} />
@@ -63,9 +73,16 @@ const EditorDialogUnconnected: FC<IProps> = ({ onRequestClose, editor, statuses,
 
   useCloseOnEscape(onRequestClose);
 
+  const error = errors && Object.values(errors)[0];
+
   return (
     <form onSubmit={onSubmit} className={styles.form}>
-      <ScrollDialog buttons={buttons} width={860} onClose={onRequestClose}>
+      <ScrollDialog
+        buttons={buttons}
+        width={860}
+        error={error && ERROR_LITERAL[error]}
+        onClose={onRequestClose}
+      >
         <div className={styles.editor}>
           <ImageEditor data={data} setData={setData} temp={temp} setTemp={setTemp} />
         </div>

src/redux/modal/reducer.ts

@@ -9,8 +9,8 @@ export interface IModalState {
 }
 
 const INITIAL_STATE: IModalState = {
-  is_shown: false,
-  dialog: null,
+  is_shown: true,
+  dialog: DIALOGS.EDITOR_IMAGE,
 };
 
 export default createReducer(INITIAL_STATE, MODAL_HANDLERS);

src/redux/node/api.ts

@@ -14,6 +14,7 @@ export const postNode = ({
     .post(API.NODE.SAVE, { node }, configWithToken(access))
     .then(resultMiddleware)
     .catch(errorMiddleware);
+// .then(console.log);
 
 export const getNodes = ({
   skip = 0,

src/redux/node/handlers.ts

@@ -43,7 +43,7 @@ const setTags = (state: INodeState, { tags }: ReturnType<typeof nodeSetTags>) =>
   assocPath(['current', 'tags'], tags, state);
 
 export const NODE_HANDLERS = {
-  [NODE_ACTIONS.SAVE]: setSaveErrors,
+  [NODE_ACTIONS.SET_SAVE_ERRORS]: setSaveErrors,
   [NODE_ACTIONS.SET_LOADING]: setLoading,
   [NODE_ACTIONS.SET_LOADING_COMMENTS]: setLoadingComments,
   [NODE_ACTIONS.SET_CURRENT]: setCurrent,

src/redux/node/selectors.ts

@@ -1,4 +1,10 @@
 import { IState } from '../store';
 import { INodeState } from './reducer';
+import { IResultWithStatus, INode } from '../types';
 
 export const selectNode = (state: IState): INodeState => state.node;
+
+// export const catchNodeErrors = (data: IResultWithStatus<INode>): IResultWithStatus<INode> => ({
+// data,
+// errors: data.errors,
+// })