comment rendering

src/components/node/CommentForm/index.tsx

@@ -1,18 +1,20 @@
-import React, { FC, useCallback, useState } from 'react';
+import React, { FC, useCallback, useEffect } 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, IComment } from '~/redux/types';
+import { InputHandler, INode } from '~/redux/types';
 import { connect } from 'react-redux';
 import * as NODE_ACTIONS from '~/redux/node/actions';
-import { EMPTY_COMMENT } from '~/redux/node/constants';
+import { store } from '~/redux/store';
+import { selectNode } from '~/redux/node/selectors';
 
-const mapStateToProps = () => ({});
+const mapStateToProps = selectNode;
 const mapDispatchToProps = {
   nodePostComment: NODE_ACTIONS.nodePostComment,
+  nodeSetCommentData: NODE_ACTIONS.nodeSetCommentData,
 };
 
 type IProps = ReturnType<typeof mapStateToProps> &
@@ -20,29 +22,38 @@ type IProps = ReturnType<typeof mapStateToProps> &
     id: INode['id'];
   };
 
-const CommentFormUnconnected: FC<IProps> = ({ nodePostComment, id }) => {
-  const [data, setData] = useState<IComment>({ ...EMPTY_COMMENT });
+const CommentFormUnconnected: FC<IProps> = ({
+  nodePostComment,
+  nodeSetCommentData,
+  comment_data,
+  id,
+}) => {
+  // const [data, setData] = useState<IComment>({ ...EMPTY_COMMENT });
 
   const onInput = useCallback<InputHandler>(
     text => {
-      setData(assocPath(['text'], text, data));
+      nodeSetCommentData(assocPath(['text'], text, comment_data));
     },
-    [setData, data]
+    [nodeSetCommentData, comment_data]
   );
 
   const onSubmit = useCallback(
     event => {
       event.preventDefault();
-      nodePostComment(data, id);
+      nodePostComment();
     },
-    [data, nodePostComment, id]
+    [nodePostComment]
   );
 
+  useEffect(() => {
+    store.subscribe(console.log);
+  }, []);
+
   return (
     <CommentWrapper>
       <form onSubmit={onSubmit}>
         <div className={styles.input}>
-          <Textarea value={data.text} handler={onInput} />
+          <Textarea value={comment_data.text} handler={onInput} />
         </div>
         <div className={styles.buttons}>
           <Filler />

src/components/node/NodeComments/index.tsx

@@ -12,13 +12,13 @@ interface IProps {
 }
 
 const NodeComments: FC<IProps> = ({ comments }) => (
-  <div className={styles.wrap}>
-    <Filler />
-
+  <Group className={styles.wrap}>
     {comments.map(comment => (
       <Comment key={comment.id} comment={comment} />
     ))}
-  </div>
+
+    <Filler />
+  </Group>
 );
 
 export { NodeComments };

src/components/node/NodeComments/styles.scss

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

src/components/node/NodeImageBlock/index.tsx

@@ -21,6 +21,7 @@ interface IProps {
 }
 
 const NodeImageBlock: FC<IProps> = ({ node, is_loading }) => {
+  const [is_animated, setIsAnimated] = useState(false);
   const [current, setCurrent] = useState(0);
   const [height, setHeight] = useState(320);
   const [loaded, setLoaded] = useState<Record<number, boolean>>({});
@@ -48,8 +49,14 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading }) => {
     setHeight(element_height);
   }, [refs, current, loaded]);
 
+  useEffect(() => {
+    const timer = setTimeout(() => setIsAnimated(true), 250);
+
+    return () => clearTimeout(timer);
+  }, []);
+
   return (
-    <div className={classNames(styles.wrap, { is_loading })}>
+    <div className={classNames(styles.wrap, { is_loading, is_animated })}>
       <div>
         <ImageSwitcher
           total={images.length}

src/components/node/NodeImageBlock/styles.scss

@@ -1,3 +1,15 @@
+.wrap {
+  &:global(.is_animated) {
+    .image_container {
+      transition: height 0.5s;
+    }
+
+    .image_wrap {
+      transition: opacity 0.5s;
+    }
+  }
+}
+
 .image_container {
   width: 100%;
   background: $node_image_bg;
@@ -7,7 +19,6 @@
   justify-content: center;
   position: relative;
   overflow: hidden;
-  transition: height 0.5s;
   user-select: none;
 
   .image {
@@ -27,7 +38,6 @@
   pointer-events: none;
   touch-action: none;
   z-index: 1;
-  transition: opacity 0.5s;
   display: flex;
   align-items: center;
   justify-content: center;