moved views to containers

src/containers/boris/BorisComments/index.tsx

@@ -0,0 +1,52 @@
+import React, { FC } from 'react';
+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 '~/containers/node/NodeComments';
+import { Footer } from '~/components/main/Footer';
+import { CommentContextProvider, useCommentContext } from '~/utils/context/CommentContextProvider';
+import { useUserContext } from '~/utils/context/UserContextProvider';
+import { useNodeContext } from '~/utils/context/NodeContextProvider';
+
+interface IProps {}
+
+const BorisComments: FC<IProps> = () => {
+  const user = useUserContext();
+  const {
+    isLoading,
+    comments,
+    onLoadMoreComments,
+    onDeleteComment,
+    onShowImageModal,
+    count,
+  } = useCommentContext();
+  const { node } = useNodeContext();
+
+  return (
+    <>
+      <Group className={styles.grid}>
+        {user.is_user && <NodeCommentForm isBefore nodeId={node.id} />}
+
+        {isLoading ? (
+          <NodeNoComments is_loading count={7} />
+        ) : (
+          <CommentContextProvider
+            comments={comments}
+            count={count}
+            onDeleteComment={onDeleteComment}
+            onLoadMoreComments={onLoadMoreComments}
+            onShowImageModal={onShowImageModal}
+            isLoading={isLoading}
+          >
+            <NodeComments order="ASC" />
+          </CommentContextProvider>
+        )}
+      </Group>
+
+      <Footer />
+    </>
+  );
+};
+
+export { BorisComments };

src/containers/boris/BorisComments/styles.module.scss

@@ -0,0 +1,18 @@
+@import "~/styles/variables.scss";
+
+.content {
+  flex: 4;
+  z-index: 2;
+  border-radius: $radius;
+  padding: $gap;
+  background: $node_bg;
+  box-shadow: inset transparentize(mix($wisegreen, white, 60%), 0.6) 0 1px;
+
+  @include desktop {
+    flex: 2.5;
+  }
+
+  @media(max-width: 1024px) {
+    flex: 2;
+  }
+}