added error display

src/components/node/CommentForm/index.tsx

@@ -22,6 +22,7 @@ import { moveArrItem } from '~/utils/fn';
 import { SortEnd } from 'react-sortable-hoc';
 import { SortableAudioGrid } from '~/components/editors/SortableAudioGrid';
 import { getRandomPhrase } from '~/constants/phrases';
+import { ERROR_LITERAL } from '~/constants/errors';
 
 const mapStateToProps = (state: IState) => ({
   node: selectNode(state),
@@ -237,6 +238,15 @@ const CommentFormUnconnected: FC<IProps> = memo(
     const hasAudioAttaches = audios.length > 0 || locked_audios.length > 0;
     const hasAttaches = hasImageAttaches || hasAudioAttaches;
 
+    const clearError = useCallback(() => nodeSetCommentData(id, { error: '' }), [
+      id,
+      nodeSetCommentData,
+    ]);
+
+    useEffect(() => {
+      if (comment.error) clearError();
+    }, [comment.files, comment.text]);
+
     return (
       <form onSubmit={onSubmit} className={styles.wrap}>
         <div className={styles.input}>
@@ -248,6 +258,12 @@ const CommentFormUnconnected: FC<IProps> = memo(
             placeholder={placeholder}
             minRows={2}
           />
+
+          {comment.error && (
+            <div className={styles.error} onClick={clearError}>
+              {ERROR_LITERAL[comment.error] || comment.error}
+            </div>
+          )}
         </div>
 
         {hasAttaches && (

src/components/node/CommentForm/styles.scss

@@ -9,7 +9,7 @@
 
 .input {
   @include outer_shadow();
-
+  position: relative;
   flex: 1;
   padding: ($gap / 2) ($gap / 2 + 1px);
 }
@@ -36,3 +36,17 @@
 .attaches {
   @include outer_shadow();
 }
+
+.error {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  background: $red;
+  z-index: 10;
+  font: $font_12_regular;
+  box-sizing: border-box;
+  padding: 0 $gap;
+  border-radius: 4px 4px 0 0;
+  transform: translate(-50%, 0);
+  cursor: pointer;
+}