Draft of CommentCreate and CommentList
This commit is contained in:
parent
c30f0efda1
commit
86e1743388
7 changed files with 229 additions and 22 deletions
20
src/ui/component/commentCreate/index.js
Normal file
20
src/ui/component/commentCreate/index.js
Normal 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);
|
58
src/ui/component/commentCreate/view.jsx
Normal file
58
src/ui/component/commentCreate/view.jsx
Normal 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;
|
16
src/ui/component/commentsList/index.js
Normal file
16
src/ui/component/commentsList/index.js
Normal 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);
|
124
src/ui/component/commentsList/view.jsx
Normal file
124
src/ui/component/commentsList/view.jsx
Normal 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>
|
||||
// );
|
||||
// }
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in a new issue