refactor comment components

src/components/comment/LocalCommentFormTextarea/index.tsx

@@ -1,36 +0,0 @@
-import React, { forwardRef, KeyboardEventHandler, TextareaHTMLAttributes, useCallback } from 'react';
-
-import { Textarea } from '~/components/input/Textarea';
-import { useRandomPhrase } from '~/constants/phrases';
-import { useCommentFormContext } from '~/hooks/comments/useCommentFormFormik';
-
-interface IProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
-  isLoading?: boolean;
-}
-
-const LocalCommentFormTextarea = forwardRef<HTMLTextAreaElement, IProps>(({ ...rest }, ref) => {
-  const { values, handleChange, handleSubmit, isSubmitting } = useCommentFormContext();
-
-  const onKeyDown = useCallback<KeyboardEventHandler<HTMLTextAreaElement>>(
-    ({ ctrlKey, key, metaKey }) => {
-      if ((ctrlKey || metaKey) && key === 'Enter') handleSubmit(undefined);
-    },
-    [handleSubmit]
-  );
-
-  const placeholder = useRandomPhrase('SIMPLE');
-
-  return (
-    <Textarea
-      {...rest}
-      ref={ref}
-      value={values.text}
-      handler={handleChange('text')}
-      onKeyDown={onKeyDown}
-      disabled={isSubmitting}
-      placeholder={placeholder}
-    />
-  );
-});
-
-export { LocalCommentFormTextarea };

src/components/common/CommentForm/components/CommentFormTextarea/index.tsx

@@ -0,0 +1,44 @@
+import React, {
+  forwardRef,
+  KeyboardEventHandler,
+  TextareaHTMLAttributes,
+  useCallback,
+} from 'react';
+
+import { Textarea } from '~/components/input/Textarea';
+import { useRandomPhrase } from '~/constants/phrases';
+import { useCommentFormContext } from '~/hooks/comments/useCommentFormFormik';
+
+interface IProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  isLoading?: boolean;
+}
+
+const CommentFormTextarea = forwardRef<HTMLTextAreaElement, IProps>(
+  ({ ...rest }, ref) => {
+    const { values, handleChange, handleSubmit, isSubmitting } =
+      useCommentFormContext();
+
+    const onKeyDown = useCallback<KeyboardEventHandler<HTMLTextAreaElement>>(
+      ({ ctrlKey, key, metaKey }) => {
+        if ((ctrlKey || metaKey) && key === 'Enter') handleSubmit(undefined);
+      },
+      [handleSubmit],
+    );
+
+    const placeholder = useRandomPhrase('SIMPLE');
+
+    return (
+      <Textarea
+        {...rest}
+        ref={ref}
+        value={values.text}
+        handler={handleChange('text')}
+        onKeyDown={onKeyDown}
+        disabled={isSubmitting}
+        placeholder={placeholder}
+      />
+    );
+  },
+);
+
+export { CommentFormTextarea };

src/components/common/CommentForm/index.tsx

@@ -3,10 +3,6 @@ import { FC, useCallback, useState } from 'react';
 import { FormikProvider } from 'formik';
 import { observer } from 'mobx-react-lite';
 
-import { CommentFormAttachButtons } from '~/components/comment/CommentFormAttachButtons';
-import { CommentFormAttaches } from '~/components/comment/CommentFormAttaches';
-import { CommentFormFormatButtons } from '~/components/comment/CommentFormFormatButtons';
-import { LocalCommentFormTextarea } from '~/components/comment/LocalCommentFormTextarea';
 import { Filler } from '~/components/containers/Filler';
 import { Button } from '~/components/input/Button';
 import { ERROR_LITERAL } from '~/constants/errors';
@@ -14,10 +10,12 @@ import { EMPTY_COMMENT } from '~/constants/node';
 import { useCommentFormFormik } from '~/hooks/comments/useCommentFormFormik';
 import { useInputPasteUpload } from '~/hooks/dom/useInputPasteUpload';
 import { IComment } from '~/types';
-import {
-  useUploaderContext,
-} from '~/utils/context/UploaderContextProvider';
+import { useUploaderContext } from '~/utils/context/UploaderContextProvider';
 
