more redux comments

src/ui/component/commentCreate/index.js

@@ -1,13 +1,12 @@
 import { connect } from 'react-redux';
 
-import { makeSelectClaimForUri, selectMyChannelClaims, doCommentCreate, makeSelectCommentsForUri } from 'lbry-redux';
+import { doCommentCreate, makeSelectClaimForUri, selectMyActiveChannelUri, } from 'lbry-redux';
 
 import CommentCreate from './view';
 
 const select = (state, props) => ({
-  channels: selectMyChannelClaims(state),
-  comments: makeSelectCommentsForUri(props.uri)(state),
   claim: makeSelectClaimForUri(props.uri)(state),
+  channelUri: selectMyActiveChannelUri(state),
 });
 
 const perform = dispatch => ({

src/ui/component/commentCreate/view.jsx

@@ -1,55 +1,71 @@
 // @flow
 import React from 'react';
-import { FormField } from 'component/common/form';
+import { FormField, Form } from 'component/common/form';
 import Button from 'component/button';
 import ChannelSection from 'component/selectChannel';
+import { parseURI } from 'lbry-redux';
 
+// props:
 type Props = {
-  comment: string,
-  claimId: string,
-  authorChannelId: string,
+  uri: string,
+  channelUri: string,
+  createComment: params => {},
 };
 
 class CommentCreate extends React.PureComponent<Props> {
   constructor(props: Props) {
     super(props);
     this.state = {
-      channel: 'Anonymous',
-      comment: '',
-      channelId: '',
+      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({ comment: event.comment.target.value });
+    this.setState({ message: event.target.value });
   }
 
-  handleChannelChange(channel) {
-    this.setState({ channel: channel });
+  handleChannelChange(channelUri) {
+    this.setState({ channelUri: channelUri });
+  }
+
+  handleSubmit() {
+    const { createComment, claim, channelUri } = this.props;
+    console.log('claim', claim)
+    const { claim_id: claimId } = claim;
+    const { message } = this.state;
+    let cmt = { message, channelId: parseURI(channelUri).claimId, claimId };
+    console.log('CMT', cmt);
+    console.log('PURI', claimId);
+    console.log('PURI', parseURI(channelUri));
   }
 
   render() {
-    console.log(this.state);
+    const { channelUri } = this.props;
+
     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">
+        <Form onSubmit={this.handleSubmit}>
           <div className="card__content">
-            <ChannelSection channel={this.state.channel} onChannelChange={this.handleChannelChange} />
+            <FormField
+              type="textarea"
+              name="content_description"
+              label={__('Text')}
+              placeholder={__('Your comment')}
+              value={this.state.message}
+              onChange={this.handleCommentChange}
+            />
           </div>
-          <Button button="primary" type="submit" label={__('Post')} />
-        </div>
+          <div className="card__actions--between">
+            <div className="card__content">
+              <ChannelSection channel={channelUri} />
+            </div>
+            <Button button="primary" type="submit" label={__('Post')} />
+          </div>
+        </Form>
       </section>
     );
   }

src/ui/component/commentsList/view.jsx

@@ -76,49 +76,3 @@ class Comment extends React.PureComponent<CommentProps> {
 }
 
 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/publishForm/view.jsx

@@ -331,6 +331,7 @@ 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,19 +4,23 @@ 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,13 +7,16 @@ 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 = {
@@ -53,18 +56,27 @@ class ChannelSection extends React.PureComponent<Props, State> {
     }
   }
 
-  handleChannelChange(event: SyntheticInputEvent<*>) {
+  onChannelChangeProxy(channelUri) {
     const { onChannelChange } = this.props;
-    const { newChannelBid } = this.state;
-    const channel = event.target.value;
+    if (onChannelChange) {
+      onChannelChange(channelUri);
+    }
+  }
 
-    if (channel === CHANNEL_NEW) {
+  handleChannelChange(event: SyntheticInputEvent<*>) {
+    const { setMyActiveChannelUri } = this.props;
+    const { newChannelBid } = this.state;
+    const channelUri = event.target.value;
+    console.log('HCC', channelUri);
+
+    if (channelUri === CHANNEL_NEW) {
       this.setState({ addingChannel: true });
-      onChannelChange(channel);
+      this.onChannelChangeProxy(channelUri);
       this.handleNewChannelBidChange(newChannelBid);
     } else {
       this.setState({ addingChannel: false });
-      onChannelChange(channel);
+      setMyActiveChannelUri(channelUri);
+      this.onChannelChangeProxy(channelUri);
     }
   }
 
@@ -104,7 +116,7 @@ class ChannelSection extends React.PureComponent<Props, State> {
   }
 
   handleCreateChannelClick() {
-    const { balance, createChannel, onChannelChange } = this.props;
+    const { balance, createChannel } = this.props;
     const { newChannelBid, newChannelName } = this.state;
 
     const channelName = `@${newChannelName}`;
@@ -123,8 +135,7 @@ class ChannelSection extends React.PureComponent<Props, State> {
         creatingChannel: false,
         addingChannel: false,
       });
-
-      onChannelChange(channelName);
+      this.onChannelChangeProxy(channelName);
     };
 
     const failure = () => {
@@ -138,7 +149,7 @@ class ChannelSection extends React.PureComponent<Props, State> {
   }
 
   render() {
-    const channel = this.state.addingChannel ? 'new' : this.props.channel;
+    const channelUri = this.state.addingChannel ? 'new' : this.props.channelUri;
     const { fetchingChannels, channels = [] } = this.props;
     const {
       newChannelName,
@@ -157,10 +168,10 @@ class ChannelSection extends React.PureComponent<Props, State> {
           <BusyIndicator message="Updating channels" />
         ) : (
           <fieldset-section>
-            <FormField name="channel" type="select" onChange={this.handleChannelChange} value={channel}>
+            <FormField name="channel" type="select" onChange={this.handleChannelChange} value={channelUri}>
               <option value={CHANNEL_ANONYMOUS}>{__('Anonymous')}</option>
-              {channels.map(({ name }) => (
-                <option key={name} value={name}>
+              {channels.map(({ name, permanent_url: channelUri }) => (
+                <option key={name} value={channelUri}>
                   {name}
                 </option>
               ))}

src/ui/page/file/view.jsx

@@ -290,7 +290,7 @@ class FilePage extends React.Component<Props> {
             <header className="card__header">
               <h2 className="card__header">Comments</h2>
             </header>
-            <CommentCreate comment={''} uri={uri} />
+            <CommentCreate uri={uri} />
             <CommentsList uri={uri} />
           </div>
         </div>