mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-26 13:26:40 +07:00
comment rendering
This commit is contained in:
parent
398f44e232
commit
9531edcd19
10 changed files with 83 additions and 37 deletions
|
@ -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 />
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue