From 124719c243498038a259c0b380a1313ea9ffaaab Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Mon, 29 Mar 2021 17:45:54 +0700
Subject: [PATCH] #58 fixed dialog routers

---
 src/components/bars/SubmitBar/index.tsx       | 15 ++++++--
 .../editors/EditorButtons/index.tsx           |  4 +-
 .../dialogs/BetterScrollDialog/index.tsx      |  2 -
 .../BetterScrollDialog/styles.module.scss     |  1 +
 .../dialogs/EditorCreateDialog/index.tsx      |  2 +-
 src/containers/dialogs/EditorDialog/index.tsx | 24 +++++++++---
 .../dialogs/EditorEditDialog/index.tsx        |  2 +-
 src/containers/main/MainRouter/index.tsx      |  2 +-
 src/layouts/FlowLayout/index.tsx              |  2 +-
 src/redux/node/actions.ts                     | 14 ++++---
 src/redux/node/api.ts                         |  3 ++
 src/redux/node/constants.ts                   |  3 +-
 src/redux/node/sagas.ts                       | 17 ++++-----
 src/utils/hooks/index.ts                      |  4 +-
 src/utils/hooks/useNodeFormFormik.ts          | 37 +++++++++++++++++--
 15 files changed, 93 insertions(+), 39 deletions(-)

