From 38a4c8e6a6c7269655925030a6026a9c03dc5c49 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Wed, 16 Oct 2019 11:54:41 +0700
Subject: [PATCH] editor displaying errors

---
 src/constants/errors.ts                       |  5 +++
 src/containers/dialogs/EditorDialog/index.tsx | 33 ++++++++++++++-----
 src/redux/modal/reducer.ts                    |  4 +--
 src/redux/node/api.ts                         |  1 +
 src/redux/node/handlers.ts                    |  2 +-
 src/redux/node/selectors.ts                   |  6 ++++
 6 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/src/constants/errors.ts b/src/constants/errors.ts
index f1e1cf59..15fffbf7 100644
--- a/src/constants/errors.ts
+++ b/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]: 'Добавьте файлы',
 };
diff --git a/src/containers/dialogs/EditorDialog/index.tsx b/src/containers/dialogs/EditorDialog/index.tsx
index 965702c3..c018aaaa 100644
--- a/src/containers/dialogs/EditorDialog/index.tsx
+++ b/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>
diff --git a/src/redux/modal/reducer.ts b/src/redux/modal/reducer.ts
index be90b850..764ce9c6 100644
--- a/src/redux/modal/reducer.ts
+++ b/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);
diff --git a/src/redux/node/api.ts b/src/redux/node/api.ts
index 2e0d37fe..b7c2e7cd 100644
--- a/src/redux/node/api.ts
+++ b/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,
diff --git a/src/redux/node/handlers.ts b/src/redux/node/handlers.ts
index 813d53c7..4c6341df 100644
--- a/src/redux/node/handlers.ts
+++ b/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,
diff --git a/src/redux/node/selectors.ts b/src/redux/node/selectors.ts
index f5b591c0..fb33213c 100644
--- a/src/redux/node/selectors.ts
+++ b/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,
+// })