Draft of CommentCreate and CommentList

This commit is contained in:
Jessop Breth 2019-05-17 14:21:07 -04:00 committed by Sean Yesmunt
parent c30f0efda1
commit 86e1743388
7 changed files with 229 additions and 22 deletions

View file

@ -0,0 +1,20 @@
import { connect } from 'react-redux';
import { makeSelectClaimForUri, selectMyChannelClaims, doCommentCreate, makeSelectCommentsForUri } from 'lbry-redux';
import CommentCreate from './view';
const select = (state, props) => ({
channels: selectMyChannelClaims(state),
comments: makeSelectCommentsForUri(props.uri)(state),
claim: makeSelectClaimForUri(props.uri)(state),
});
const perform = dispatch => ({
createComment: params => dispatch(doCommentCreate(params)),
});
export default connect(
select,
perform
)(CommentCreate);

View file

@ -0,0 +1,58 @@
// @flow
import React from 'react';
import { FormField } from 'component/common/form';
import Button from 'component/button';
import ChannelSection from 'component/selectChannel';
type Props = {
comment: string,
claimId: string,
authorChannelId: string,
};
class CommentCreate extends React.PureComponent<Props> {
constructor(props: Props) {
super(props);
this.state = {
channel: 'Anonymous',
comment: '',
channelId: '',
};
(this: any).handleCommentChange = this.handleCommentChange.bind(this);
(this: any).handleChannelChange = this.handleChannelChange.bind(this);
}
handleCommentChange(event) {
this.setState({ comment: event.comment.target.value });
}
handleChannelChange(channel) {
this.setState({ channel: channel });
}
render() {
console.log(this.state);
return (
<section className="card card--section">
<div className="card__content">
<FormField
type="textarea"
name="content_description"
label={__('Text')}
placeholder={__('Your comment')}
value={this.state.comment}
onChange={text => this.handleCommentChange({ comment: text })}
/>
</div>
<div className="card__actions--between">
<div className="card__content">
<ChannelSection channel={this.state.channel} onChannelChange={this.handleChannelChange} />
</div>
<Button button="primary" type="submit" label={__('Post')} />
</div>
</section>
);
}
}
export default CommentCreate;

View file

@ -0,0 +1,16 @@
import { connect } from 'react-redux';
import { makeSelectCommentsForUri, makeSelectClaimForUri, doCommentList } from 'lbry-redux';
import CommentsList from './view';
const select = (state, props) => ({
comments: makeSelectCommentsForUri(props.uri)(state),
claim: makeSelectClaimForUri(props.uri)(state),
});
const perform = dispatch => ({
fetchList: uri => dispatch(doCommentList(uri)),
});
export default connect(
select,
perform
)(CommentsList);

View file

