flat comments

src/ui/component/commentCreate/index.js

@@ -1,15 +1,14 @@
 import { connect } from 'react-redux';
 
-import { doCommentCreate, makeSelectClaimForUri, selectMyActiveChannelUri } from 'lbry-redux';
-import CommentCreate from './view';
+import { doCommentCreate, makeSelectClaimForUri } from 'lbry-redux';
+import { CommentCreate } from './view';
 
 const select = (state, props) => ({
   claim: makeSelectClaimForUri(props.uri)(state),
-  channelUri: selectMyActiveChannelUri(state),
 });
 
 const perform = dispatch => ({
-  createComment: params => dispatch(doCommentCreate(params)),
+  createComment: (comment, claimId, channel) => dispatch(doCommentCreate(comment, claimId, channel)),
 });
 
 export default connect(

src/ui/component/commentCreate/view.jsx

@@ -3,91 +3,82 @@ import React from 'react';
 import { FormField, Form } from 'component/common/form';
 import Button from 'component/button';
 import ChannelSection from 'component/selectChannel';
-import { parseURI } from 'lbry-redux';
+import { COMMENT_ACKNOWLEDGED, COMMENT_ACKNOWLEDGED_TRUE } from 'constants/settings';
 import { usePersistedState } from 'util/use-persisted-state';
 
 // props:
 type Props = {
   uri: string,
-  channelUri: string,
-  createComment: params => {},
+  claim: StreamClaim,
+  createComment: (string, string, string) => void,
 };
 
-class CommentCreate extends React.PureComponent<Props> {
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      message: '',
-    };
-    // set state or props for comment form
-    (this: any).handleCommentChange = this.handleCommentChange.bind(this);
-    (this: any).handleChannelChange = this.handleChannelChange.bind(this);
-    (this: any).handleSubmit = this.handleSubmit.bind(this);
-  }
-
-  handleCommentChange(event) {
-    this.setState({ message: event.target.value });
-  }
-
-  handleChannelChange(channelUri) {
-    this.setState({ channelUri: channelUri });
-  }
-
-  handleSubmit() {
-    // const { createComment, claim, channelUri } = this.props;
-    const { channelUri, claim } = this.props; // eslint-disable-line react/prop-types
-    console.log('claim', claim);
-
+export function CommentCreate(props: Props) {
+  const { createComment, claim } = props;
   const { claim_id: claimId } = claim;
-    const { message } = this.state;
-    let cmt = { message, channelId: parseURI(channelUri).claimId, claimId };
+  const [commentValue, setCommentValue] = usePersistedState(`comment-${claimId}`, '');
+  const [commentAck, setCommentAck] = usePersistedState(COMMENT_ACKNOWLEDGED, 'no');
+  const [channel, setChannel] = usePersistedState('COMMENT_CHANNEL', 'anonymous');
 
-    console.log('CMT', cmt);
-    console.log('PURI', claimId);
-    console.log('PURI', parseURI(channelUri));
+  function handleCommentChange(event) {
+    setCommentValue(event.target.value);
   }
 
-  render() {
-    const { channelUri } = this.props;
+  function handleChannelChange(channel) {
+    setChannel(channel);
+  }
+
+  function handleCommentAck(event) {
+    setCommentAck(COMMENT_ACKNOWLEDGED_TRUE);
+  }
+  function handleSubmit() {
+    if (channel !== 'new' && commentValue.length) createComment(commentValue, claimId, channel);
+    setCommentValue('');
+  }
 
   return (
-      <section className="card card--section">
-        {!acksComments && (
     <React.Fragment>
-            <div className="media__title">
-              <TruncatedText text={channelName || uri} lines={1} />
+      {commentAck !== COMMENT_ACKNOWLEDGED_TRUE && (
+        <section className="card card--section">
+          <div className="card__content">
+            <div className="media__title">About comments..</div>
           </div>
-            <div className="media__subtitle">
-              {totalItems > 0 && (
-                <span>
-                  {totalItems} {totalItems === 1 ? 'publish' : 'publishes'}
-                </span>
-              )}
-              {!isResolvingUri && !totalItems && <span>This is an empty channel.</span>}
+          <div className="card__content">
+            <div className="media__subtitle">Seriously, don&apos;t comment.</div>
           </div>
-          </React.Fragment>
+          <div className="card__content">
+            <Button button="primary" onClick={handleCommentAck} label={__('Got it!')} />
+          </div>
+        </section>
       )}
-        <Form onSubmit={this.handleSubmit}>
+      {commentAck === COMMENT_ACKNOWLEDGED_TRUE && (
+        <section className="card card--section">
+          <Form onSubmit={handleSubmit}>
+            <div className="card__content">
+              <ChannelSection channel={channel} onChannelChange={handleChannelChange} />
+            </div>
             <div className="card__content">
               <FormField
+                disabled={channel === 'new'}
                 type="textarea"
                 name="content_description"
                 label={__('Text')}
                 placeholder={__('Your comment')}
-              value={this.state.message}
-              onChange={this.handleCommentChange}
+                value={commentValue}
+                onChange={handleCommentChange}
               />
             </div>
-          <div className="card__actions--between">
             <div className="card__content">
-              <ChannelSection channel={channelUri} />
-            </div>
-            <Button button="primary" type="submit" label={__('Post')} />
+              <Button
+                button="primary"
+                disabled={channel === 'new' || !commentValue.length}
+                type="submit"
+                label={__('Post')}
+              />
             </div>
           </Form>
         </section>
+      )}
+    </React.Fragment>
   );
 }
-}
-
-export default CommentCreate;

src/ui/component/commentsList/view.jsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import relativeDate from 'tiny-relative-date';
 
 type CommentListProps = {
-  comments: {},
+  comments: Array<any>,
   fetchList: string => void,
   uri: string,
   isLoading: boolean,
@@ -23,7 +23,7 @@ class CommentList extends React.PureComponent<CommentListProps> {
     this.fetchComments(this.props);
   }
 
-  fetchComments = (props: Props) => {
+  fetchComments = (props: CommentListProps) => {
     const { fetchList, uri } = props;
     fetchList(uri);
   };
@@ -36,22 +36,23 @@ class CommentList extends React.PureComponent<CommentListProps> {
     }
 
     return (
+      <section>
         <ul className="comments">
-        {comments['comments'].map(comment => {
-          console.log(comment.message);
+          {comments.map(comment => {
             return (
               <Comment
-              author={comment.author}
-              claimId={comment.claim_id}
+                author={comment.channel_name}
+                claimId={comment.channel_id}
                 commentId={comment.comment_id}
-              key={comment.author + comment.comment_id}
-              message={comment.message}
-              parentId={comment.parent_id}
-              timePosted={comment.time_posted}
+                key={comment.channel_id + comment.comment_id}
+                message={comment.comment}
+                parentId={comment.parent_id || null}
+                timePosted={comment.timestamp * 1000}
               />
             );
           })}
         </ul>
+      </section>
     );
   }
 }
@@ -61,20 +62,22 @@ class Comment extends React.PureComponent<CommentProps> {
     return (
       <li className={this.props.parentId ? 'comment reply' : 'comment'}>
         <div className="comment__meta card__actions--between">
-          <strong>{this.props.author}</strong>
+          {this.props.author && <strong>{this.props.author}</strong>}
+          {!this.props.author && <strong>Anonymous</strong>}
+
           <time dateTime={this.props.timePosted}>{relativeDate(this.props.timePosted)}</time>
         </div>
 
         <div className="comment__content">{this.props.message}</div>
+        {/* The following is for adding threaded replies, upvoting and downvoting */}
+        {/* <div className="comment__actions card__actions--between"> */}
+        {/*  <button className={'button button--primary'}>Reply</button> */}
 
-        <div className="comment__actions card__actions--between">
-          <button className={'button button--primary'}>Reply</button>
-
-          <span className="comment__actions-wrap">
-            <button className="comment__action upvote">Up</button>
-            <button className="comment__action downvote">Down</button>
-          </span>
-        </div>
+        {/*  <span className="comment__actions-wrap"> */}
+        {/*    <button className="comment__action upvote">Up</button> */}
+        {/*    <button className="comment__action downvote">Down</button> */}
+        {/*  </span> */}
+        {/* </div> */}
       </li>
     );
   }

src/ui/component/fileViewer/view.jsx

@@ -76,7 +76,7 @@ class FileViewer extends React.PureComponent<Props> {
     }
 
     this.handleAutoplay(this.props);
-    window.addEventListener('keydown', this.handleKeyDown);
+    // window.addEventListener('keydown', this.handleKeyDown);
   }
 
   componentDidUpdate(prev: Props) {

src/ui/component/publishForm/view.jsx

@@ -331,7 +331,6 @@ class PublishForm extends React.PureComponent<Props> {
 
     const shortUri = buildURI({ contentName: name });
 
-    console.log('URI', uri);
     return (
       <React.Fragment>
         {IS_WEB && <UnsupportedOnWeb />}

src/ui/component/selectChannel/index.js

@@ -4,23 +4,19 @@ import {
   selectBalance,
   selectMyChannelClaims,
   selectFetchingMyChannels,
-  selectMyActiveChannelUri,
   doFetchChannelListMine,
   doCreateChannel,
-  doSetMyActiveChannelUri,
 } from 'lbry-redux';
 
 const select = state => ({
   channels: selectMyChannelClaims(state),
   fetchingChannels: selectFetchingMyChannels(state),
   balance: selectBalance(state),
-  activeChannelUri: selectMyActiveChannelUri(state),
 });
 
 const perform = dispatch => ({
   createChannel: (name, amount) => dispatch(doCreateChannel(name, amount)),
   fetchChannelListMine: () => dispatch(doFetchChannelListMine()),
-  setMyActiveChannelUri: activeChannelUri => dispatch(doSetMyActiveChannelUri(activeChannelUri)),
 });
 
 export default connect(

src/ui/component/selectChannel/view.jsx

@@ -7,16 +7,13 @@ import Button from 'component/button';
 import { CHANNEL_NEW, CHANNEL_ANONYMOUS } from 'constants/claim';
 
 type Props = {
-  channelUri: string,
   channel: string, // currently selected channel
   channels: Array<{ name: string }>,
   balance: number,
-  onChannelChange?: string => void,
+  onChannelChange: string => void,
   createChannel: (string, number) => Promise<any>,
   fetchChannelListMine: () => void,
   fetchingChannels: boolean,
-  activeChannelUri: string,
-  setMyActiveChannelUri: string => void,
 };
 
 type State = {
@@ -56,27 +53,18 @@ class ChannelSection extends React.PureComponent<Props, State> {
     }
   }
 
-  onChannelChangeProxy(channelUri) {
-    const { onChannelChange } = this.props;
-    if (onChannelChange) {
-      onChannelChange(channelUri);
-    }
-  }
-
   handleChannelChange(event: SyntheticInputEvent<*>) {
-    const { setMyActiveChannelUri } = this.props;
+    const { onChannelChange } = this.props;
     const { newChannelBid } = this.state;
-    const channelUri = event.target.value;
-    console.log('HCC', channelUri);
+    const channel = event.target.value;
 
-    if (channelUri === CHANNEL_NEW) {
+    if (channel === CHANNEL_NEW) {
       this.setState({ addingChannel: true });
-      this.onChannelChangeProxy(channelUri);
+      onChannelChange(channel);
       this.handleNewChannelBidChange(newChannelBid);
     } else {
       this.setState({ addingChannel: false });
-      setMyActiveChannelUri(channelUri);
-      this.onChannelChangeProxy(channelUri);
+      onChannelChange(channel);
     }
   }
 
@@ -116,7 +104,7 @@ class ChannelSection extends React.PureComponent<Props, State> {
   }
 
   handleCreateChannelClick() {
-    const { balance, createChannel } = this.props;
+    const { balance, createChannel, onChannelChange } = this.props;
     const { newChannelBid, newChannelName } = this.state;
 
     const channelName = `@${newChannelName}`;
@@ -135,7 +123,8 @@ class ChannelSection extends React.PureComponent<Props, State> {
         creatingChannel: false,
         addingChannel: false,
       });
-      this.onChannelChangeProxy(channelName);
+
+      onChannelChange(channelName);
     };
 
     const failure = () => {
@@ -149,7 +138,7 @@ class ChannelSection extends React.PureComponent<Props, State> {
   }
 
   render() {
-    const channelUri = this.state.addingChannel ? 'new' : this.props.channelUri;
+    const channel = this.state.addingChannel ? 'new' : this.props.channel;
     const { fetchingChannels, channels = [] } = this.props;
     const {
       newChannelName,
@@ -168,10 +157,10 @@ class ChannelSection extends React.PureComponent<Props, State> {
           <BusyIndicator message="Updating channels" />
         ) : (
           <fieldset-section>
-            <FormField name="channel" type="select" onChange={this.handleChannelChange} value={channelUri}>
+            <FormField name="channel" type="select" onChange={this.handleChannelChange} value={channel}>
               <option value={CHANNEL_ANONYMOUS}>{__('Anonymous')}</option>
-              {channels.map(({ name, permanent_url: channelUri }) => (
-                <option key={name} value={channelUri}>
+              {channels.map(({ name }) => (
+                <option key={name} value={name}>
                   {name}
                 </option>
               ))}

src/ui/constants/settings.js

@@ -16,3 +16,5 @@ export const AUTOPLAY = 'autoplay';
 export const RESULT_COUNT = 'resultCount';
 export const OS_NOTIFICATIONS_ENABLED = 'osNotificationsEnabled';
 export const AUTO_DOWNLOAD = 'autoDownload';
+export const COMMENT_ACKNOWLEDGED = 'comment_acknowledged';
+export const COMMENT_ACKNOWLEDGED_TRUE = 'comment_acknowledged_true';