adding comments

src/components/node/Comment/index.tsx

@@ -1,16 +1,18 @@
 import React, { FC, HTMLAttributes } from 'react';
 import { CommentWrapper } from '~/components/containers/CommentWrapper';
+import { IComment } from '~/redux/types';
+import * as styles from './styles.scss';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   is_empty?: boolean;
   is_loading?: boolean;
   photo?: string;
-  comment?: any;
+  comment?: IComment;
 };
 
 const Comment: FC<IProps> = ({ comment, is_empty, is_loading, className, photo, ...props }) => (
   <CommentWrapper is_empty={is_empty} is_loading={is_loading} photo={photo} {...props}>
-    <div>Something!</div>
+    {comment.text && <div className={styles.text}>{comment.text}</div>}
   </CommentWrapper>
 );
 

src/components/node/Comment/styles.scss

@@ -0,0 +1,3 @@
+.text {
+  padding: $gap / 2;
+}

src/components/node/CommentForm/index.tsx

@@ -1,18 +1,27 @@
-import React, { FC, useCallback, useState, ChangeEvent, ChangeEventHandler } from 'react';
+import React, { FC, useCallback, useState } from 'react';
 import { Textarea } from '~/components/input/Textarea';
 import { CommentWrapper } from '~/components/containers/CommentWrapper';
 import * as styles from './styles.scss';
 import { Filler } from '~/components/containers/Filler';
 import { Button } from '~/components/input/Button';
 import assocPath from 'ramda/es/assocPath';
-import { InputHandler, INode } from '~/redux/types';
+import { InputHandler, INode, IComment } from '~/redux/types';
+import { connect } from 'react-redux';
+import * as NODE_ACTIONS from '~/redux/node/actions';
+import { EMPTY_COMMENT } from '~/redux/node/constants';
 
-interface IProps {
-  id: INode['id'];
-}
+const mapStateToProps = () => ({});
+const mapDispatchToProps = {
+  nodePostComment: NODE_ACTIONS.nodePostComment,
+};
 
-const CommentForm: FC<IProps> = ({ id }) => {
-  const [data, setData] = useState({ text: '' });
+type IProps = ReturnType<typeof mapStateToProps> &
+  typeof mapDispatchToProps & {
+    id: INode['id'];
+  };
+
+const CommentFormUnconnected: FC<IProps> = ({ nodePostComment, id }) => {
+  const [data, setData] = useState<IComment>({ ...EMPTY_COMMENT });
 
   const onInput = useCallback<InputHandler>(
     text => {
@@ -24,9 +33,9 @@ const CommentForm: FC<IProps> = ({ id }) => {
   const onSubmit = useCallback(
     event => {
       event.preventDefault();
-      console.log({ data });
+      nodePostComment(data, id);
     },
-    [data]
+    [data, nodePostComment, id]
   );
 
   return (
@@ -46,4 +55,9 @@ const CommentForm: FC<IProps> = ({ id }) => {
   );
 };
 
-export { CommentForm };
+const CommentForm = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CommentFormUnconnected);
+
+export { CommentForm, CommentFormUnconnected };

src/components/node/NodeComments/index.tsx

@@ -4,17 +4,21 @@ import { Comment } from '../Comment';
 import { INode } from '~/redux/types';
 import { CommentForm } from '../CommentForm';
 import { Group } from '~/components/containers/Group';
+import * as styles from './styles.scss';
+import { Filler } from '~/components/containers/Filler';
 
 interface IProps {
   comments?: any;
 }
 
 const NodeComments: FC<IProps> = ({ comments }) => (
-  <Group>
-    {range(1, 6).map(el => (
-      <Comment key={el} />
+  <div className={styles.wrap}>
+    <Filler />
+
+    {comments.map(comment => (
+      <Comment key={comment.id} comment={comment} />
     ))}
-  </Group>
+  </div>
 );
 
 export { NodeComments };

src/components/node/NodeComments/styles.scss

@@ -0,0 +1,16 @@
+.wrap {
+  display: flex;
+  flex-direction: column-reverse !important;
+
+  & > div {
+    margin: ($gap / 2) 0;
+
+    &:last-child {
+      margin-top: 0;
+    }
+
+    &:first-child {
+      margin-bottom: 0;
+    }
+  }
+}