merge CommentReply and CommentCreate

static/app-strings.json

@@ -1029,11 +1029,6 @@
   "Your video has a bitrate over 6 mbps. We suggest transcoding to provide viewers the best experience.": "Your video has a bitrate over 6 mbps. We suggest transcoding to provide viewers the best experience.",
   "Your video has a bitrate over 5 mbps. We suggest transcoding to provide viewers the best experience.": "Your video has a bitrate over 5 mbps. We suggest transcoding to provide viewers the best experience.",
   "Almost there": "Almost there",
-  "Comment Acknowledgement": "Comment Acknowledgement",
-  "A few things to know before making your comment:": "A few things to know before making your comment:",
-  "Commenting is in alpha. During the alpha, all comments are sent to a LBRY, Inc. server, not the LBRY network itself.": "Commenting is in alpha. During the alpha, all comments are sent to a LBRY, Inc. server, not the LBRY network itself.",
-  "Deleting or editing comments is not currently possible. Please be mindful of this when posting.": "Deleting or editing comments is not currently possible. Please be mindful of this when posting.",
-  "When the alpha ends, we will attempt to transition comments, but do not promise to do so.": "When the alpha ends, we will attempt to transition comments, but do not promise to do so.",
   "More Channels": "More Channels",
   "Known Tags": "Known Tags",
   "You aren’t blocking any channels": "You aren’t blocking any channels",
@@ -1063,5 +1058,12 @@
   "Your wallet data will remain intact. If you sign in with a different account, the wallets will be merged. To prevent this, you need to %rename_wallet_instructions%": "Your wallet data will remain intact. If you sign in with a different account, the wallets will be merged. To prevent this, you need to %rename_wallet_instructions%",
   "rename your existing wallet": "rename your existing wallet",
   "Your wallet data will remain intact. If you sign in with a different account, the wallets will be merged. To prevent this, you need to %rename_wallet_instructions% in the lbry/wallets directory": "Your wallet data will remain intact. If you sign in with a different account, the wallets will be merged. To prevent this, you need to %rename_wallet_instructions% in the lbry/wallets directory",
-  "Your wallet data will remain intact. If you sign in with a different account, the wallets will be merged. To prevent this, you need to %rename_wallet_instructions% in the lbry/wallets directory.": "Your wallet data will remain intact. If you sign in with a different account, the wallets will be merged. To prevent this, you need to %rename_wallet_instructions% in the lbry/wallets directory."
+  "Your wallet data will remain intact. If you sign in with a different account, the wallets will be merged. To prevent this, you need to %rename_wallet_instructions% in the lbry/wallets directory.": "Your wallet data will remain intact. If you sign in with a different account, the wallets will be merged. To prevent this, you need to %rename_wallet_instructions% in the lbry/wallets directory.",
-}
+  "Your wallet": "Your wallet",
+  "Publish a file, or create a channel": "Publish a file, or create a channel",
+  "Your account": "Your account",
+  "Creator Analytics": "Creator Analytics",
+  "Channel profile picture": "Channel profile picture",
+  "(%count%)": "(%count%)",
+  "Reposts of %uri%": "Reposts of %uri%"
+}

ui/component/comment/view.jsx

@@ -10,7 +10,7 @@ import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
 import Icon from 'component/common/icon';
 import * as ICONS from 'constants/icons';
 import { FormField, Form } from 'component/common/form';
