added user context

src/components/boris/BorisComments/index.tsx

@@ -3,10 +3,11 @@ import styles from './styles.module.scss';
 import { Group } from '~/components/containers/Group';
 import { NodeCommentForm } from '~/components/node/NodeCommentForm';
 import { NodeNoComments } from '~/components/node/NodeNoComments';
-import { NodeComments } from '~/components/node/NodeComments';
+import { NodeComments } from '~/views/node/NodeComments';
 import { Footer } from '~/components/main/Footer';
 import { IComment, IFile, INode } from '~/redux/types';
 import { IUser } from '~/redux/auth/types';
+import { CommentProvider } from '~/utils/providers/CommentProvider';
 
 interface IProps {
   node: INode;
@@ -37,15 +38,16 @@ const BorisComments: FC<IProps> = ({
         {isLoadingComments ? (
           <NodeNoComments is_loading count={7} />
         ) : (
-          <NodeComments
+          <CommentProvider
             comments={comments}
             count={commentCount}
-            user={user}
-            order="ASC"
             onDeleteComment={onDeleteComment}
             onLoadMoreComments={onLoadMoreComments}
             onShowImageModal={onShowImageModal}
-          />
+            isLoadingComments={isLoadingComments}
+          >
+            <NodeComments order="ASC" />
+          </CommentProvider>
         )}
       </Group>
 

src/components/node/NodeBottomBlock/index.tsx

@@ -2,7 +2,6 @@ import React, { FC } from 'react';
 import { NodeDeletedBadge } from '~/components/node/NodeDeletedBadge';
 import { Group } from '~/components/containers/Group';
 import { Padder } from '~/components/containers/Padder';
-import { NodeCommentsBlock } from '~/components/node/NodeCommentsBlock';
 import { NodeCommentForm } from '~/components/node/NodeCommentForm';
 import { NodeRelatedBlock } from '~/components/node/NodeRelatedBlock';
 import { useNodeBlocks } from '~/utils/hooks/node/useNodeBlocks';
@@ -11,14 +10,19 @@ import StickyBox from 'react-sticky-box/dist/esnext';
 import styles from './styles.module.scss';
 import { NodeAuthorBlock } from '~/components/node/NodeAuthorBlock';
 import { useNodeContext } from '~/utils/providers/NodeProvider';
+import { useCommentContext } from '~/utils/providers/CommentProvider';
+import { NodeNoComments } from '~/components/node/NodeNoComments';
+import { NodeComments } from '~/views/node/NodeComments';
+import { useUserContext } from '~/utils/providers/UserProvider';
 
 interface IProps {
-  isUser: boolean;
   commentsOrder: 'ASC' | 'DESC';
 }
 
 const NodeBottomBlock: FC<IProps> = ({ commentsOrder }) => {
-  const { node, related, isUser, isLoading } = useNodeContext();
+  const { is_user: isUser } = useUserContext();
+  const { node, related, isLoading } = useNodeContext();
+  const { comments, isLoadingComments } = useCommentContext();
   const { inline } = useNodeBlocks(node, isLoading);
 
   if (node.deleted_at) {
@@ -32,7 +36,11 @@ const NodeBottomBlock: FC<IProps> = ({ commentsOrder }) => {
           <Group className={styles.comments}>
             {inline && <div className={styles.inline}>{inline}</div>}
 
-            <NodeCommentsBlock order={commentsOrder} />
+            {isLoading || isLoadingComments || (!comments.length && !inline) ? (
+              <NodeNoComments is_loading={isLoadingComments || isLoading} />
+            ) : (
+              <NodeComments order={commentsOrder} />
+            )}
 
             {isUser && !isLoading && <NodeCommentForm nodeId={node.id} />}
           </Group>

src/components/node/NodeComments/index.tsx

@@ -1,72 +0,0 @@
-import React, { FC, memo, useMemo } from 'react';
-import { Comment } from '../../comment/Comment';
-
-import styles from './styles.module.scss';
-import { IComment, ICommentGroup, IFile } from '~/redux/types';
-import { IUser } from '~/redux/auth/types';
-import { canEditComment } from '~/utils/node';
-import { INodeState } from '~/redux/node/reducer';
-import { COMMENTS_DISPLAY } from '~/redux/node/constants';
-import { plural } from '~/utils/dom';
-import { useGrouppedComments } from '~/utils/hooks/node/useGrouppedComments';
-
-interface IProps {
-  comments: IComment[];
-  count: INodeState['comment_count'];
-  user: IUser;
-  order?: 'ASC' | 'DESC';
-  lastSeenCurrent?: string;
-  onShowImageModal: (images: IFile[], index: number) => void;
-  onLoadMoreComments: () => void;
-  onDeleteComment: (id: IComment['id'], isLocked: boolean) => void;
-}
-
-const NodeComments: FC<IProps> = memo(
-  ({
-    comments,
-    user,
-    count = 0,
-    order = 'DESC',
-    onLoadMoreComments,
-    onDeleteComment,
-    onShowImageModal,
-    lastSeenCurrent,
-  }) => {
-    const left = useMemo(() => Math.max(0, count - comments.length), [comments, count]);
-
-    const groupped: ICommentGroup[] = useGrouppedComments(comments, order, lastSeenCurrent);
-
-    const more = useMemo(
-      () =>
-        left > 0 && (
-          <div className={styles.more} onClick={onLoadMoreComments}>
-            Показать ещё{' '}
-            {plural(Math.min(left, COMMENTS_DISPLAY), 'комментарий', 'комментария', 'комментариев')}
-            {left > COMMENTS_DISPLAY ? ` из ${left} оставшихся` : ''}
-          </div>
-        ),
-      [left, onLoadMoreComments]
-    );
-
-    return (
-      <div className={styles.wrap}>
-        {order === 'DESC' && more}
-
-        {groupped.map(group => (
-          <Comment
-            key={group.ids.join()}
-            group={group}
-            canEdit={canEditComment(group, user)}
-            onDelete={onDeleteComment}
-            onShowImageModal={onShowImageModal}
-            isSame={group.user.id === user.id}
-          />
-        ))}
-
-        {order === 'ASC' && more}
-      </div>
-    );
-  }
-);
-
-export { NodeComments };

src/components/node/NodeComments/styles.module.scss

@@ -1,50 +0,0 @@
-@import "src/styles/variables";
-
-.wrap {
-  & > div {
-    margin: 0 0 $gap 0;
-
-    &:last-child {
-      margin: 0;
-    }
-  }
-}
-
-.more {
-  padding: $gap;
-  box-sizing: border-box;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: $radius;
-  text-transform: uppercase;
-  color: darken(white, 60%);
-  font: $font_14_medium;
-  cursor: pointer;
-  transition: all 0.25s;
-  user-select: none;
-  background: url('../../../sprites/stripes.svg');
-  position: relative;
-
-  &:hover {
-    color: $wisegreen;
-    background-color: darken($wisegreen, 12%);
-
-    .bar {
-      background: $wisegreen;
-    }
-  }
-}
-
-.bar {
-  position: absolute;
-  height: 2px;
-  border-radius: 2px;
-  background: darken(white, 60%);
-  bottom: 0;
-  left: 50%;
-  transform: translate(-50%, 0);
-  width: 50%;
-  transition: width 0.25s;
-}

src/components/node/NodeCommentsBlock/index.tsx

@@ -1,42 +0,0 @@
-import React, { FC } from 'react';
-import { NodeNoComments } from '~/components/node/NodeNoComments';
-import { NodeComments } from '~/components/node/NodeComments';
-import { useNodeBlocks } from '~/utils/hooks/node/useNodeBlocks';
-import { useCommentContext } from '~/utils/providers/CommentProvider';
-
-interface IProps {
-  order: 'ASC' | 'DESC';
-}
-
-const NodeCommentsBlock: FC<IProps> = () => {
-  const {
-    node,
-    user,
-    comments,
-    count,
-    lastSeenCurrent,
-    isLoadingNode,
-    isLoadingComments,
-    onLoadMoreComments,
-    onDeleteComment,
-    onShowImageModal,
-  } = useCommentContext();
-  const { inline } = useNodeBlocks(node, isLoadingNode);
-
-  return isLoadingNode || isLoadingComments || (!comments.length && !inline) ? (
-    <NodeNoComments is_loading={isLoadingComments || isLoadingNode} />
-  ) : (
-    <NodeComments
-      count={count}
-      comments={comments}
-      user={user}
-      order="DESC"
-      lastSeenCurrent={lastSeenCurrent}
-      onShowImageModal={onShowImageModal}
-      onLoadMoreComments={onLoadMoreComments}
-      onDeleteComment={onDeleteComment}
-    />
-  );
-};
-
-export { NodeCommentsBlock };