+import { CommentFormAttachButtons } from './components/CommentFormAttachButtons';
+import { CommentFormAttaches } from './components/CommentFormAttaches';
+import { CommentFormFormatButtons } from './components/CommentFormFormatButtons';
+import { CommentFormTextarea } from './components/CommentFormTextarea';
 import styles from './styles.module.scss';
 
 interface IProps {
@@ -63,7 +61,7 @@ const CommentForm: FC<IProps> = observer(
       <form onSubmit={formik.handleSubmit} className={styles.wrap}>
         <FormikProvider value={formik}>
           <div className={styles.input}>
-            <LocalCommentFormTextarea onPaste={onPaste} ref={setTextArea} />
+            <CommentFormTextarea onPaste={onPaste} ref={setTextArea} />
 
             {!!error && (
               <div className={styles.error} onClick={clearError}>

src/components/common/CornerMenu/index.tsx

@@ -1,8 +1,9 @@
 import React, { useCallback, useState, VFC } from 'react';
 
-import styles from '~/components/comment/CommentMenu/styles.module.scss';
 import { MenuDots } from '~/components/common/MenuDots';
 
+import styles from './styles.module.scss';
+
 interface MenuAction {
   title: string;
   action: () => void;
@@ -18,7 +19,12 @@ const CornerMenu: VFC<CornerMenuProps> = ({ actions }) => {
   const onBlur = useCallback(() => setIsMenuOpened(false), [setIsMenuOpened]);
 
   return (
-    <div className={styles.wrap} onFocus={onFocus} onBlur={onBlur} tabIndex={-1}>
+    <div
+      className={styles.wrap}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      tabIndex={-1}
+    >
       <MenuDots onClick={onFocus} />
 
       {is_menu_opened && (

src/constants/comment.ts

@@ -1,6 +1,3 @@
-import { CommentEmbedBlock } from '~/components/comment/CommentEmbedBlock';
-import { CommentTextBlock } from '~/components/comment/CommentTextBlock';
-
 export const COMMENT_BLOCK_TYPES = {
   TEXT: 'TEXT',
   MARK: 'MARK',
@@ -31,10 +28,4 @@ export type ICommentBlockProps = {
   block: ICommentBlock;
 };
 
-export const COMMENT_BLOCK_RENDERERS = {
-  [COMMENT_BLOCK_TYPES.TEXT]: CommentTextBlock,
-  [COMMENT_BLOCK_TYPES.MARK]: CommentTextBlock,
-  [COMMENT_BLOCK_TYPES.EMBED]: CommentEmbedBlock,
-};
-
 export const NEW_COMMENT_CLASSNAME = 'newComment';

src/containers/boris/BorisComments/index.tsx

@@ -3,8 +3,8 @@ import { FC } from 'react';
 import { Group } from '~/components/containers/Group';
 import { Footer } from '~/components/main/Footer';
 import { NodeNoComments } from '~/components/node/NodeNoComments';
-import { NodeCommentFormSSR } from '~/containers/node/NodeCommentForm/ssr';
-import { NodeComments } from '~/containers/node/NodeComments';
+import { NodeCommentFormSSR } from '~/containers/comments/NodeCommentForm/ssr';
+import { NodeComments } from '~/containers/comments/NodeComments';
 import { useCommentContext } from '~/utils/context/CommentContextProvider';
 
 interface Props {}

src/containers/comments/CommentWrapper/index.tsx

@@ -2,11 +2,11 @@ import React, { FC } from 'react';
 
 import classNames from 'classnames';
 
-import { CommentAvatar } from '~/components/comment/CommentAvatar';
 import { IUser } from '~/types/auth';
 import { path } from '~/utils/ramda';
 import { DivProps } from '~/utils/types';
 
+import { CommentAvatar } from './components/CommentAvatar';
 import styles from './styles.module.scss';
 
 type IProps = DivProps & {

src/containers/comments/NodeCommentForm/index.tsx

@@ -2,8 +2,7 @@ import { FC, useCallback } from 'react';
 
 import { observer } from 'mobx-react-lite';
 
-import { CommentForm } from '~/components/comment/CommentForm';
-import { CommentWrapper } from '~/components/containers/CommentWrapper';
+import { CommentForm } from '~/components/common/CommentForm';
 import { UploadDropzone } from '~/components/upload/UploadDropzone';
 import { Dialog } from '~/constants/modal';
 import { UploadSubject, UploadTarget } from '~/constants/uploads';
@@ -13,6 +12,8 @@ import { useShowModal } from '~/hooks/modal/useShowModal';
 import { IComment } from '~/types';
 import { UploaderContextProvider } from '~/utils/context/UploaderContextProvider';
 
+import { CommentWrapper } from '../CommentWrapper';
+
 export interface Props {
   saveComment: (comment: IComment) => Promise<IComment | undefined>;
 }

src/containers/comments/NodeComments/components/Comment/components/CommentContent/components/CommentEditingForm/index.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react';
 
 import { observer } from 'mobx-react-lite';
 
-import { CommentForm } from '~/components/comment/CommentForm';
+import { CommentForm } from '~/components/common/CommentForm';
 import { UploadDropzone } from '~/components/upload/UploadDropzone';
 import { UploadSubject, UploadTarget } from '~/constants/uploads';
 import { useUploader } from '~/hooks/data/useUploader';

src/containers/comments/NodeComments/components/Comment/components/CommentContent/constants/index.ts

@@ -0,0 +1,10 @@
+import { COMMENT_BLOCK_TYPES } from '~/constants/comment';
+
+import { CommentEmbedBlock } from '../components/CommentEmbedBlock';
+import { CommentTextBlock } from '../components/CommentTextBlock';
+
+export const COMMENT_BLOCK_RENDERERS = {
+  [COMMENT_BLOCK_TYPES.TEXT]: CommentTextBlock,
+  [COMMENT_BLOCK_TYPES.MARK]: CommentTextBlock,
+  [COMMENT_BLOCK_TYPES.EMBED]: CommentEmbedBlock,
+};

src/containers/comments/NodeComments/components/Comment/components/CommentContent/index.tsx

@@ -12,17 +12,16 @@ import classnames from 'classnames';
 
 import { Group } from '~/components/containers/Group';
 import { AudioPlayer } from '~/components/media/AudioPlayer';
-import { COMMENT_BLOCK_RENDERERS } from '~/constants/comment';
 import { UploadType } from '~/constants/uploads';
 import { IComment, IFile } from '~/types';
 import { formatCommentText, getPrettyDate } from '~/utils/dom';
 import { append, assocPath, path, reduce } from '~/utils/ramda';
 
-import { CommentEditingForm } from '../CommentEditingForm';
-import { CommentImageGrid } from '../CommentImageGrid';
-import { CommentLike } from '../CommentLike';
-import { CommentMenu } from '../CommentMenu';
-
+import { CommentEditingForm } from './components/CommentEditingForm';
+import { CommentImageGrid } from './components/CommentImageGrid';
+import { CommentLike } from './components/CommentLike';
+import { CommentMenu } from './components/CommentMenu';
+import { COMMENT_BLOCK_RENDERERS } from './constants';
 import styles from './styles.module.scss';
 
 interface IProps {

src/containers/comments/NodeComments/components/Comment/index.tsx

@@ -3,14 +3,14 @@ import React, { FC, HTMLAttributes, memo } from 'react';
 import classNames from 'classnames';
 import { parseISO } from 'date-fns';
 
-import { CommentContent } from '~/components/comment/CommentContent';
-import { CommentDistance } from '~/components/comment/CommentDistance';
-import { CommentWrapper } from '~/components/containers/CommentWrapper';
 import { NEW_COMMENT_CLASSNAME } from '~/constants/comment';
+import { CommentWrapper } from '~/containers/comments/CommentWrapper';
 import { IComment, ICommentGroup, IFile } from '~/types';
 
-import { CommendDeleted } from '../../node/CommendDeleted';
+import { CommendDeleted } from '../../../../../components/node/CommendDeleted';
 
+import { CommentContent } from './components/CommentContent';
+import { CommentDistance } from './components/CommentDistance';
 import styles from './styles.module.scss';
 
 type Props = HTMLAttributes<HTMLDivElement> & {

src/containers/comments/NodeComments/index.tsx

@@ -2,9 +2,9 @@ import React, { FC, useMemo } from 'react';
 
 import { observer } from 'mobx-react-lite';
 
-import { Comment } from '~/components/comment/Comment';
 import { LoadMoreButton } from '~/components/input/LoadMoreButton';
 import { ANNOUNCE_USER_ID, BORIS_NODE_ID } from '~/constants/boris/constants';
+import { Comment } from '~/containers/comments/NodeComments/components/Comment';
 import { useGrouppedComments } from '~/hooks/node/useGrouppedComments';
 import { ICommentGroup } from '~/types';
 import { useCommentContext } from '~/utils/context/CommentContextProvider';

src/containers/main/Header/index.tsx

@@ -5,7 +5,7 @@ import isBefore from 'date-fns/isBefore';
 import { observer } from 'mobx-react-lite';
 
 import { Anchor } from '~/components/common/Anchor';
-import { Authorized } from '~/components/containers/Authorized';
+import { Authorized } from '~/components/common/Authorized';
 import { Filler } from '~/components/containers/Filler';
 import { Button } from '~/components/input/Button';
 import { Logo } from '~/components/main/Logo';

src/containers/main/SubmitBarRouter/index.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 
-import { Authorized } from '~/components/containers/Authorized';
+import { Authorized } from '~/components/common/Authorized';
 
 import { SubmitBarSSR } from './components/SubmitBar/ssr';
 

src/containers/node/NodeBottomBlock/index.tsx

@@ -9,9 +9,9 @@ import { NodeDeletedBadge } from '~/components/node/NodeDeletedBadge';
 import { NodeNoComments } from '~/components/node/NodeNoComments';
 import { NodeRelatedBlock } from '~/components/node/NodeRelatedBlock';
 import { NodeTagsBlock } from '~/components/node/NodeTagsBlock';
+import { NodeCommentFormSSR } from '~/containers/comments/NodeCommentForm/ssr';
+import { NodeComments } from '~/containers/comments/NodeComments';
 import { NodeBacklinks } from '~/containers/node/NodeBacklinks';
-import { NodeCommentFormSSR } from '~/containers/node/NodeCommentForm/ssr';
-import { NodeComments } from '~/containers/node/NodeComments';
 import { useNodeBlocks } from '~/hooks/node/useNodeBlocks';
 import { useCommentContext } from '~/utils/context/CommentContextProvider';
 import { useNodeContext } from '~/utils/context/NodeContextProvider';