moved views to containers

src/containers/node/NodeComments/index.tsx

@@ -0,0 +1,64 @@
+import React, { FC, memo, useMemo } from 'react';
+
+import styles from './styles.module.scss';
+import { ICommentGroup } from '~/redux/types';
+import { canEditComment } from '~/utils/node';
+import { COMMENTS_DISPLAY } from '~/redux/node/constants';
+import { plural } from '~/utils/dom';
+import { useGrouppedComments } from '~/utils/hooks/node/useGrouppedComments';
+import { useCommentContext } from '~/utils/context/CommentContextProvider';
+import { Comment } from '~/components/comment/Comment';
+import { useUserContext } from '~/utils/context/UserContextProvider';
+
+interface IProps {
+  order: 'ASC' | 'DESC';
+}
+
+const NodeComments: FC<IProps> = memo(({ order }) => {
+  const user = useUserContext();
+  const {
+    comments,
+    count,
+    lastSeenCurrent,
+    onLoadMoreComments,
+    onDeleteComment,
+    onShowImageModal,
+  } = useCommentContext();
+
+  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/containers/node/NodeComments/styles.module.scss

@@ -0,0 +1,50 @@
+@import "../../../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;
+}