moved NodeBottomBlock to views

src/views/node/NodeBottomBlock/index.tsx

@@ -0,0 +1,70 @@
+import React, { FC } from 'react';
+import { NodeDeletedBadge } from '~/components/node/NodeDeletedBadge';
+import { Group } from '~/components/containers/Group';
+import { Padder } from '~/components/containers/Padder';
+import { NodeCommentForm } from '~/components/node/NodeCommentForm';
+import { NodeRelatedBlock } from '~/components/node/NodeRelatedBlock';
+import { useNodeBlocks } from '~/utils/hooks/node/useNodeBlocks';
+import { NodeTagsBlock } from '~/components/node/NodeTagsBlock';
+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 {
+  commentsOrder: 'ASC' | 'DESC';
+}
+
+const NodeBottomBlock: FC<IProps> = ({ commentsOrder }) => {
+  const { is_user: isUser } = useUserContext();
+  const { node, related, isLoading } = useNodeContext();
+  const { comments, isLoadingComments } = useCommentContext();
+  const { inline } = useNodeBlocks(node, isLoading);
+
+  if (node.deleted_at) {
+    return <NodeDeletedBadge />;
+  }
+
+  return (
+    <Group>
+      <Padder>
+        <Group horizontal className={styles.content}>
+          <Group className={styles.comments}>
+            {inline && <div className={styles.inline}>{inline}</div>}
+
+            {isLoading || isLoadingComments || (!comments.length && !inline) ? (
+              <NodeNoComments is_loading={isLoadingComments || isLoading} />
+            ) : (
+              <NodeComments order={commentsOrder} />
+            )}
+
+            {isUser && !isLoading && <NodeCommentForm nodeId={node.id} />}
+          </Group>
+
+          <div className={styles.panel}>
+            <StickyBox className={styles.sticky} offsetTop={72}>
+              <div className={styles.left}>
+                <div className={styles.left_item}>
+                  <NodeAuthorBlock user={node?.user} />
+                </div>
+
+                <div className={styles.left_item}>
+                  <NodeTagsBlock />
+                </div>
+                <div className={styles.left_item}>
+                  <NodeRelatedBlock isLoading={isLoading} node={node} related={related} />
+                </div>
+              </div>
+            </StickyBox>
+          </div>
+        </Group>
+      </Padder>
+    </Group>
+  );
+};
+
+export { NodeBottomBlock };

src/views/node/NodeBottomBlock/styles.module.scss

@@ -0,0 +1,56 @@
+@import "~/styles/variables.scss";
+
+.sticky {
+  width: 100%;
+}
+
+.content {
+  align-items: stretch !important;
+  @include vertical_at_tablet;
+}
+
+.comments {
+  flex: 3 1;
+  min-width: 0;
+  display: flex;
+  align-items: stretch;
+  justify-content: flex-start;
+  flex-direction: column;
+
+  @media (max-width: 1024px) {
+    flex: 2 1;
+  }
+}
+
+
+.panel {
+  flex: 1 3;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  min-width: 0;
+  position: relative;
+  z-index: 10;
+
+  @media (max-width: 1024px) {
+    padding-left: 0;
+    padding-top: $comment_height / 2;
+    flex: 1 2;
+  }
+}
+
+.buttons {
+  background: $node_buttons_bg;
+  flex: 1;
+  border-radius: $panel_radius;
+  box-shadow: $comment_shadow;
+}
+
+.left {
+  flex: 1;
+  min-width: 0;
+}
+
+.left_item {
+  padding-bottom: $gap * 2;
+}