From 54ce8db210bf5b620beb8013908328c86d4d71c3 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Thu, 17 Oct 2019 14:44:13 +0700
Subject: [PATCH] displaying text

---
 .../node/NodeImageSlideBlock/index.tsx        | 13 +-----------
 src/components/node/NodeTextBlock/index.tsx   | 20 +++++++++++++++++++
 src/components/node/NodeTextBlock/styles.scss | 11 ++++++++++
 src/constants/errors.ts                       |  2 ++
 src/containers/dialogs/EditorDialog/index.tsx |  6 +-----
 src/containers/node/NodeLayout/index.tsx      | 11 ++++++++--
 src/redux/modal/reducer.ts                    |  2 +-
 src/redux/node/constants.ts                   |  8 ++++++--
 8 files changed, 51 insertions(+), 22 deletions(-)
 create mode 100644 src/components/node/NodeTextBlock/index.tsx
 create mode 100644 src/components/node/NodeTextBlock/styles.scss

diff --git a/src/components/node/NodeImageSlideBlock/index.tsx b/src/components/node/NodeImageSlideBlock/index.tsx
index 40c4f71c..fe80da69 100644
--- a/src/components/node/NodeImageSlideBlock/index.tsx
+++ b/src/components/node/NodeImageSlideBlock/index.tsx
@@ -1,15 +1,4 @@
-import React, {
-  FC,
-  useMemo,
-  useState,
-  useEffect,
-  RefObject,
-  LegacyRef,
-  useRef,
-  useCallback,
-  MouseEventHandler,
-  TouchEventHandler,
-} from 'react';
+import React, { FC, useMemo, useState, useEffect, useRef, useCallback } from 'react';
 import { ImageSwitcher } from '../ImageSwitcher';
 import * as styles from './styles.scss';
 import { INode } from '~/redux/types';