diff --git a/src/components/bars/SubmitBar/index.tsx b/src/components/bars/SubmitBar/index.tsx
index e96b3695..053477aa 100644
--- a/src/components/bars/SubmitBar/index.tsx
+++ b/src/components/bars/SubmitBar/index.tsx
@@ -16,22 +16,29 @@ const SubmitBar: FC<Props> = ({ isLab }) => {
   const onFocus = useCallback(() => setFocused(true), [setFocused]);
   const onBlur = useCallback(() => setFocused(false), [setFocused]);
 
+  const createUrl = useCallback(
+    (type: string) => {
+      return [url.replace(/\/$/, ''), 'create', type].join('/');
+    },
+    [url]
+  );
+
   return (
     <div className={classNames(styles.wrap, { [styles.lab]: isLab })}>
       <div className={classNames(styles.panel, { [styles.active]: focused })}>
-        <Link to={`${url}/create/image`} className={styles.link}>
+        <Link to={createUrl('image')} className={styles.link}>
           <Icon icon="image" size={32} />
         </Link>
 
-        <Link to={`${url}/create/text`} className={styles.link}>
+        <Link to={createUrl('text')} className={styles.link}>
           <Icon icon="text" size={32} />
         </Link>
 
-        <Link to={`${url}/create/video`} className={styles.link}>
+        <Link to={createUrl('video')} className={styles.link}>
           <Icon icon="video" size={32} />
         </Link>
 
-        <Link to={`${url}/create/audio`} className={styles.link}>
+        <Link to={createUrl('audio')} className={styles.link}>
           <Icon icon="audio" size={32} />
         </Link>
       </div>
diff --git a/src/components/editors/EditorButtons/index.tsx b/src/components/editors/EditorButtons/index.tsx
index 19dcb461..728093be 100644
--- a/src/components/editors/EditorButtons/index.tsx
+++ b/src/components/editors/EditorButtons/index.tsx
@@ -7,7 +7,7 @@ import { Padder } from '~/components/containers/Padder';
 import { useNodeFormContext } from '~/utils/hooks/useNodeFormFormik';
 
 const EditorButtons: FC = () => {
-  const { values, handleChange } = useNodeFormContext();
+  const { values, handleChange, isSubmitting } = useNodeFormContext();
 
   return (
     <Padder style={{ position: 'relative' }}>
@@ -20,12 +20,14 @@ const EditorButtons: FC = () => {
           handler={handleChange('title')}
           autoFocus
           maxLength={256}
+          disabled={isSubmitting}
         />
 
         <Button
           title="Сохранить"
           iconRight="check"
           color={values.is_promoted ? 'primary' : 'lab'}
+          disabled={isSubmitting}
         />
       </Group>
     </Padder>
diff --git a/src/containers/dialogs/BetterScrollDialog/index.tsx b/src/containers/dialogs/BetterScrollDialog/index.tsx
index 5122fc98..f2a42838 100644
--- a/src/containers/dialogs/BetterScrollDialog/index.tsx
+++ b/src/containers/dialogs/BetterScrollDialog/index.tsx
@@ -40,8 +40,6 @@ const BetterScrollDialog: FC<IProps> = ({
     return () => clearAllBodyScrollLocks();
   }, [ref]);
 
-  useCloseOnEscape(onClose);
-
   return (
     <div className={styles.wrap} ref={ref}>
       {backdrop && <div className={styles.backdrop}>{backdrop}</div>}
diff --git a/src/containers/dialogs/BetterScrollDialog/styles.module.scss b/src/containers/dialogs/BetterScrollDialog/styles.module.scss
index fb653af5..8990b842 100644
--- a/src/containers/dialogs/BetterScrollDialog/styles.module.scss
+++ b/src/containers/dialogs/BetterScrollDialog/styles.module.scss
@@ -104,6 +104,7 @@
   align-items: center;
   justify-content: center;
   border-radius: 0 0 $radius $radius;
+  z-index: 11;
 }
 
 .backdrop {
diff --git a/src/containers/dialogs/EditorCreateDialog/index.tsx b/src/containers/dialogs/EditorCreateDialog/index.tsx
index 30d26d27..fd663067 100644
--- a/src/containers/dialogs/EditorCreateDialog/index.tsx
+++ b/src/containers/dialogs/EditorCreateDialog/index.tsx
@@ -12,7 +12,7 @@ const EditorCreateDialog: FC = () => {
   } = useRouteMatch<{ type: string }>();
 
   const backUrl = useMemo(() => {
-    return url.replace(/\/create\/(.*)$/, '');
+    return (url && url.replace(/\/create\/(.*)$/, '')) || '/';
   }, [url]);
 
   const goBack = useCallback(() => {
diff --git a/src/containers/dialogs/EditorDialog/index.tsx b/src/containers/dialogs/EditorDialog/index.tsx
index 5a070157..f173207c 100644
--- a/src/containers/dialogs/EditorDialog/index.tsx
+++ b/src/containers/dialogs/EditorDialog/index.tsx
@@ -1,4 +1,4 @@
-import React, { createElement, FC, useCallback, useMemo } from 'react';
+import React, { createElement, FC, useCallback, useEffect, useMemo } from 'react';
 import { IDialogProps } from '~/redux/modal/constants';
 import styles from './styles.module.scss';
 import { NODE_EDITORS } from '~/redux/node/constants';
@@ -12,26 +12,40 @@ import { UPLOAD_SUBJECTS, UPLOAD_TARGETS } from '~/redux/uploads/constants';
 import { FormikProvider } from 'formik';
 import { INode } from '~/redux/types';
 import { ModalWrapper } from '~/components/dialogs/ModalWrapper';
+import { useTranslatedError } from '~/utils/hooks/useTranslatedError';
+import { useCloseOnEscape } from '~/utils/hooks';
 
 interface Props extends IDialogProps {
   node: INode;
 }
 
 const EditorDialog: FC<Props> = ({ node, onRequestClose }) => {
-  const uploader = useFileUploader(UPLOAD_SUBJECTS.EDITOR, UPLOAD_TARGETS.NODES, []);
+  const uploader = useFileUploader(UPLOAD_SUBJECTS.EDITOR, UPLOAD_TARGETS.NODES, node.files);
   const formik = useNodeFormFormik(node, uploader, onRequestClose);
-  const { values, handleSubmit, dirty } = formik;
+  const { values, handleSubmit, dirty, status, setStatus } = formik;
 
   const component = useMemo(() => node.type && prop(node.type, NODE_EDITORS), [node.type]);
 
   const onClose = useCallback(() => {
     if (!window.confirm('Точно выйти?')) {
-      return;
+      return undefined;
     }
 
     onRequestClose();
   }, [onRequestClose, dirty]);
 
+  const error = useTranslatedError(status);
+
+  useEffect(() => {
+    if (!status) {
+      return;
+    }
+
+    setStatus('');
+  }, [values]);
+
+  useCloseOnEscape(onClose);
+
   if (!component) {
     return null;
   }
@@ -45,7 +59,7 @@ const EditorDialog: FC<Props> = ({ node, onRequestClose }) => {
               footer={<EditorButtons />}
               backdrop={<CoverBackdrop cover={values.cover} />}
               width={860}
-              error=""
+              error={error}
               onClose={onClose}
             >
               <div className={styles.editor}>{createElement(component)}</div>
diff --git a/src/containers/dialogs/EditorEditDialog/index.tsx b/src/containers/dialogs/EditorEditDialog/index.tsx
index 88550f8f..8e4f2b73 100644
--- a/src/containers/dialogs/EditorEditDialog/index.tsx
+++ b/src/containers/dialogs/EditorEditDialog/index.tsx
@@ -9,7 +9,7 @@ import styles from './styles.module.scss';
 
 const EditorEditDialog: FC = () => {
   const [data, setData] = useState(EMPTY_NODE);
-  const [isLoading, setLoading] = useState(false);
+  const [isLoading, setLoading] = useState(true);
   const history = useHistory();
 
   const {
diff --git a/src/containers/main/MainRouter/index.tsx b/src/containers/main/MainRouter/index.tsx
index fa9e1fd4..7772a65a 100644
--- a/src/containers/main/MainRouter/index.tsx
+++ b/src/containers/main/MainRouter/index.tsx
@@ -18,11 +18,11 @@ const MainRouter: FC<IProps> = () => {
 
   return (
     <Switch location={location}>
-      <Route exact path={URLS.BASE} component={FlowLayout} />
       <Route path={URLS.NODE_URL(':id')} component={NodeLayout} />
       <Route path={URLS.BORIS} component={BorisLayout} />
       <Route path={URLS.ERRORS.NOT_FOUND} component={ErrorNotFound} />
       <Route path={URLS.PROFILE_PAGE(':username')} component={ProfilePage} />
+      <Route path={URLS.BASE} component={FlowLayout} />
 
       {is_user && (
         <>
diff --git a/src/layouts/FlowLayout/index.tsx b/src/layouts/FlowLayout/index.tsx
index c62c8e49..1c02288a 100644
--- a/src/layouts/FlowLayout/index.tsx
+++ b/src/layouts/FlowLayout/index.tsx
@@ -87,7 +87,7 @@ const FlowLayoutUnconnected: FC<IProps> = ({
         />
       </div>
 
-      <SidebarRouter prefix="/" />
+      <SidebarRouter prefix="" />
     </Container>
   );
 };
diff --git a/src/redux/node/actions.ts b/src/redux/node/actions.ts
index 96c70eec..40540ca6 100644
--- a/src/redux/node/actions.ts
+++ b/src/redux/node/actions.ts
@@ -7,11 +7,6 @@ export const nodeSet = (node: Partial<INodeState>) => ({
   type: NODE_ACTIONS.SET,
 });
 
-export const nodeSave = (node: INode) => ({
-  node,
-  type: NODE_ACTIONS.SAVE,
-});
-
 export const nodeSetSaveErrors = (errors: IValidationErrors) => ({
   errors,
   type: NODE_ACTIONS.SET_SAVE_ERRORS,
@@ -55,6 +50,15 @@ export const nodePostLocalComment = (
   type: NODE_ACTIONS.POST_COMMENT,
 });
 
+export const nodeSubmitLocal = (
+  node: INode,
+  callback: (e?: string, errors?: Record<string, string>) => void
+) => ({
+  node,
+  callback,
+  type: NODE_ACTIONS.SUBMIT_LOCAL,
+});
+
 export const nodeSetSendingComment = (is_sending_comment: boolean) => ({
   is_sending_comment,
   type: NODE_ACTIONS.SET_SENDING_COMMENT,
diff --git a/src/redux/node/api.ts b/src/redux/node/api.ts
index 55a09474..02929c71 100644
--- a/src/redux/node/api.ts
+++ b/src/redux/node/api.ts
@@ -40,6 +40,9 @@ export type ApiGetNodeCommentsResponse = { comments: IComment[]; comment_count:
 export const apiPostNode = ({ node }: ApiPostNodeRequest) =>
   api.post<ApiPostNodeResult>(API.NODE.SAVE, node).then(cleanResult);
 
+export const apiPostNodeLocal = ({ node }: ApiPostNodeRequest) =>
+  api.post<ApiPostNodeResult>(API.NODE.SAVE, node).then(cleanResult);
+
 export const getNodeDiff = ({
   start,
   end,
diff --git a/src/redux/node/constants.ts b/src/redux/node/constants.ts
index 8755a016..f59e053e 100644
--- a/src/redux/node/constants.ts
+++ b/src/redux/node/constants.ts
@@ -18,12 +18,11 @@ import { NodeImageSwiperBlock } from '~/components/node/NodeImageSwiperBlock';
 import { LabNodeTitle } from '~/components/lab/LabNodeTitle';
 import { LabText } from '~/components/lab/LabText';
 import { LabImage } from '~/components/lab/LabImage';
-import { LabBottomPanel } from '~/components/lab/LabBottomPanel';
 import { LabPad } from '~/components/lab/LabPad';
 
 const prefix = 'NODE.';
 export const NODE_ACTIONS = {
-  SAVE: `${prefix}SAVE`,
+  SUBMIT_LOCAL: `${prefix}SUBMIT_LOCAL`,
   LOAD_NODE: `${prefix}LOAD_NODE`,
   GOTO_NODE: `${prefix}GOTO_NODE`,
   SET: `${prefix}SET`,
diff --git a/src/redux/node/sagas.ts b/src/redux/node/sagas.ts
index ce5e0a06..16232f05 100644
--- a/src/redux/node/sagas.ts
+++ b/src/redux/node/sagas.ts
@@ -17,7 +17,6 @@ import {
   nodeLock,
   nodeLockComment,
   nodePostLocalComment,
-  nodeSave,
   nodeSet,
   nodeSetCommentData,
   nodeSetComments,
@@ -26,8 +25,8 @@ import {
   nodeSetLoading,
   nodeSetLoadingComments,
   nodeSetRelated,
-  nodeSetSaveErrors,
   nodeSetTags,
+  nodeSubmitLocal,
   nodeUpdateTags,
 } from './actions';
 import {
@@ -43,7 +42,6 @@ import {
   apiPostNodeTags,
 } from './api';
 import { flowSetNodes, flowSetUpdated } from '../flow/actions';
-import { ERRORS } from '~/constants/errors';
 import { modalSetShown, modalShowDialog } from '../modal/actions';
 import { selectFlow, selectFlowNodes } from '../flow/selectors';
 import { URLS } from '~/constants/urls';
@@ -73,14 +71,12 @@ export function* updateNodeEverywhere(node) {
   );
 }
 
-function* onNodeSave({ node }: ReturnType<typeof nodeSave>) {
+function* onNodeSubmitLocal({ node, callback }: ReturnType<typeof nodeSubmitLocal>) {
   try {
-    yield put(nodeSetSaveErrors({}));
-
     const { errors, node: result }: Unwrap<typeof apiPostNode> = yield call(apiPostNode, { node });
 
     if (errors && Object.values(errors).length > 0) {
-      yield put(nodeSetSaveErrors(errors));
+      callback('', errors);
       return;
     }
 
@@ -97,9 +93,10 @@ function* onNodeSave({ node }: ReturnType<typeof nodeSave>) {
       yield put(nodeSetCurrent(result));
     }
 
-    return yield put(modalSetShown(false));
+    callback();
+    return;
   } catch (error) {
-    yield put(nodeSetSaveErrors({ error: error.message || ERRORS.CANT_SAVE_NODE }));
+    callback(error.message);
   }
 }
 
@@ -361,7 +358,7 @@ function* onLockCommentSaga({ id, is_locked }: ReturnType<typeof nodeLockComment
 }
 
 export default function* nodeSaga() {
-  yield takeLatest(NODE_ACTIONS.SAVE, onNodeSave);
+  yield takeLatest(NODE_ACTIONS.SUBMIT_LOCAL, onNodeSubmitLocal);
   yield takeLatest(NODE_ACTIONS.GOTO_NODE, onNodeGoto);
   yield takeLatest(NODE_ACTIONS.LOAD_NODE, onNodeLoad);
   yield takeLatest(NODE_ACTIONS.POST_COMMENT, onPostComment);
diff --git a/src/utils/hooks/index.ts b/src/utils/hooks/index.ts
index 563bacb0..a6ad047b 100644
--- a/src/utils/hooks/index.ts
+++ b/src/utils/hooks/index.ts
@@ -16,10 +16,10 @@ export const useCloseOnEscape = (onRequestClose?: () => void, ignore_inputs = fa
   );
 
   useEffect(() => {
-    window.addEventListener('keyup', onEscape);
+    document.addEventListener('keyup', onEscape);
 
     return () => {
-      window.removeEventListener('keyup', onEscape);
+      document.removeEventListener('keyup', onEscape);
     };
   }, [onEscape]);
 };
diff --git a/src/utils/hooks/useNodeFormFormik.ts b/src/utils/hooks/useNodeFormFormik.ts
index 34450841..d04e9200 100644
--- a/src/utils/hooks/useNodeFormFormik.ts
+++ b/src/utils/hooks/useNodeFormFormik.ts
@@ -1,17 +1,46 @@
-import { INode } from '~/redux/types';
+import { IComment, INode } from '~/redux/types';
 import { FileUploader } from '~/utils/hooks/fileUploader';
 import { useCallback, useEffect, useRef } from 'react';
-import { useFormik, useFormikContext } from 'formik';
-import { object } from 'yup';
+import { FormikHelpers, useFormik, useFormikContext } from 'formik';
+import { object, string } from 'yup';
+import { useDispatch } from 'react-redux';
+import { nodeSubmitLocal } from '~/redux/node/actions';
+import { keys } from 'ramda';
 
 const validationSchema = object().shape({});
 
+const onSuccess = ({ resetForm, setStatus, setSubmitting, setErrors }: FormikHelpers<INode>) => (
+  e?: string,
+  errors?: Record<string, string>
+) => {
+  setSubmitting(false);
+
+  if (e) {
+    setStatus(e);
+    return;
+  }
+
+  if (errors && keys(errors).length) {
+    setErrors(errors);
+    return;
+  }
+
+  if (resetForm) {
+    resetForm();
+  }
+};
+
 export const useNodeFormFormik = (
   values: INode,
   uploader: FileUploader,
   stopEditing: () => void
 ) => {
-  const onSubmit = useCallback(console.log, []);
+  const dispatch = useDispatch();
+  const onSubmit = useCallback((values: INode, helpers: FormikHelpers<INode>) => {
+    helpers.setSubmitting(true);
+    dispatch(nodeSubmitLocal(values, onSuccess(helpers)));
+  }, []);
+
   const { current: initialValues } = useRef(values);
 
   const onReset = useCallback(() => {