-import CommentReply from '../commentReply/index';
+import CommentCreate from 'component/commentCreate';
 import classnames from 'classnames';
 
 type Props = {
@@ -161,16 +161,15 @@ function Comment(props: Props) {
                   />
                 </MenuButton>
                 <MenuList className="comment__menu-list">
-                  <MenuItem className="comment__menu-option" onSelect={handleSetEditing}>
+                  {commentIsMine ? (
-                    {__('Edit')}
+                    <React.Fragment>
-                  </MenuItem>
+                      <MenuItem className="comment__menu-option" onSelect={handleSetEditing}>
-                  <MenuItem className="comment__menu-option" onSelect={handleDeleteComment}>
+                        {__('Edit')}
-                    {__('Delete')}
+                      </MenuItem>
-                  </MenuItem>
+                      <MenuItem className="comment__menu-option" onSelect={handleDeleteComment}>
-                  {parentId === null ? (
+                        {__('Delete')}
-                    <MenuItem className="comment__menu-option" onSelect={handleReply}>
+                      </MenuItem>
-                      {__('Reply')}
+                    </React.Fragment>
-                    </MenuItem>
                   ) : (
                     ''
                   )}
@@ -212,7 +211,21 @@ function Comment(props: Props) {
             </div>
           )}
         </div>
-        <div>{isReplying ? <CommentReply uri={uri} parentId={commentId} setReplying={setReplying} /> : ''}</div>
+        {!parentId && (
+          <Button button="link" className="comment__reply-button" onClick={handleReply} label={__('Reply')} />
+        )}
+        <div>
+          {isReplying ? (
+            <CommentCreate
+              uri={uri}
+              parentId={commentId}
+              onDoneReplying={() => setReplying(false)}
+              onCancelReplying={() => setReplying(false)}
+            />
+          ) : (
+            ''
+          )}
+        </div>
       </div>
     </li>
   );

ui/component/commentCreate/index.js

@@ -11,11 +11,9 @@ const select = (state, props) => ({
 });
 
 const perform = dispatch => ({
-  createComment: (comment, claimId, channel) => dispatch(doCommentCreate(comment, claimId, channel)),
+  createComment: (comment, claimId, channel, parentId) =>
+    dispatch(doCommentCreate(comment, claimId, channel, parentId)),
   openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
 });
 
-export default connect(
+export default connect(select, perform)(CommentCreate);
-  select,
-  perform
-)(CommentCreate);

ui/component/commentCreate/view.jsx

@@ -1,6 +1,7 @@
 // @flow
 import { CHANNEL_NEW } from 'constants/claim';
 import React, { useEffect, useState } from 'react';
+import classnames from 'classnames';
 import { FormField, Form } from 'component/common/form';
 import Button from 'component/button';
 import ChannelSection from 'component/selectChannel';
@@ -13,14 +14,27 @@ type Props = {
   uri: string,
   claim: StreamClaim,
   openModal: (id: string, { onCommentAcknowledge: () => void }) => void,
-  createComment: (string, string, string) => void,
+  createComment: (string, string, string, ?string) => void,
   channels: ?Array<ChannelClaim>,
+  parentId?: string,
+  onDoneReplying?: () => void,
+  onCancelReplying?: () => void,
 };
 
 export function CommentCreate(props: Props) {
-  const { commentingEnabled, createComment, claim, openModal, channels } = props;
+  const {
+    commentingEnabled,
+    createComment,
+    claim,
+    openModal,
+    channels,
+    parentId,
+    onDoneReplying,
+    onCancelReplying,
+  } = props;
   const { claim_id: claimId } = claim;
-  const [commentValue, setCommentValue] = usePersistedState(`comment-${claimId}`, '');
+  const isReply = !!parentId;
+  const [commentValue, setCommentValue] = React.useState('');
   const [commentAck, setCommentAck] = usePersistedState('comment-acknowledge', false);
   const [channel, setChannel] = usePersistedState('comment-channel', '');
   const [charCount, setCharCount] = useState(commentValue.length);
@@ -59,8 +73,13 @@ export function CommentCreate(props: Props) {
   }
 
   function handleSubmit() {
-    if (channel !== CHANNEL_NEW && commentValue.length) createComment(commentValue, claimId, channel);
+    if (channel !== CHANNEL_NEW && commentValue.length) {
+      createComment(commentValue, claimId, channel, parentId);
+    }
     setCommentValue('');
+    if (onDoneReplying) {
+      onDoneReplying();
+    }
   }
 
   useEffect(() => setCharCount(commentValue.length), [commentValue]);
@@ -74,8 +93,8 @@ export function CommentCreate(props: Props) {
   }
 
   return (
-    <Form onSubmit={handleSubmit}>
+    <Form onSubmit={handleSubmit} className={classnames('comment__create', { 'comment__create--reply': isReply })}>
-      <ChannelSection channel={channel} hideAnon onChannelChange={handleChannelChange} />
+      {!isReply && <ChannelSection channel={channel} hideAnon onChannelChange={handleChannelChange} />}
       <FormField
         disabled={channel === CHANNEL_NEW}
         type="textarea"
@@ -92,9 +111,20 @@ export function CommentCreate(props: Props) {
           button="primary"
           disabled={channel === CHANNEL_NEW || !commentValue.length}
           type="submit"
-          label={__('Post')}
+          label={isReply ? __('Reply') : __('Post')}
           requiresAuth={IS_WEB}
         />
+        {isReply && (
+          <Button
+            button="link"
+            label={__('Cancel')}
+            onClick={() => {
+              if (onCancelReplying) {
+                onCancelReplying();
+              }
+            }}
+          />
+        )}
       </div>
     </Form>
   );

ui/component/commentReply/index.js

@@ -1,20 +0,0 @@
-import { connect } from 'react-redux';
-import { doCommentCreate, makeSelectClaimForUri } from 'lbry-redux';
-import { doOpenModal } from 'redux/actions/app';
-import { CommentReply } from './view';
-import { selectUserVerifiedEmail } from 'lbryinc';
-
-const select = (state, props) => ({
-  commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
-  claim: makeSelectClaimForUri(props.uri)(state),
-});
-
-const perform = dispatch => ({
-  replyComment: (comment, claimId, channel, parentId) => dispatch(doCommentCreate(comment, claimId, channel, parentId)),
-  openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
-});
-
-export default connect(
-  select,
-  perform
-)(CommentReply);

ui/component/commentReply/view.jsx

@@ -1,88 +0,0 @@
-// @flow
-import { CHANNEL_NEW } from 'constants/claim';
-import React, { useEffect, useState } from 'react';
-import { FormField, Form } from 'component/common/form';
-import Button from 'component/button';
-import ChannelSection from 'component/selectChannel';
-import usePersistedState from 'effects/use-persisted-state';
-import * as MODALS from 'constants/modal_types';
-import I18nMessage from '../i18nMessage/view';
-
-type Props = {
-  commentingEnabled: boolean,
-  claim: StreamClaim,
-  parentId: string,
-  openModal: (id: string, { onCommentAcknowledge: () => void }) => void,
-  replyComment: (string, string, string, string) => void,
-  setReplying: boolean => void,
-};
-
-export function CommentReply(props: Props) {
-  const { commentingEnabled, replyComment, setReplying, claim, openModal, parentId } = props;
-  const { claim_id: claimId } = claim;
-  const [commentValue, setCommentValue] = usePersistedState(`comment-${claimId}`, '');
-  const [commentAck, setCommentAck] = usePersistedState('comment-acknowledge', false);
-  const [channel, setChannel] = usePersistedState('comment-channel', 'anonymous');
-  const [charCount, setCharCount] = useState(commentValue.length);
-
-  function handleCommentChange(event) {
-    setCommentValue(event.target.value);
-  }
-
-  function handleChannelChange(channel) {
-    setChannel(channel);
-  }
-
-  function handleCommentAck() {
-    setCommentAck(true);
-  }
-
-  function onTextareaFocus() {
-    if (!commentAck) {
-      openModal(MODALS.COMMENT_ACKNOWEDGEMENT, { onCommentAcknowledge: handleCommentAck });
-    }
-  }
-
-  function handleSubmit() {
-    if (channel !== CHANNEL_NEW && commentValue.length);
-    replyComment(commentValue, claimId, channel, parentId);
-    setCommentValue('');
-  }
-
-  useEffect(() => setCharCount(commentValue.length), [commentValue]);
-
-  if (!commentingEnabled) {
-    return (
-      <I18nMessage tokens={{ sign_in_link: <Button button="link" requiresAuth label={__('sign in')} /> }}>
-        Please %sign_in_link% to comment.
-      </I18nMessage>
-    );
-  }
-
-  return (
-    <Form className="comment__reply-form" onSubmit={handleSubmit}>
-      <ChannelSection channel={channel} onChannelChange={handleChannelChange} />
-      <FormField
-        disabled={channel === CHANNEL_NEW}
-        type="textarea"
-        name="content_description"
-        label={__('Comment')}
-        onFocus={onTextareaFocus}
-        placeholder={__('Say something about this...')}
-        value={commentValue}
-        charCount={charCount}
-        onChange={handleCommentChange}
-      />
-      <div className="section__actions">
-        <Button
-          button="primary"
-          disabled={channel === CHANNEL_NEW || !commentValue.length}
-          type="submit"
-          label={__('Post')}
-          requiresAuth={IS_WEB}
-        />
-        <Button button="link" label={__('Cancel')} onClick={() => setReplying(false)} />
-      </div>
-    </Form>
-  );
-}

ui/scss/component/_comments.scss

@@ -1,7 +1,3 @@
-.comments {
-  @extend .ul--no-style;
-}
-
 .comment {
   padding: var(--spacing-small) 0;
   display: flex;
@@ -11,7 +7,7 @@
   margin: 0;
 
   &:first-of-type {
-    padding-top: 0;
+    border-top: 1px solid var(--color-border);
   }
 
   &:not(:last-of-type) {
@@ -19,13 +15,17 @@
   }
 }
 
-.comment__reply {
+.comment__create--reply {
-  border-left: 5px solid var(--color-border);
+  margin-top: var(--spacing-small);
-  padding-left: var(--spacing-small);
 }
 
-.comment__reply-form {
+.comment__reply {
-  border-top: 1px solid var(--color-border);
+  border-left: 5px solid var(--color-primary-alt);
+  padding-left: var(--spacing-medium);
+  margin-left: var(--spacing-medium);
+}
+
+.comment__reply-button {
   margin-top: var(--spacing-small);
 }