comments v69

2020-10-07 15:14:52 -04:00 · 2020-10-07 15:14:52 -04:00 · c43eff8587
commit c43eff8587
parent 3e70d5a398
10 changed files with 70 additions and 82 deletions
--- a/static/app-strings.json
+++ b/static/app-strings.json
@ -1308,8 +1308,7 @@
  "Downvote": "Downvote",
  "Best": "Best",
  "Controversial": "Controversial",
-  "Hide %number% Replies": "Hide %number% Replies",
-  "Show %number% Replies": "Show %number% Replies",
+  "Show Replies": "Show Replies",
  "Unable to create comment, please try again later.": "Unable to create comment, please try again later.",
  "Your channel is still being setup, try again in a few moments.": "Your channel is still being setup, try again in a few moments.",
  "Unable to delete this comment, please try again later.": "Unable to delete this comment, please try again later.",
--- a/ui/component/comment/view.jsx
+++ b/ui/component/comment/view.jsx
@ -18,13 +18,13 @@ import usePersistedState from 'effects/use-persisted-state';
 import CommentReactions from 'component/commentReactions';
 import CommentsReplies from 'component/commentsReplies';
 import { useHistory } from 'react-router';
+import CommentCreate from 'component/commentCreate';

 type Props = {
  uri: string,
  author: ?string, // LBRY Channel Name, e.g. @channel
  authorUri: string, // full LBRY Channel URI: lbry://@channel#123...
  commentId: string, // sha256 digest identifying the comment
-  topLevelId: string, // sha256 digest identifying the parent of the comment
  message: string, // comment body
  timePosted: number, // Comment timestamp
  channel: ?Claim, // Channel Claim, retrieved to obtain thumbnail
@ -41,10 +41,8 @@ type Props = {
  myChannels: ?Array<ChannelClaim>,
  commentingEnabled: boolean,
  doToast: ({ message: string }) => void,
-  hideReplyButton?: boolean,
  isTopLevel?: boolean,
-  topLevelIsReplying: boolean,
-  setTopLevelIsReplying: boolean => void,
+  threadDepth: number,
 };

 const LENGTH_TO_COLLAPSE = 300;
@ -71,11 +69,8 @@ function Comment(props: Props) {
    commentingEnabled,
    myChannels,
    doToast,
-    hideReplyButton,
    isTopLevel,
-    topLevelIsReplying,
-    setTopLevelIsReplying,
-    topLevelId,
+    threadDepth,
  } = props;
  const {
    push,
@ -133,18 +128,15 @@ function Comment(props: Props) {
    if (!hasChannels) {
      push(`/$/${PAGES.CHANNEL_NEW}?redirect=${pathname}`);
      doToast({ message: __('A channel is required to comment on %SITE_NAME%', { SITE_NAME }) });
-    } else {
-      if (setTopLevelIsReplying) {
-        setTopLevelIsReplying(!topLevelIsReplying);
    } else {
      setReplying(!isReplying);
    }
  }
-  }

  return (
    <li
      className={classnames('comment', {
+        'comment--top-level': isTopLevel,
        'comment--reply': !isTopLevel,
        'comment--highlighted': linkedComment && linkedComment.comment_id === commentId,
      })}
@ -242,7 +234,7 @@ function Comment(props: Props) {
                </div>

                <div className="comment__actions">
-                  {!hideReplyButton && (
+                  {threadDepth !== 0 && (
                    <Button
                      requiresAuth={IS_WEB}
                      label={commentingEnabled ? __('Reply') : __('Log in to reply')}
@ -253,21 +245,23 @@ function Comment(props: Props) {
                  )}
                  {ENABLE_COMMENT_REACTIONS && <CommentReactions commentId={commentId} />}
                </div>
+
+                {isReplying && (
+                  <CommentCreate
+                    isReply
+                    uri={uri}
+                    parentId={commentId}
+                    onDoneReplying={() => setReplying(false)}
+                    onCancelReplying={() => setReplying(false)}
+                  />
+                )}
              </>
            )}
          </div>
        </div>
      </div>

-      {isTopLevel && (
-        <CommentsReplies
-          uri={uri}
-          topLevelId={topLevelId}
-          linkedComment={linkedComment}
-          topLevelIsReplying={isReplying}
-          setTopLevelIsReplying={setReplying}
-        />
-      )}
+      <CommentsReplies threadDepth={threadDepth - 1} uri={uri} parentId={commentId} linkedComment={linkedComment} />
    </li>
  );
 }
--- a/ui/component/commentCreate/index.js
+++ b/ui/component/commentCreate/index.js
@ -1,15 +1,17 @@
 import { connect } from 'react-redux';
 import { makeSelectClaimForUri, selectMyChannelClaims, selectFetchingMyChannels } from 'lbry-redux';
+import { selectIsPostingComment } from 'redux/selectors/comments';
 import { doOpenModal } from 'redux/actions/app';
 import { doCommentCreate } from 'redux/actions/comments';
-import { CommentCreate } from './view';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
+import { CommentCreate } from './view';

 const select = (state, props) => ({
  commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
  claim: makeSelectClaimForUri(props.uri)(state),
  channels: selectMyChannelClaims(state),
  isFetchingChannels: selectFetchingMyChannels(state),
+  isPostingComment: selectIsPostingComment(state),
 });

 const perform = (dispatch, ownProps) => ({
--- a/ui/component/commentCreate/view.jsx
+++ b/ui/component/commentCreate/view.jsx
@ -17,11 +17,13 @@ type Props = {
  claim: StreamClaim,
  createComment: (string, string, string, ?string) => Promise<any>,
  channels: ?Array<ChannelClaim>,
-  topLevelId?: string,
  onDoneReplying?: () => void,
  onCancelReplying?: () => void,
  isNested: boolean,
  isFetchingChannels: boolean,
+  parentId: string,
+  isReply: boolean,
+  isPostingComment: boolean,
 };

 export function CommentCreate(props: Props) {
@ -29,23 +31,23 @@ export function CommentCreate(props: Props) {
    createComment,
    claim,
    channels,
-    topLevelId,
    onDoneReplying,
    onCancelReplying,
    isNested,
    isFetchingChannels,
+    isReply,
+    parentId,
+    isPostingComment,
  } = props;
  const buttonref: ElementRef<any> = React.useRef();
  const { push } = useHistory();
  const { claim_id: claimId } = claim;
-  const isReply = !!topLevelId;
  const [commentValue, setCommentValue] = React.useState('');
  const [channel, setChannel] = usePersistedState('comment-channel', '');
  const [charCount, setCharCount] = useState(commentValue.length);
  const [advancedEditor, setAdvancedEditor] = usePersistedState('comment-editor-mode', false);
  const hasChannels = channels && channels.length;
-  const disabled = channel === CHANNEL_NEW || !commentValue.length;
-
+  const disabled = isPostingComment || channel === CHANNEL_NEW || !commentValue.length;
  const topChannel =
    channels &&
    channels.reduce((top, channel) => {
@ -90,9 +92,10 @@ export function CommentCreate(props: Props) {

  function handleSubmit() {
    if (channel !== CHANNEL_NEW && commentValue.length) {
-      createComment(commentValue, claimId, channel, topLevelId).then(res => {
+      createComment(commentValue, claimId, channel, parentId).then(res => {
        if (res && res.signature) {
          setCommentValue('');
+
          if (onDoneReplying) {
            onDoneReplying();
          }
@ -160,7 +163,15 @@ export function CommentCreate(props: Props) {
          button="primary"
          disabled={disabled}
          type="submit"
-          label={isReply ? __('Reply') : __('Post')}
+          label={
+            isReply
+              ? isPostingComment
+                ? __('Replying...')
+                : __('Reply')
+              : isPostingComment
+              ? __('Posting...')
+              : __('Post')
+          }
          requiresAuth={IS_WEB}
        />
        {isReply && (
--- a/ui/component/commentsList/view.jsx
+++ b/ui/component/commentsList/view.jsx
@ -193,7 +193,9 @@ function CommentList(props: Props) {
      actions={
        <>
          <CommentCreate uri={uri} />
+
          {!isFetchingComments && hasNoComments && <div className="main--empty">{__('Be the first to comment!')}</div>}
+
          <ul className="comments" ref={commentRef}>
            {!isFetchingComments &&
              comments &&
@ -202,13 +204,13 @@ function CommentList(props: Props) {
                return (
                  <CommentView
                    isTopLevel
+                    threadDepth={3}
                    key={comment.comment_id}
                    uri={uri}
                    authorUri={comment.channel_url}
                    author={comment.channel_name}
                    claimId={comment.claim_id}
                    commentId={comment.comment_id}
-                    topLevelId={comment.comment_id}
                    message={comment.comment}
                    timePosted={comment.timestamp * 1000}
                    claimIsMine={claimIsMine}
@ -218,6 +220,7 @@ function CommentList(props: Props) {
                );
              })}
          </ul>
+
          {(isFetchingComments || moreBelow) && (
            <div className="main--empty" ref={spinnerRef}>
              <Spinner type="small" />
--- a/ui/component/commentsReplies/index.js
+++ b/ui/component/commentsReplies/index.js
@ -5,7 +5,7 @@ import { selectUserVerifiedEmail } from 'redux/selectors/user';
 import CommentsReplies from './view';

 const select = (state, props) => ({
-  comments: makeSelectRepliesForParentId(props.topLevelId)(state),
+  comments: makeSelectRepliesForParentId(props.parentId)(state),
  claimIsMine: makeSelectClaimIsMine(props.uri)(state),
  commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
  myChannels: selectMyChannelClaims(state),
--- a/ui/component/commentsReplies/view.jsx
+++ b/ui/component/commentsReplies/view.jsx
@ -3,7 +3,6 @@ import * as ICONS from 'constants/icons';
 import React from 'react';
 import Comment from 'component/comment';
 import Button from 'component/button';
-import CommentCreate from 'component/commentCreate';

 type Props = {
  comments: Array<any>,
@ -11,25 +10,13 @@ type Props = {
  claimIsMine: boolean,
  myChannels: ?Array<ChannelClaim>,
  linkedComment?: Comment,
-  topLevelId: string,
  commentingEnabled: boolean,
-  topLevelIsReplying: boolean,
-  setTopLevelIsReplying: boolean => void,
+  threadDepth: number,
 };

 function CommentsReplies(props: Props) {
-  const {
-    uri,
-    comments,
-    claimIsMine,
-    myChannels,
-    linkedComment,
-    topLevelId,
-    commentingEnabled,
-    topLevelIsReplying,
-    setTopLevelIsReplying,
-  } = props;
-  const [isExpanded, setExpanded] = React.useState(false);
+  const { uri, comments, claimIsMine, myChannels, linkedComment, commentingEnabled, threadDepth } = props;
+  const [isExpanded, setExpanded] = React.useState(true);
  const [start, setStart] = React.useState(0);
  const [end, setEnd] = React.useState(9);
  const sortedComments = comments ? [...comments].reverse() : [];
@ -63,7 +50,6 @@ function CommentsReplies(props: Props) {
      setStart(numberOfComments || 0);
    }
    setEnd(numberOfComments + 1);
-    setTopLevelIsReplying(false);
  }

  React.useEffect(() => {
@ -84,17 +70,13 @@ function CommentsReplies(props: Props) {
  const displayedComments = sortedComments.slice(start, end);

  return (
-    (Boolean(numberOfComments) || topLevelIsReplying) && (
+    Boolean(numberOfComments) && (
      <div className="comment__replies-container">
-        {Boolean(numberOfComments) && (
+        {Boolean(numberOfComments) && !isExpanded && (
          <div className="comment__actions--nested">
            <Button
              className="comment__action"
-              label={
-                isExpanded
-                  ? __('Hide %number% Replies', { number: numberOfComments })
-                  : __('Show %number% Replies', { number: numberOfComments })
-              }
+              label={__('Show Replies')}
              onClick={() => setExpanded(!isExpanded)}
              icon={isExpanded ? ICONS.UP : ICONS.DOWN}
            />
@ -109,6 +91,7 @@ function CommentsReplies(props: Props) {
                {displayedComments.map((comment, index) => {
                  return (
                    <Comment
+                      threadDepth={threadDepth}
                      uri={uri}
                      authorUri={comment.channel_url}
                      author={comment.channel_name}
@ -121,9 +104,7 @@ function CommentsReplies(props: Props) {
                      commentIsMine={comment.channel_id && isMyComment(comment.channel_id)}
                      linkedComment={linkedComment}
                      commentingEnabled={commentingEnabled}
-                      hideReplyButton={index !== displayedComments.length - 1}
-                      topLevelIsReplying={topLevelIsReplying}
-                      setTopLevelIsReplying={setTopLevelIsReplying}
+                      handleCommentDone={handleCommentDone}
                    />
                  );
                })}
@ -136,17 +117,6 @@ function CommentsReplies(props: Props) {
            <Button button="link" label={__('Show more')} onClick={showMore} className="button--uri-indicator" />
          </div>
        )}
-
-        {topLevelIsReplying && (
-          <CommentCreate
-            isNested={isExpanded}
-            key={topLevelId}
-            uri={uri}
-            topLevelId={topLevelId}
-            onDoneReplying={() => handleCommentDone()}
-            onCancelReplying={() => setTopLevelIsReplying(false)}
-          />
-        )}
      </div>
    )
  );
--- a/ui/scss/component/_comments.scss
+++ b/ui/scss/component/_comments.scss
@ -1,5 +1,5 @@
-$thumbnailWidth: 2rem;
-$thumbnailWidthSmall: 1.5rem;
+$thumbnailWidth: 1.5rem;
+$thumbnailWidthSmall: 0rem;

 .comments {
  list-style-type: none;
@ -9,7 +9,7 @@ $thumbnailWidthSmall: 1.5rem;

 .comments--replies {
  list-style-type: none;
-  margin-left: var(--spacing-m);
+  margin-left: var(--spacing-s);
  flex: 1;
 }

@ -29,8 +29,7 @@ $thumbnailWidthSmall: 1.5rem;
 }

 .comment__create--reply {
-  margin-top: var(--spacing-l);
-  margin-left: calc(#{$thumbnailWidth} + var(--spacing-m));
+  margin-top: var(--spacing-m);
  position: relative;
 }

@ -81,11 +80,17 @@ $thumbnailWidthSmall: 1.5rem;
  }
 }

+.comment--top-level {
+  &:not(:first-child) {
+    margin-top: var(--spacing-l);
+  }
+}
+
 .comment__threadline {
  @extend .button--alt;
  height: auto;
  align-self: stretch;
-  padding: 2px;
+  padding: 1px;
  border-radius: 3px;
  background-color: var(--color-comment-threadline);

@ -94,6 +99,10 @@ $thumbnailWidthSmall: 1.5rem;
    background-color: var(--color-comment-threadline-hover);
    border-color: var(--color-comment-threadline-hover);
  }
+
+  @media (min-width: $breakpoint-small) {
+    padding: 2px;
+  }
 }

 .comment-new__label-wrapper {
@ -134,7 +143,6 @@ $thumbnailWidthSmall: 1.5rem;
 .comment__meta {
  display: flex;
  justify-content: space-between;
-  text-overflow: ellipsis;
 }

 .comment__meta-information {
--- a/ui/scss/themes/dark.scss
+++ b/ui/scss/themes/dark.scss
@ -57,6 +57,8 @@
  --color-purchased-text: var(--color-gray-5);
  --color-comment-highlighted: #484734;
  --color-thumbnail-background: var(--color-gray-5);
+  --color-comment-threadline: #434b54;
+  --color-comment-threadline-hover: var(--color-gray-4);

  // Text
  --color-text: #d8d8d8;
--- a/ui/scss/themes/light.scss
+++ b/ui/scss/themes/light.scss
@ -26,9 +26,8 @@
  --color-purchased-alt: #ffebc2;
  --color-purchased-text: var(--color-gray-5);
  --color-comment-highlighted: #fff2d9;
-  --color-comment-threadline: var(--color-gray-2);
+  --color-comment-threadline: var(--color-gray-1);
  --color-comment-threadline-hover: var(--color-gray-4);
-  --color-comment-threadline-border: var(--color-gray-2);
  --color-thumbnail-background: var(--color-gray-1);

  // Icons