added illustrations

src/containers/node/BorisLayout/index.tsx

@@ -4,6 +4,12 @@ import * as NODE_ACTIONS from '~/redux/node/actions';
 import { selectNode } from '~/redux/node/selectors';
 import { selectUser } from '~/redux/auth/selectors';
 import { connect } from 'react-redux';
+import { NodeComments } from '~/components/node/NodeComments';
+import styles from './styles.scss';
+import { CommentForm } from '~/components/node/CommentForm';
+import { Filler } from '~/components/containers/Filler';
+import { Group } from '~/components/containers/Group';
+import { GodRays } from '~/components/main/GodRays';
 
 const mapStateToProps = state => ({
   node: selectNode(state),
@@ -27,14 +33,26 @@ const id = 696;
 
 const BorisLayoutUnconnected: FC<IProps> = ({
   node: { is_loading, is_loading_comments, comments = [], current: node, related },
+  user: { is_user },
   nodeLoadNode,
 }) => {
   useEffect(() => {
     if (is_loading) return;
-    nodeLoadNode(id);
+    nodeLoadNode(id, 'DESC');
   }, [nodeLoadNode, id]);
 
-  return <div>{comments.length}</div>;
+  return (
+    <div className={styles.wrap}>
+      <div className={styles.cover} />
+      <div className={styles.column} />
+
+      <Group className={styles.container}>
+        {is_user && <CommentForm id={0} />}
+
+        <NodeComments comments={comments} />
+      </Group>
+    </div>
+  );
 };
 
 const BorisLayout = connect(

src/containers/node/BorisLayout/styles.scss

@@ -0,0 +1,47 @@
+.wrap {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  flex-direction: row;
+}
+
+.container {
+  margin-top: 33vh;
+  flex: 3;
+  z-index: 2;
+  padding: $gap;
+  background: $content_bg;
+  border-radius: $radius;
+}
+
+.column {
+  flex: 1;
+  background: $content_bg;
+  height: 400px;
+  position: relative;
+  z-index: 2;
+  margin-top: 33vh;
+  margin-right: $gap;
+  border-radius: $radius;
+}
+
+.content {
+  padding: $gap;
+  text-align: center;
+  font: $font_24_bold;
+  text-transform: uppercase;
+  position: relative;
+  display: none;
+}
+
+.cover {
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  // background: linear-gradient($red, transparentize($red, 1));
+  background: 50% 0% no-repeat/cover url('~/sprites/illustrate.svg');
+}

src/redux/node/actions.ts

@@ -18,8 +18,9 @@ export const nodeGotoNode = (id: number, node_type: INode['type']) => ({
   type: NODE_ACTIONS.GOTO_NODE,
 });
 
-export const nodeLoadNode = (id: number) => ({
+export const nodeLoadNode = (id: number, order?: 'ASC' | 'DESC') => ({
   id,
+  order,
   type: NODE_ACTIONS.LOAD_NODE,
 });
 

src/redux/node/api.ts

@@ -58,12 +58,14 @@ export const postNodeComment = ({
 export const getNodeComments = ({
   id,
   access,
+  order = 'ASC',
 }: {
   id: number;
   access: string;
+  order: 'ASC' | 'DESC';
 }): Promise<IResultWithStatus<{ comments: Comment[] }>> =>
   api
-    .get(API.NODE.COMMENT(id), configWithToken(access))
+    .get(API.NODE.COMMENT(id), configWithToken(access, { params: { order } }))
     .then(resultMiddleware)
     .catch(errorMiddleware);
 

src/redux/node/sagas.ts

@@ -96,7 +96,7 @@ function* onNodeGoto({ id, node_type }: ReturnType<typeof nodeGotoNode>) {
   yield put(push(URLS.NODE_URL(id)));
 }
 
-function* onNodeLoad({ id }: ReturnType<typeof nodeLoadNode>) {
+function* onNodeLoad({ id, order = 'ASC' }: ReturnType<typeof nodeLoadNode>) {
   yield put(nodeSetLoading(true));
   yield put(nodeSetLoadingComments(true));
   yield put(nodeSetCommentData(0, { ...EMPTY_COMMENT }));
@@ -123,7 +123,7 @@ function* onNodeLoad({ id }: ReturnType<typeof nodeLoadNode>) {
       data: { related },
     },
   } = yield all({
-    comments: call(reqWrapper, getNodeComments, { id }),
+    comments: call(reqWrapper, getNodeComments, { id, order }),
     related: call(reqWrapper, getNodeRelated, { id }),
   });