diff --git a/src/components/node/NodeTextBlock/index.tsx b/src/components/node/NodeTextBlock/index.tsx
new file mode 100644
index 00000000..8b053775
--- /dev/null
+++ b/src/components/node/NodeTextBlock/index.tsx
@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+import { INode } from '~/redux/types';
+import path from 'ramda/es/path';
+import { formatCommentText } from '~/utils/dom';
+import * as styles from './styles.scss';
+
+interface IProps {
+  node: INode;
+}
+
+const NodeTextBlock: FC<IProps> = ({ node }) => (
+  <div
+    className={styles.text}
+    dangerouslySetInnerHTML={{
+      __html: formatCommentText(null, path(['blocks', 0, 'text'], node)),
+    }}
+  />
+);
+
+export { NodeTextBlock };
diff --git a/src/components/node/NodeTextBlock/styles.scss b/src/components/node/NodeTextBlock/styles.scss
new file mode 100644
index 00000000..d075cd73
--- /dev/null
+++ b/src/components/node/NodeTextBlock/styles.scss
@@ -0,0 +1,11 @@
+.text {
+  @include outer_shadow();
+
+  background: $content_bg;
+  padding: $gap;
+  border-radius: $radius;
+
+  p {
+    margin: $gap / 2 0;
+  }
+}
diff --git a/src/constants/errors.ts b/src/constants/errors.ts
index 15fffbf7..4070a22c 100644
--- a/src/constants/errors.ts
+++ b/src/constants/errors.ts
@@ -4,6 +4,7 @@ export const ERRORS = {
   EMPTY_RESPONSE: 'Empty_Response',
   NO_COMMENTS: 'No_Comments',
   FILES_REQUIRED: 'Files_Required',
+  TEXT_REQUIRED: 'Text_Required',
 };
 
 export const ERROR_LITERAL = {
@@ -12,4 +13,5 @@ export const ERROR_LITERAL = {
   [ERRORS.NO_COMMENTS]: 'Комментариев пока нет',
   [ERRORS.EMPTY_RESPONSE]: 'Пустой ответ сервера',
   [ERRORS.FILES_REQUIRED]: 'Добавьте файлы',
+  [ERRORS.TEXT_REQUIRED]: 'Нужно немного текста',
 };
diff --git a/src/containers/dialogs/EditorDialog/index.tsx b/src/containers/dialogs/EditorDialog/index.tsx
index 8257e08d..5430e4ca 100644
--- a/src/containers/dialogs/EditorDialog/index.tsx
+++ b/src/containers/dialogs/EditorDialog/index.tsx
@@ -19,8 +19,6 @@ const mapStateToProps = state => {
   const { editor, errors } = selectNode(state);
   const { statuses, files } = selectUploads(state);
 
-  console.log('mss', { editor });
-
   return { editor, statuses, files, errors };
 };
 
@@ -57,12 +55,10 @@ const EditorDialogUnconnected: FC<IProps> = ({
 
   const onSubmit = useCallback(
     (event: FormEvent) => {
-      console.log({ data, editor });
       event.preventDefault();
-      return;
       nodeSave(data);
     },
-    [data, nodeSave, editor]
+    [data, nodeSave]
   );
 
   useEffect(() => {
diff --git a/src/containers/node/NodeLayout/index.tsx b/src/containers/node/NodeLayout/index.tsx
index 4153147b..cde602c5 100644
--- a/src/containers/node/NodeLayout/index.tsx
+++ b/src/containers/node/NodeLayout/index.tsx
@@ -13,7 +13,7 @@ import { NodeRelated } from '~/components/node/NodeRelated';
 import * as styles from './styles.scss';
 import { NodeComments } from '~/components/node/NodeComments';
 import { NodeTags } from '~/components/node/NodeTags';
-import { NODE_COMPONENTS } from '~/redux/node/constants';
+import { NODE_COMPONENTS, NODE_INLINES } from '~/redux/node/constants';
 import * as NODE_ACTIONS from '~/redux/node/actions';
 import { CommentForm } from '~/components/node/CommentForm';
 import { selectUser } from '~/redux/auth/selectors';
@@ -57,7 +57,8 @@ const NodeLayoutUnconnected: FC<IProps> = ({
     [node, nodeUpdateTags]
   );
 
-  const block = node && node.type && NODE_COMPONENTS[node.type] && NODE_COMPONENTS[node.type];
+  const block = node && node.type && NODE_COMPONENTS[node.type];
+  const inline_block = node && node.type && NODE_INLINES[node.type];
 
   return (
     <Card className={styles.node} seamless>
@@ -69,6 +70,12 @@ const NodeLayoutUnconnected: FC<IProps> = ({
         <Padder>
           <Group horizontal className={styles.content}>
             <Group className={styles.comments}>
+              {inline_block && (
+                <div className={styles.inline_block}>
+                  {createElement(inline_block, { node, is_loading, updateLayout, layout })}
+                </div>
+              )}
+
               {is_loading_comments || !comments.length ? (
                 <NodeNoComments is_loading={is_loading_comments} />
               ) : (
diff --git a/src/redux/modal/reducer.ts b/src/redux/modal/reducer.ts
index 2a7e472a..a8d4ca97 100644
--- a/src/redux/modal/reducer.ts
+++ b/src/redux/modal/reducer.ts
@@ -9,7 +9,7 @@ export interface IModalState {
 }
 
 const INITIAL_STATE: IModalState = {
-  is_shown: false,
+  is_shown: true,
   dialog: DIALOGS.EDITOR_TEXT,
 };
 
diff --git a/src/redux/node/constants.ts b/src/redux/node/constants.ts
index 64bd54c8..04afa40a 100644
--- a/src/redux/node/constants.ts
+++ b/src/redux/node/constants.ts
@@ -1,9 +1,9 @@
 import { FC } from 'react';
-import { IBlock, INode, ValueOf, IComment } from '../types';
+import { INode, ValueOf, IComment } from '../types';
 import { NodeImageSlideBlock } from '~/components/node/NodeImageSlideBlock';
+import { NodeTextBlock } from '~/components/node/NodeTextBlock';
 import { ImageEditor } from '~/components/editors/ImageEditor';
 import { TextEditor } from '~/components/editors/TextEditor';
-import { DIALOGS } from '../modal/constants';
 
 const prefix = 'NODE.';
 export const NODE_ACTIONS = {
@@ -66,6 +66,10 @@ export const NODE_COMPONENTS: INodeComponents = {
   [NODE_TYPES.IMAGE]: NodeImageSlideBlock,
 };
 
+export const NODE_INLINES: INodeComponents = {
+  [NODE_TYPES.TEXT]: NodeTextBlock,
+};
+
 export const EMPTY_COMMENT: IComment = {
   id: null,
   text: '',