comment form

src/components/node/Comment/index.tsx

@@ -1,31 +1,17 @@
 import React, { FC, HTMLAttributes } from 'react';
-import { Card } from '~/components/containers/Card';
-import * as styles from './styles.scss';
-
-import classNames = require('classnames');
+import { CommentWrapper } from '~/components/containers/CommentWrapper';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   is_empty?: boolean;
   is_loading?: boolean;
-}
+  photo?: string;
+  comment?: any;
+};
 
-const Comment: FC<IProps> = ({
-  is_empty,
-  is_loading,
-  className,
-  ...props
-}) => (
-  <Card
-    className={classNames(styles.wrap, className, { is_empty, is_loading })}
-    seamless
-    {...props}
-  >
-    <div className={styles.thumb}>
-      <div className={styles.thumb_image} />
-    </div>
-
-    <div className={styles.text} />
-  </Card>
+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>
+  </CommentWrapper>
 );
 
 export { Comment };

src/components/node/Comment/styles.scss

@@ -1,27 +0,0 @@
-.wrap {
-  background: $comment_bg;
-  min-height: 64px;
-  display: flex;
-  box-shadow: $comment_shadow;
-
-  &:global(.is_empty) {
-    opacity: 0.5;
-  }
-}
-
-.text {
-  padding: $gap;
-  flex: 1;
-}
-
-.thumb {
-  flex: 0 0 64px;
-  background: transparentize(black, 0.9);
-  border-radius: $panel_radius 0 0 $panel_radius;
-}
-
-.thumb_image {
-  height: 64px;
-  background: transparentize(white, 0.97);
-  border-radius: $panel_radius 0 0 $panel_radius;
-}

src/components/node/CommentForm/index.tsx

@@ -0,0 +1,49 @@
+import React, { FC, useCallback, useState, ChangeEvent, ChangeEventHandler } 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';
+
+interface IProps {
+  id: INode['id'];
+}
+
+const CommentForm: FC<IProps> = ({ id }) => {
+  const [data, setData] = useState({ text: '' });
+
+  const onInput = useCallback<InputHandler>(
+    text => {
+      setData(assocPath(['text'], text, data));
+    },
+    [setData, data]
+  );
+
+  const onSubmit = useCallback(
+    event => {
+      event.preventDefault();
+      console.log({ data });
+    },
+    [data]
+  );
+
+  return (
+    <CommentWrapper>
+      <form onSubmit={onSubmit}>
+        <div className={styles.input}>
+          <Textarea value={data.text} handler={onInput} />
+        </div>
+        <div className={styles.buttons}>
+          <Filler />
+          <Button size="mini" grey iconRight="enter">
+            Сказать
+          </Button>
+        </div>
+      </form>
+    </CommentWrapper>
+  );
+};
+
+export { CommentForm };

src/components/node/CommentForm/styles.scss

@@ -0,0 +1,19 @@
+.wrap {
+  display: flex;
+  flex-direction: column;
+}
+
+.input {
+  flex: 1;
+  padding: $gap / 2;
+}
+
+.buttons {
+  display: flex;
+  flex-direction: row;
+  background: transparentize(black, 0.8);
+  padding: $gap / 2;
+  border-radius: 0 0 $radius $radius;
+
+  @include outer_shadow();
+}

src/components/node/NodeComments/index.tsx

@@ -2,17 +2,19 @@ import React, { FC } from 'react';
 import range from 'ramda/es/range';
 import { Comment } from '../Comment';
 import { INode } from '~/redux/types';
+import { CommentForm } from '../CommentForm';
+import { Group } from '~/components/containers/Group';
 
 interface IProps {
   comments?: any;
 }
 
 const NodeComments: FC<IProps> = ({ comments }) => (
-  <div>
+  <Group>
     {range(1, 6).map(el => (
       <Comment key={el} />
     ))}
-  </div>
+  </Group>
 );
 
 export { NodeComments };