add comment sorting and improve comment focus styles

ui/component/comment/view.jsx

@@ -174,13 +174,9 @@ function Comment(props: Props) {
                 />
               )}
               <Button
-                className="button--uri-indicator"
+                className="comment__time"
                 navigate={`${uri}?lc=${commentId}`}
-                label={
+                label={<DateTime date={timePosted} timeAgo />}
-                  <span className="comment__time">
-                    <DateTime date={timePosted} timeAgo />
-                  </span>
-                }
               />
             </div>
             <div className="comment__menu">

ui/component/commentCreate/index.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { makeSelectClaimForUri, selectMyChannelClaims } from 'lbry-redux';
+import { makeSelectClaimForUri, selectMyChannelClaims, selectFetchingMyChannels } from 'lbry-redux';
 import { doOpenModal } from 'redux/actions/app';
 import { doCommentCreate } from 'redux/actions/comments';
 import { CommentCreate } from './view';
@@ -9,6 +9,7 @@ const select = (state, props) => ({
   commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
   claim: makeSelectClaimForUri(props.uri)(state),
   channels: selectMyChannelClaims(state),
+  isFetchingChannels: selectFetchingMyChannels(state),
 });
 
 const perform = (dispatch, ownProps) => ({

ui/component/commentCreate/view.jsx

@@ -21,10 +21,20 @@ type Props = {
   onDoneReplying?: () => void,
   onCancelReplying?: () => void,
   isNested: boolean,
+  isFetchingChannels: boolean,
 };
 
 export function CommentCreate(props: Props) {
-  const { createComment, claim, channels, topLevelId, onDoneReplying, onCancelReplying, isNested } = props;
+  const {
+    createComment,
+    claim,
+    channels,
+    topLevelId,
+    onDoneReplying,
+    onCancelReplying,
+    isNested,
+    isFetchingChannels,
+  } = props;
   const buttonref: ElementRef<any> = React.useRef();
   const { push } = useHistory();
   const { claim_id: claimId } = claim;
@@ -100,7 +110,15 @@ export function CommentCreate(props: Props) {
   if (!hasChannels) {
     return (
       <div role="button" onClick={() => push(`/$/${PAGES.CHANNEL_NEW}`)}>
-        <FormField type="textarea" name={'comment_signup_prompt'} placeholder={__('Say something about this...')} />
+        <FormField
+          type="textarea"
+          name={'comment_signup_prompt'}
+          placeholder={__('Say something about this...')}
+          label={isFetchingChannels ? __('Comment') : undefined}
+        />
+        <div className="section__actions">
+          <Button disabled button="primary" label={__('Post')} requiresAuth={IS_WEB} />
+        </div>
       </div>
     );
   }

ui/component/commentsList/index.js

@@ -4,6 +4,7 @@ import {
   makeSelectTopLevelCommentsForUri,
   selectIsFetchingComments,
   makeSelectTotalCommentsCountForUri,
+  selectOthersReactsById,
 } from 'redux/selectors/comments';
 import { doCommentList, doCommentReactList } from 'redux/actions/comments';
 import CommentsList from './view';
@@ -17,6 +18,7 @@ const select = (state, props) => ({
   isFetchingComments: selectIsFetchingComments(state),
   commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
   fetchingChannels: selectFetchingMyChannels(state),
+  reactionsById: selectOthersReactsById(state),
 });
 
 const perform = dispatch => ({

ui/component/commentsList/view.jsx

@@ -1,19 +1,22 @@
 // @flow
+import * as REACTION_TYPES from 'constants/reactions';
 import * as ICONS from 'constants/icons';
+import { SORT_COMMENTS_NEW, SORT_COMMENTS_BEST, SORT_COMMENTS_CONTROVERSIAL } from 'constants/comment';
 import React, { useEffect } from 'react';
-import Comment from 'component/comment';
+import classnames from 'classnames';
+import CommentView from 'component/comment';
 import Spinner from 'component/spinner';
 import Button from 'component/button';
 import Card from 'component/common/card';
 import CommentCreate from 'component/commentCreate';
 import usePersistedState from 'effects/use-persisted-state';
 import { ENABLE_COMMENT_REACTIONS } from 'config';
-import { useIsMobile } from 'effects/use-screensize';
+import { sortComments } from 'util/comments';
 
 type Props = {
-  comments: Array<any>,
+  comments: Array<Comment>,
   fetchComments: string => void,
-  fetchReacts: string => void,
+  fetchReacts: string => Promise<any>,
   uri: string,
   claimIsMine: boolean,
   myChannels: ?Array<ChannelClaim>,
@@ -21,6 +24,7 @@ type Props = {
   linkedComment: any,
   totalComments: number,
   fetchingChannels: boolean,
+  reactionsById: { [string]: { [REACTION_TYPES.LIKE | REACTION_TYPES.DISLIKE]: number } },
 };
 
 function CommentList(props: Props) {
@@ -35,13 +39,17 @@ function CommentList(props: Props) {
     linkedComment,
     totalComments,
     fetchingChannels,
+    reactionsById,
   } = props;
-
   const commentRef = React.useRef();
-  const isMobile = useIsMobile();
+  const spinnerRef = React.useRef();
+  const [sort, setSort] = usePersistedState('comment-sort', SORT_COMMENTS_BEST);
   const [activeChannel] = usePersistedState('comment-channel', '');
   const [start] = React.useState(0);
   const [end, setEnd] = React.useState(9);
+  // Display comments immediately if not fetching reactions
+  // If not, wait to show comments until reactions are fetched
+  const [readyToDisplayComments, setReadyToDisplayComments] = React.useState(!ENABLE_COMMENT_REACTIONS);
   const linkedCommentId = linkedComment && linkedComment.comment_id;
   const hasNoComments = totalComments === 0;
 
@@ -58,11 +66,11 @@ function CommentList(props: Props) {
     return false;
   };
 
-  const handleMoreBelow = () => {
+  const handleMoreBelow = React.useCallback(() => {
     if (moreBelow) {
       setEnd(end + 10);
     }
-  };
+  }, [end, setEnd, moreBelow]);
 
   useEffect(() => {
     fetchComments(uri);
@@ -70,7 +78,11 @@ function CommentList(props: Props) {
 
   useEffect(() => {
     if (totalComments && ENABLE_COMMENT_REACTIONS && !fetchingChannels) {
-      fetchReacts(uri);
+      fetchReacts(uri)
+        .then(() => {
+          setReadyToDisplayComments(true);
+        })
+        .catch(() => setReadyToDisplayComments(true));
     }
   }, [fetchReacts, uri, totalComments, activeChannel, fetchingChannels, ENABLE_COMMENT_REACTIONS]);
 
@@ -83,19 +95,28 @@ function CommentList(props: Props) {
 
   useEffect(() => {
     function handleCommentScroll(e) {
-      // Use some arbitrary amount so comments start loading before a user actually reaches the real bottom of the page
       // $FlowFixMe
-      if (window.innerHeight + window.scrollY >= document.body.offsetHeight - (isMobile ? 2750 : 300)) {
+      const rect = spinnerRef.current.getBoundingClientRect();
+
+      const isInViewport =
+        rect.top >= 0 &&
+        rect.left >= 0 &&
+        // $FlowFixMe
+        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+        // $FlowFixMe
+        rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+
+      if (isInViewport) {
         handleMoreBelow();
       }
     }
 
-    if (moreBelow) {
+    if (moreBelow && spinnerRef && spinnerRef.current) {
       window.addEventListener('scroll', handleCommentScroll);
     }
 
     return () => window.removeEventListener('scroll', handleCommentScroll);
-  }, [moreBelow, handleMoreBelow, isMobile]);
+  }, [moreBelow, handleMoreBelow, spinnerRef]);
 
   function prepareComments(arrayOfComments, linkedComment) {
     let orderedComments = [];
@@ -107,7 +128,10 @@ function CommentList(props: Props) {
       } else {
         const parentComment = arrayOfComments.find(c => c.comment_id === linkedComment.parent_id);
         orderedComments = arrayOfComments.filter(c => c.comment_id !== linkedComment.parent_id);
-        orderedComments.unshift(parentComment);
+
+        if (parentComment) {
+          orderedComments.unshift(parentComment);
+        }
       }
     } else {
       orderedComments = arrayOfComments;
@@ -115,7 +139,12 @@ function CommentList(props: Props) {
     return orderedComments;
   }
 
-  const displayedComments = prepareComments(comments, linkedComment).slice(start, end);
+  // Default to newest first for apps that don't have comment reactions
+  const sortedComments = ENABLE_COMMENT_REACTIONS ? sortComments(comments, reactionsById, sort) : comments;
+  const displayedComments = readyToDisplayComments
+    ? prepareComments(sortedComments, linkedComment).slice(start, end)
+    : [];
+
   return (
     <Card
       title={
@@ -126,24 +155,52 @@ function CommentList(props: Props) {
           : __('Leave a comment')
       }
       titleActions={
-        <Button button="alt" icon={ICONS.REFRESH} title={__('Refresh')} onClick={() => fetchComments(uri)} />
+        <>
+          {totalComments > 1 && ENABLE_COMMENT_REACTIONS && (
+            <span className="comment__sort">
+              <Button
+                button="alt"
+                label={'Best'}
+                icon={ICONS.TOP}
+                onClick={() => setSort(SORT_COMMENTS_BEST)}
+                className={classnames(`button-toggle`, {
+                  'button-toggle--active': sort === SORT_COMMENTS_BEST,
+                })}
+              />
+              <Button
+                button="alt"
+                label={'Controversial'}
+                icon={ICONS.CONTROVERSIAL}
+                onClick={() => setSort(SORT_COMMENTS_CONTROVERSIAL)}
+                className={classnames(`button-toggle`, {
+                  'button-toggle--active': sort === SORT_COMMENTS_CONTROVERSIAL,
+                })}
+              />
+              <Button
+                button="alt"
+                label={'New'}
+                icon={ICONS.NEW}
+                onClick={() => setSort(SORT_COMMENTS_NEW)}
+                className={classnames(`button-toggle`, {
+                  'button-toggle--active': sort === SORT_COMMENTS_NEW,
+                })}
+              />
+            </span>
+          )}
+          <Button button="alt" icon={ICONS.REFRESH} title={__('Refresh')} onClick={() => fetchComments(uri)} />
+        </>
       }
       actions={
         <>
           <CommentCreate uri={uri} />
           {!isFetchingComments && hasNoComments && <div className="main--empty">{__('Be the first to comment!')}</div>}
           <ul className="comments" ref={commentRef}>
-            {isFetchingComments && (
-              <div className="main--empty">
-                <Spinner />
-              </div>
-            )}
             {!isFetchingComments &&
               comments &&
               displayedComments &&
               displayedComments.map(comment => {
                 return (
-                  <Comment
+                  <CommentView
                     isTopLevel
                     key={comment.comment_id}
                     uri={uri}
@@ -161,8 +218,8 @@ function CommentList(props: Props) {
                 );
               })}
           </ul>
-          {!isFetchingComments && moreBelow && (
+          {(isFetchingComments || moreBelow) && (
-            <div className="main--empty">
+            <div className="main--empty" ref={spinnerRef}>
               <Spinner type="small" />
             </div>
           )}

ui/component/common/icon-custom.jsx

@@ -839,4 +839,5 @@ export const icons = {
   [ICONS.DOWNVOTE]: buildIcon(
     <path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" />
   ),
+  [ICONS.CONTROVERSIAL]: buildIcon(<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />),
 };

ui/constants/comment.js

@@ -1 +1,5 @@
 export const LINKED_COMMENT_QUERY_PARAM = 'lc';
+
+export const SORT_COMMENTS_NEW = 'new';
+export const SORT_COMMENTS_BEST = 'best';
+export const SORT_COMMENTS_CONTROVERSIAL = 'controversial';

ui/constants/icons.js

@@ -119,3 +119,4 @@ export const REPLY = 'Reply';
 export const YOUTUBE = 'Youtube';
 export const UPVOTE = 'Upvote';
 export const DOWNVOTE = 'Downvote';
+export const CONTROVERSIAL = 'Controversial';

ui/redux/actions/comments.js

@@ -66,7 +66,8 @@ export function doCommentReactList(uri: string | null, commentId?: string) {
       params['channel_name'] = channel;
       params['channel_id'] = channelId;
     }
-    Lbry.comment_react_list(params)
+
+    return Lbry.comment_react_list(params)
       .then((result: CommentReactListResponse) => {
         const { my_reactions: myReactions, others_reactions: othersReactions } = result;
         dispatch({

ui/redux/selectors/comments.js

@@ -14,6 +14,10 @@ export const selectIsFetchingComments = createSelector(selectState, state => sta
 
 export const selectIsPostingComment = createSelector(selectState, state => state.isCommenting);
 
+export const selectIsFetchingReacts = createSelector(selectState, state => state.isFetchingReacts);
+
+export const selectOthersReactsById = createSelector(selectState, state => state.othersReactsByCommentId);
+
 export const selectCommentsByClaimId = createSelector(selectState, selectCommentsById, (state, byId) => {
   const byClaimId = state.byId || {};
   const comments = {};

ui/scss/component/_card.scss

@@ -237,6 +237,7 @@
 .card__header--between {
   @extend .card__header;
   justify-content: space-between;
+  align-items: center;
   flex-wrap: wrap;
 }
 

ui/scss/component/_comments.scss

@@ -13,6 +13,16 @@ $thumbnailWidthSmall: 1.5rem;
   flex: 1;
 }
 
+.comment__sort {
+  margin: var(--spacing-s) 0;
+  display: block;
+
+  @media (min-width: $breakpoint-small) {
+    margin-top: 0;
+    display: inline;
+  }
+}
+
 .comment__create {
   padding-bottom: var(--spacing-m);
   font-size: var(--font-small);
@@ -146,18 +156,31 @@ $thumbnailWidthSmall: 1.5rem;
 
 .comment__author {
   text-overflow: ellipsis;
-  padding-right: var(--spacing-xs);
+  margin-right: var(--spacing-xs);
   height: 100%;
 }
 
 .comment__time {
+  @extend .button--uri-indicator;
   opacity: 0.5;
   white-space: nowrap;
   height: 100%;
+
+  &:focus {
+    @include linkFocus;
+  }
 }
 
 .comment__menu {
   align-self: flex-end;
+
+  button {
+    border-radius: var(--border-radius);
+
+    &:focus {
+      @include linkFocus;
+    }
+  }
 }
 
 .comment__char-count {
@@ -227,6 +250,13 @@ $thumbnailWidthSmall: 1.5rem;
   font-size: var(--font-xsmall);
 }
 
+.comment__action,
+.comment__author {
+  &:focus {
+    @include linkFocus;
+  }
+}
+
 .comment__action--active {
   .icon {
     fill: var(--color-primary-alt);

ui/scss/component/_wunderbar.scss

@@ -88,7 +88,7 @@
   display: flex;
   flex-direction: row;
   justify-items: flex-start;
-  padding: var(--spacing-s) var(--spacing-s);
+  padding: var(--spacing-s);
 
   &:not(:first-of-type) {
     border-top: 1px solid transparent;

ui/scss/init/_mixins.scss

@@ -158,6 +158,11 @@
   box-shadow: 0 0 0 3px var(--color-focus);
 }
 
+@mixin linkFocus {
+  background-color: var(--color-link-focus-bg);
+  box-shadow: 0 0 0 5px var(--color-link-focus-bg);
+}
+
 @mixin underline($text-color: var(--lbry-black), $whitespace-color: var(--lbry-white)) {
   @include selection($text-color, $whitespace-color);
 

ui/scss/themes/dark.scss

@@ -33,6 +33,7 @@
   --color-button-alt-text: #e2e9f0;
   --color-header-button: #434b54;
   --color-button-border: var(--color-gray-5);
+  --color-link-focus-bg: #333a41;
 
   // Color
   --color-focus: #2d69a5;

ui/scss/themes/light.scss

@@ -7,6 +7,7 @@
   --color-navigation-active-text: var(--color-primary);
   --color-navigation-hover: var(--color-gray-1);
   --color-navigation-hover-text: #3f3f3f;
+  --color-link-focus-bg: #f1f1f1;
 
   --color-header-button: var(--color-button-alt-bg);
   --color-button-border: var(--color-gray-3);

ui/util/comments.js

@@ -0,0 +1,68 @@
+// @flow
+import * as REACTION_TYPES from 'constants/reactions';
+import { SORT_COMMENTS_NEW, SORT_COMMENTS_BEST, SORT_COMMENTS_CONTROVERSIAL } from 'constants/comment';
+
+// Mostly taken from Reddit's sorting functions
+// https://github.com/reddit-archive/reddit/blob/master/r2/r2/lib/db/_sorts.pyx
+
+export function sortComments(comments: ?Array<Comment>, reactionsById: {}, method: string): Array<Comment> {
+  if (!comments) {
+    return [];
+  }
+
+  return comments.slice().sort((a, b) => {
+    if (method === SORT_COMMENTS_NEW) {
+      return 0;
+    }
+
+    const aReactions = reactionsById[a.comment_id];
+    const bReactions = reactionsById[b.comment_id];
+    const aLikes = (aReactions && aReactions[REACTION_TYPES.LIKE]) || 0;
+    const aDislikes = (aReactions && aReactions[REACTION_TYPES.DISLIKE]) || 0;
+    const bLikes = (bReactions && bReactions[REACTION_TYPES.LIKE]) || 0;
+    const bDislikes = (bReactions && bReactions[REACTION_TYPES.DISLIKE]) || 0;
+
+    if (method === SORT_COMMENTS_CONTROVERSIAL) {
+      if (aLikes === 0 && aDislikes === 0) {
+        return 1;
+      } else if (bLikes === 0 && bDislikes === 0) {
+        return -1;
+      }
+
+      const aMagnitude = aLikes + aDislikes;
+      const bMagnitude = bLikes + bDislikes;
+
+      const aBalance = aLikes > aDislikes ? aDislikes / aLikes : aLikes / aDislikes;
+      const bBalance = bLikes > bDislikes ? bDislikes / bLikes : bLikes / bDislikes;
+
+      return bMagnitude ** bBalance - aMagnitude ** aBalance;
+    }
+
+    if (method === SORT_COMMENTS_BEST) {
+      const aN = aLikes + aDislikes;
+      const bN = bLikes + bDislikes;
+
+      if (aN === 0) {
+        return 1;
+      } else if (bN === 0) {
+        return -1;
+      }
+
+      const z = 1.281551565545; // 80% confidence
+      const aP = aLikes / aN;
+      const bP = bLikes / bN;
+
+      const aLeft = aP + (1 / (2 * aN)) * z * z;
+      const aRight = z * Math.sqrt((aP * (1 - aP)) / aN + (z * z) / (4 * aN * aN));
+      const aUnder = 1 + (1 / aN) * z * z;
+
+      const bLeft = bP + (1 / (2 * bN)) * z * z;
+      const bRight = z * Math.sqrt((bP * (1 - bP)) / bN + (z * z) / (4 * bN * bN));
+      const bUnder = 1 + (1 / bN) * z * z;
+
+      return (bLeft - bRight) / bUnder - (aLeft - aRight) / aUnder;
+    }
+
+    return 0;
+  });
+}