@ -0,0 +1,124 @@
// @flow
import * as React from 'react';
type CommentListProps = {
comments: {},
fetchList: string => void,
uri: string,
isLoading: boolean,
};
type CommentProps = {
commentId: string,
claimId: string,
author: string,
message: string,
timePosted: number,
};
class CommentList extends React.PureComponent<CommentListProps> {
componentDidMount() {
this.fetchComments(this.props);
}
fetchComments = (props: Props) => {
const { fetchList, uri } = props;
fetchList(uri);
};
render() {
const { comments } = this.props;
if (!comments) {
return null;
}
return (
<div>
<ul>
{comments['comments'].map(comment => {
console.log(comment.message);
return (
<li key={comment.author + comment.comment_id}>
<Comment
commentId={comment.comment_id}
claimId={comment.claim_id}
author={comment.author}
message={comment.message}
timePosted={comment.time_posted}
/>
</li>
);
})}
</ul>
</div>
);
}
}
class Comment extends React.PureComponent<CommentProps> {
render() {
return (
<span className="button button--no-style navigation__link card__message">
<div className="media__info-text">
<div className="card__actions--between">
<div>Author: {this.props.author}</div>
<div>Date: {this.props.timePosted}</div>
</div>
<div className="media__subtitle__channel">Message: {this.props.message}</div>
<div className="card__actions--between">
<button className={'button button--primary'}>Reply</button>
<div>
<button className={'button button--primary'}>Up</button>
<button className={'button button--primary'}>Down</button>
</div>
</div>
</div>
</span>
);
}
}
export default CommentList;
// export default function CommentsList(props) {
// const { uri } = props;
// const { claimId } = parseURI(uri);
//
// // We have local "state" which is a list of comments
// // And we have "setComments" which is a way to update the local state with new comments
// // useState sets that up and says the initial value for "comments" is 'undefined'
// // const [comments, setComments] = useState(undefined);
// //
// //
// // // useEffect is saying, when the properties that are passed in to this function change,
// // // re-run this function, or re-run this "effect" that will update the local state
// // useEffect(() => {
// // Lbry.comment_list({ claim_id: claimId })
// // .then(result => setComments(result))
// // .catch(error => console.error(error));
// // // Lbry.commentsList(claimID)
// // // .then(comments => setComments(comments))
// // // .catch(error => console.error(error))
// // }, [claimId]);
//
// // If there are no comments set yet, just return null
// if (!comments) {
// return null;
// }
//
// // If we have comments, we want to return a piece of UI
// // The same way we would return an array, we can return an "array" of <li> elements with the comment data inside
// return (
// <ul className="navigation__links">
// {comments.comments.map(comment => {
// return (
// <li>
// <Comment
// commentId={comment.comment_id}
// claimId={comment.claim_id}
// author={comment.author}
// message={comment.message}
// timePosted={comment.time_posted}
// />
// </li>
// );
// })}
// </ul>
// );
// }

View file

@ -31,14 +31,14 @@ class FileDetails extends PureComponent<Props> {
Lbryio.call('user_tag', 'edit', { add: 'comments-waitlist' });
showSnackBar(
<span>
{__('Thanks! Comments are coming soon')}
{__('Your Comment Has Been Posted')}
<sup>TM</sup>
</span>
);
}
render() {
const { claim, contentType, fileInfo, metadata, openFolder, hasClickedComment, user } = this.props;
const { claim, contentType, fileInfo, metadata, openFolder } = this.props;
if (!claim || !metadata) {
return (
@ -104,26 +104,6 @@ class FileDetails extends PureComponent<Props> {
)}
</div>
</Expandable>
<div className="media__info-title">Comments</div>
<div className="card__actions--center">
<Button
data-id="add-comment"
disabled={hasClickedComment}
button="primary"
label={__('Want to comment?')}
onClick={this.handleCommentClick}
/>
</div>
<br />
{hasClickedComment && (
<p className="media__info-text media__info-text--center">
{user
? __('Your support has been added. You will be notified when comments are available.')
: __('Your support has been added. Comments are coming soon.')}
</p>
)}
</Fragment>
);
}

View file

@ -20,6 +20,8 @@ import classnames from 'classnames';
import getMediaType from 'util/get-media-type';
import RecommendedContent from 'component/recommendedContent';
import ClaimTags from 'component/claimTags';
import CommentsList from 'component/commentsList';
import CommentCreate from 'component/commentCreate';
type Props = {
claim: StreamClaim,
@ -285,6 +287,11 @@ class FilePage extends React.Component<Props> {
</div>
<div className="media__info--large">
<FileDetails uri={uri} />
<header className="card__header">
<h2 className="card__header">Comments</h2>
</header>
<CommentCreate comment={''} uri={uri} />
<CommentsList uri={uri} />
</div>
</div>
<div className="grid-area--related">

View file

@ -7,6 +7,7 @@ import {
walletReducer,
notificationsReducer,
tagsReducerBuilder,
commentReducer,
} from 'lbry-redux';
import { userReducer, rewardsReducer, costInfoReducer, blacklistReducer, homepageReducer, statsReducer } from 'lbryinc';
import appReducer from 'redux/reducers/app';
@ -34,6 +35,7 @@ export default history =>
availability: availabilityReducer,
blacklist: blacklistReducer,
claims: claimsReducer,
comments: commentReducer,
content: contentReducer,
costInfo: costInfoReducer,
fileInfo: fileInfoReducer,