Draft of CommentCreate and CommentList

src/ui/component/commentCreate/index.js

@@ -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);

src/ui/component/commentCreate/view.jsx

@@ -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;

src/ui/component/commentsList/index.js

@@ -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);

src/ui/component/commentsList/view.jsx

@@ -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>
+//   );
+// }

src/ui/component/fileDetails/view.jsx

@@ -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>
     );
   }

src/ui/page/file/view.jsx

@@ -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">

src/ui/reducers.js

@@ -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,