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;

src/redux/node/actions.ts

@@ -33,9 +33,7 @@ export const nodeSetCurrent = (current: INodeState['current']) => ({
   type: NODE_ACTIONS.SET_CURRENT,
 });
 
-export const nodePostComment = (data: IComment, id: INode['id']) => ({
-  data,
-  id,
+export const nodePostComment = () => ({
   type: NODE_ACTIONS.POST_COMMENT,
 });
 
@@ -48,3 +46,8 @@ export const nodeSetComments = (comments: IComment[]) => ({
   comments,
   type: NODE_ACTIONS.SET_COMMENTS,
 });
+
+export const nodeSetCommentData = (comment_data: IComment) => ({
+  comment_data,
+  type: NODE_ACTIONS.SET_COMMENT_DATA,
+});

src/redux/node/constants.ts

@@ -12,6 +12,8 @@ export const NODE_ACTIONS = {
   SET_LOADING_COMMENTS: `${prefix}SET_LOADING_COMMENTS`,
   SET_SENDING_COMMENT: `${prefix}SET_SENDING_COMMENT`,
   SET_CURRENT: `${prefix}SET_CURRENT`,
+  SET_COMMENT_DATA: `${prefix}SET_COMMENT_DATA`,
+
   POST_COMMENT: `${prefix}POST_COMMENT`,
   SET_COMMENTS: `${prefix}SET_COMMENTS`,
 };

src/redux/node/handlers.ts

@@ -7,6 +7,7 @@ import {
   nodeSetLoadingComments,
   nodeSetSendingComment,
   nodeSetComments,
+  nodeSetCommentData,
 } from './actions';
 import { INodeState } from './reducer';
 
@@ -32,6 +33,11 @@ const setSendingComment = (
 const setComments = (state: INodeState, { comments }: ReturnType<typeof nodeSetComments>) =>
   assocPath(['comments'], comments, state);
 
+const setCommentData = (
+  state: INodeState,
+  { comment_data }: ReturnType<typeof nodeSetCommentData>
+) => assocPath(['comment_data'], comment_data, state);
+
 export const NODE_HANDLERS = {
   [NODE_ACTIONS.SAVE]: setSaveErrors,
   [NODE_ACTIONS.SET_LOADING]: setLoading,
@@ -39,4 +45,5 @@ export const NODE_HANDLERS = {
   [NODE_ACTIONS.SET_CURRENT]: setCurrent,
   [NODE_ACTIONS.SET_SENDING_COMMENT]: setSendingComment,
   [NODE_ACTIONS.SET_COMMENTS]: setComments,
+  [NODE_ACTIONS.SET_COMMENT_DATA]: setCommentData,
 };

src/redux/node/reducer.ts

@@ -1,12 +1,13 @@
 import { createReducer } from '~/utils/reducer';
 import { INode, IComment } from '../types';
-import { EMPTY_NODE } from './constants';
+import { EMPTY_NODE, EMPTY_COMMENT } from './constants';
 import { NODE_HANDLERS } from './handlers';
 
 export type INodeState = Readonly<{
   editor: INode;
   current: INode;
   comments: IComment[];
+  comment_data: IComment;
 
   error: string;
   errors: Record<string, string>;
@@ -24,6 +25,7 @@ const INITIAL_STATE: INodeState = {
     files: [],
   },
   current: { ...EMPTY_NODE },
+  comment_data: { ...EMPTY_COMMENT },
   comments: [],
 
   is_loading: false,

src/redux/node/sagas.ts

@@ -1,7 +1,7 @@
 import { takeLatest, call, put, select, delay } from 'redux-saga/effects';
 import { push } from 'connected-react-router';
 
-import { NODE_ACTIONS, EMPTY_NODE } from './constants';
+import { NODE_ACTIONS, EMPTY_NODE, EMPTY_COMMENT } from './constants';
 import {
   nodeSave,
   nodeSetSaveErrors,
@@ -12,6 +12,7 @@ import {
   nodePostComment,
   nodeSetSendingComment,
   nodeSetComments,
+  nodeSetCommentData,
 } from './actions';
 import { postNode, getNode, postNodeComment, getNodeComments } from './api';
 import { reqWrapper } from '../auth/sagas';
@@ -76,12 +77,14 @@ function* onNodeLoad({ id, node_type }: ReturnType<typeof nodeLoadNode>) {
   return;
 }
 
-function* onPostComment({ data, id }: ReturnType<typeof nodePostComment>) {
+function* onPostComment() {
+  const { current, comment_data } = yield select(selectNode);
+
   yield put(nodeSetSendingComment(true));
   const {
     data: { comment },
     error,
-  } = yield call(reqWrapper, postNodeComment, { data, id });
+  } = yield call(reqWrapper, postNodeComment, { data: comment_data, id: current.id });
   yield put(nodeSetSendingComment(false));
 
   if (error || !comment) {
@@ -92,7 +95,8 @@ function* onPostComment({ data, id }: ReturnType<typeof nodePostComment>) {
 
   const { comments } = yield select(selectNode);
 
-  yield put(nodeSetComments([...comments, comment]));
+  yield put(nodeSetComments([comment, ...comments]));
+  yield put(nodeSetCommentData({ ...EMPTY_COMMENT }));
 }
 
 export default function* nodeSaga() {