Added comment sorting

• Added:
- comment sorting to comments on status page
- new comment sorting options popover, web setting, constants

app/javascript/gabsocial/actions/settings.js

@@ -27,7 +27,7 @@ const debouncedSave = debounce((dispatch, getState) => {
   api().put('/api/web/settings', { data })
     .then(() => dispatch({ type: SETTING_SAVE }))
     .catch(() => { /* */ })
-}, 500, { trailing: true })
+}, 50, { trailing: true })
 
 export function saveSettings() {
   return (dispatch, getState) => debouncedSave(dispatch, getState)

app/javascript/gabsocial/components/popover/comment_sorting_options_popover.js

@@ -0,0 +1,71 @@
+import { defineMessages, injectIntl } from 'react-intl'
+import { closePopover } from '../../actions/popover'
+import { changeSetting, saveSettings } from '../../actions/settings'
+import {
+  COMMENT_SORTING_TYPE_NEWEST,
+  COMMENT_SORTING_TYPE_OLDEST,
+  COMMENT_SORTING_TYPE_TOP,
+} from '../../constants'
+import PopoverLayout from './popover_layout'
+import List from '../list'
+
+const messages = defineMessages({
+  oldest: { id: 'comment_sort.oldest', defaultMessage: 'Oldest' },
+  newest: { id: 'comment_sort.newest', defaultMessage: 'Recent' },
+  top: { id: 'comment_sort.top', defaultMessage: 'Most Liked' },
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  onSetCommentSortingSetting(type) {
+    dispatch(changeSetting(['commentSorting'], type))
+    dispatch(saveSettings())
+    dispatch(closePopover())
+  },
+})
+
+export default
+@injectIntl
+@connect(null, mapDispatchToProps)
+class CommentSortingOptionsPopover extends PureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    onSetCommentSortingSetting: PropTypes.func.isRequired,
+    isXS: PropTypes.bool,
+  }
+
+  handleOnClick = (type) => {
+    this.props.onSetCommentSortingSetting(type)
+  }
+
+  render() {
+    const { intl, isXS } = this.props
+
+    return (
+      <PopoverLayout width={180} isXS={isXS}>
+        <List
+          size='large'
+          scrollKey='comment_sorting_options'
+          items={[
+            {
+              hideArrow: true,
+              title: intl.formatMessage(messages.newest),
+              onClick: () => this.handleOnClick(COMMENT_SORTING_TYPE_NEWEST),
+            },
+            {
+              hideArrow: true,
+              title: intl.formatMessage(messages.oldest),
+              onClick: () => this.handleOnClick(COMMENT_SORTING_TYPE_OLDEST),
+            },
+            {
+              hideArrow: true,
+              title: intl.formatMessage(messages.top),
+              onClick: () => this.handleOnClick(COMMENT_SORTING_TYPE_TOP),
+            },
+          ]}
+          small
+        />
+      </PopoverLayout>
+    )
+  }
+}

app/javascript/gabsocial/components/popover/popover_root.js

@@ -1,29 +1,27 @@
 import {
   BREAKPOINT_EXTRA_SMALL,
+  POPOVER_COMMENT_SORTING_OPTIONS,
   POPOVER_DATE_PICKER,
   POPOVER_EMOJI_PICKER,
   POPOVER_GROUP_OPTIONS,
   POPOVER_NAV_SETTINGS,
   POPOVER_PROFILE_OPTIONS,
-  POPOVER_REPOST_OPTIONS,
   POPOVER_SEARCH,
   POPOVER_SIDEBAR_MORE,
   POPOVER_STATUS_OPTIONS,
-  POPOVER_STATUS_SHARE,
   POPOVER_STATUS_VISIBILITY,
   POPOVER_USER_INFO,
 } from '../../constants'
 import {
+  CommentSortingOptionsPopover,
   DatePickerPopover,
   EmojiPickerPopover,
   GroupOptionsPopover,
   NavSettingsPopover,
   ProfileOptionsPopover,
-  RepostOptionsPopover,
   SearchPopover,
   SidebarMorePopover,
   StatusOptionsPopover,
-  StatusSharePopover,
   StatusVisibilityPopover,
   UserInfoPopover,
 } from '../../features/ui/util/async_components'
@@ -37,16 +35,15 @@ import PopoverBase from './popover_base'
 const initialState = getWindowDimension()
 
 const POPOVER_COMPONENTS = {}
+POPOVER_COMPONENTS[POPOVER_COMMENT_SORTING_OPTIONS] = CommentSortingOptionsPopover
 POPOVER_COMPONENTS[POPOVER_DATE_PICKER] = DatePickerPopover
 POPOVER_COMPONENTS[POPOVER_EMOJI_PICKER] = EmojiPickerPopover
 POPOVER_COMPONENTS[POPOVER_GROUP_OPTIONS] = GroupOptionsPopover
 POPOVER_COMPONENTS[POPOVER_NAV_SETTINGS] = NavSettingsPopover
 POPOVER_COMPONENTS[POPOVER_PROFILE_OPTIONS] = ProfileOptionsPopover
-POPOVER_COMPONENTS[POPOVER_REPOST_OPTIONS] = RepostOptionsPopover
 POPOVER_COMPONENTS[POPOVER_SEARCH] = SearchPopover
 POPOVER_COMPONENTS[POPOVER_SIDEBAR_MORE] = SidebarMorePopover
 POPOVER_COMPONENTS[POPOVER_STATUS_OPTIONS] = StatusOptionsPopover
-POPOVER_COMPONENTS[POPOVER_STATUS_SHARE] = StatusSharePopover
 POPOVER_COMPONENTS[POPOVER_STATUS_VISIBILITY] = StatusVisibilityPopover
 POPOVER_COMPONENTS[POPOVER_USER_INFO] = UserInfoPopover
 

app/javascript/gabsocial/components/status.js

@@ -1,25 +1,36 @@
+import { Fragment } from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes'
-import { injectIntl } from 'react-intl'
+import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { HotKeys } from 'react-hotkeys'
-import classNames from 'classnames/bind'
+import {
+  CX,
+  COMMENT_SORTING_TYPE_NEWEST,
+  COMMENT_SORTING_TYPE_TOP,
+} from '../constants'
 import { me, displayMedia, compactMode } from '../initial_state'
 import scheduleIdleTask from '../utils/schedule_idle_task'
 import ComposeFormContainer from '../features/compose/containers/compose_form_container'
 import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
-import ColumnIndicator from './column_indicator'
 import StatusContent from './status_content'
 import StatusPrepend from './status_prepend'
 import StatusActionBar from './status_action_bar'
 import StatusMedia from './status_media'
 import StatusHeader from './status_header'
 import CommentList from './comment_list'
+import Button from './button'
+import Text from './text'
 
 // We use the component (and not the container) since we do not want
 // to use the progress bar to show download progress
 import Bundle from '../features/ui/util/bundle'
 
-const cx = classNames.bind(_s)
+const messages = defineMessages({
+  sortBy: { id: 'comment_sort.title', defaultMessage: 'Sort by' },
+  oldest: { id: 'comment_sort.oldest', defaultMessage: 'Oldest' },
+  newest: { id: 'comment_sort.newest', defaultMessage: 'Recent' },
+  top: { id: 'comment_sort.top', defaultMessage: 'Most Liked' },
+})
 
 export const textForScreenReader = (intl, status, rebloggedByText = false) => {
   if (!intl || !status) return ''
@@ -97,7 +108,9 @@ class Status extends ImmutablePureComponent {
     commentsLimited: PropTypes.bool,
     onOpenLikes: PropTypes.func.isRequired,
     onOpenReposts: PropTypes.func.isRequired,
+    onCommentSortOpen: PropTypes.func.isRequired,
     isComposeModalOpen: PropTypes.bool,
+    commentSortingType: PropTypes.string,
   }
 
   // Avoid checking props that are functions (and whose equality will always
@@ -112,6 +125,7 @@ class Status extends ImmutablePureComponent {
     'isHidden',
     'isIntersecting',
     'isComment',
+    'commentSortingType',
   ]
 
   state = {
@@ -361,11 +375,19 @@ class Status extends ImmutablePureComponent {
     }
   }
 
+  handleOnCommentSortOpen = () => {
+    this.props.onCommentSortOpen(this.commentSortButtonRef)
+  }
+
   handleRef = c => {
     this.node = c
     this._measureHeight()
   }
 
+  setCommentSortButtonRef = (c) => {
+    this.commentSortButtonRef = c
+  }
+
   render() {
     const {
       intl,
@@ -380,6 +402,7 @@ class Status extends ImmutablePureComponent {
       isComment,
       contextType,
       isComposeModalOpen,
+      commentSortingType,
     } = this.props
     // const { height } = this.state
 
@@ -389,7 +412,6 @@ class Status extends ImmutablePureComponent {
 
     if (isComment && !ancestorStatus && !isChild) {
       // Wait to load...
-      // return <ColumnIndicator type='loading' />
       return null
     }
 
@@ -408,6 +430,13 @@ class Status extends ImmutablePureComponent {
       }
     }
 
+    let sortByTitle = intl.formatMessage(messages.oldest)
+    if (commentSortingType === COMMENT_SORTING_TYPE_NEWEST) {
+      sortByTitle = intl.formatMessage(messages.newest)
+    } else if (commentSortingType === COMMENT_SORTING_TYPE_TOP) {
+      sortByTitle = intl.formatMessage(messages.top)
+    }
+
     const handlers = (this.props.isMuted || isChild) ? {} : {
       reply: this.handleHotkeyReply,
       favorite: this.handleHotkeyFavorite,
@@ -421,11 +450,11 @@ class Status extends ImmutablePureComponent {
       toggleSensitive: this.handleHotkeyToggleSensitive,
     }
 
-    const parentClasses = cx({
+    const parentClasses = CX({
       pb15: !isChild && !compactMode,
     })
 
-    const containerClasses = cx({
+    const containerClasses = CX({
       default: 1,
       radiusSmall: !isChild && !compactMode,
       bgPrimary: !isChild,
@@ -436,7 +465,7 @@ class Status extends ImmutablePureComponent {
       borderColorSecondary: !isChild && compactMode,
     })
 
-    const containerClassesXS = cx({
+    const containerClassesXS = CX({
       default: 1,
       bgPrimary: !isChild,
       boxShadowBlock: !isChild && !compactMode,
@@ -445,7 +474,7 @@ class Status extends ImmutablePureComponent {
       borderColorSecondary: !isChild,
     })
 
-    const innerContainerClasses = cx({
+    const innerContainerClasses = CX({
       default: 1,
       overflowHidden: 1,
       radiusSmall: isChild,
@@ -560,17 +589,36 @@ class Status extends ImmutablePureComponent {
 
                   {
                     descendantsIds && !compactMode && !isChild && descendantsIds.size > 0 &&
+                    <Fragment>
                       <div className={[_s.default, _s.mr10, _s.ml10, _s.mb10, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')} />
-                  }
 
                       {
-                    descendantsIds && !compactMode && !isChild && descendantsIds.size > 0 &&
+                        !commentsLimited &&
+                        <div className={[_s.default, _s.px15, _s.py5, _s.mb5, _s.flexRow].join(' ')}>
+                          <Text color='secondary' size='small'>
+                            {intl.formatMessage(messages.sortBy)}
+                          </Text>
+                          <Button
+                            isText
+                            backgroundColor='none'
+                            color='secondary'
+                            className={_s.ml5}
+                            buttonRef={this.setCommentSortButtonRef}
+                            onClick={this.handleOnCommentSortOpen}
+                          >
+                            <Text color='inherit' weight='medium' size='small'>
+                              {sortByTitle}
+                            </Text>
+                          </Button>
+                        </div>
+                      }
                       <CommentList
                         ancestorAccountId={status.getIn(['account', 'id'])}
                         commentsLimited={commentsLimited}
                         descendants={descendantsIds}
                         onViewComments={this.handleClick}
                       />
+                    </Fragment>
                   }
                 </div>
               </div>

app/javascript/gabsocial/constants.js

@@ -19,6 +19,7 @@ export const URL_GAB_PRO = 'https://pro.gab.com'
 
 export const PLACEHOLDER_MISSING_HEADER_SRC = '/original/missing.png'
 
+export const POPOVER_COMMENT_SORTING_OPTIONS = 'COMMENT_SORTING_OPTIONS'
 export const POPOVER_DATE_PICKER = 'DATE_PICKER'
 export const POPOVER_EMOJI_PICKER = 'EMOJI_PICKER'
 export const POPOVER_GROUP_OPTIONS = 'GROUP_OPTIONS'
@@ -63,6 +64,10 @@ export const MODAL_UNAUTHORIZED = 'UNAUTHORIZED'
 export const MODAL_UNFOLLOW = 'UNFOLLOW'
 export const MODAL_VIDEO = 'VIDEO'
 
+export const COMMENT_SORTING_TYPE_NEWEST = 'newest'
+export const COMMENT_SORTING_TYPE_OLDEST = 'oldest'
+export const COMMENT_SORTING_TYPE_TOP = 'most-liked'
+
 export const FONT_SIZES_EXTRA_SMALL = '12px'
 export const FONT_SIZES_SMALL = '13px'
 export const FONT_SIZES_NORMAL = '14px'

app/javascript/gabsocial/containers/status_container.js

@@ -30,26 +30,69 @@ import {
 import {
   MODAL_BOOST,
   MODAL_CONFIRM,
+  POPOVER_COMMENT_SORTING_OPTIONS,
+  COMMENT_SORTING_TYPE_OLDEST,
+  COMMENT_SORTING_TYPE_NEWEST,
+  COMMENT_SORTING_TYPE_TOP,
 } from '../constants'
 import { makeGetStatus } from '../selectors'
 import Status from '../components/status';
 
-const getDescendants = (state, status, highlightStatusId) => {
+
+const sortReplies = (replyIds, state, type) => {
+  if (!replyIds) return replyIds
+
+  if (type === COMMENT_SORTING_TYPE_OLDEST || !type) {
+    return replyIds // default
+  } else if (type === COMMENT_SORTING_TYPE_NEWEST) {
+    return replyIds.reverse()
+  } else if (type === COMMENT_SORTING_TYPE_TOP) {
+    let statusList = []
+    replyIds.forEach((replyId) => {
+      const status = state.getIn(['statuses', replyId])
+      if (status) {
+        statusList.push({
+          id: replyId,
+          likeCount: status.get('favourites_count'),
+        })
+      }
+    })
+    statusList.sort((a, b) => parseFloat(b.likeCount) - parseFloat(a.likeCount))
+    
+    let newReplyIds = ImmutableList()
+    for (let i = 0; i < statusList.length; i++) {
+      const block = statusList[i];
+      newReplyIds = newReplyIds.set(i, block.id)   
+    }
+
+    return newReplyIds
+  }
+
+  return replyIds
+}
+
+const getDescendants = (state, status, highlightStatusId, commentSortingType) => {
   let descendantsIds = ImmutableList()
   let indent = -1
+  let index = 0
 
   descendantsIds = descendantsIds.withMutations(mutable => {
     const ids = [status.get('id')]
 
     while (ids.length > 0) {
       let id = ids.shift()
-      const replies = state.getIn(['contexts', 'replies', id])
+      
+      let replies = state.getIn(['contexts', 'replies', id])
+      // Sort only Top-level replies
+      if (index === 0) {
+        replies = sortReplies(replies, state, commentSortingType)
+      }
 
       if (status.get('id') !== id) {
         mutable.push(ImmutableMap({
           statusId: id,
           indent: indent,
-          isHighlighted: highlightStatusId === id,
+          isHighlighted: !!highlightStatusId && highlightStatusId === id,
         }))
       }
 
@@ -62,6 +105,8 @@ const getDescendants = (state, status, highlightStatusId) => {
       } else {
         indent = 0 // reset
       }
+
+      index++
     }
   })
 
@@ -74,6 +119,7 @@ const makeMapStateToProps = () => {
   const mapStateToProps = (state, props) => {
     const statusId = props.id || props.params.statusId
     const username = props.params ? props.params.username : undefined
+    const commentSortingType = state.getIn(['settings', 'commentSorting'])
 
     const status = getStatus(state, {
       id: statusId,
@@ -113,7 +159,7 @@ const makeMapStateToProps = () => {
     //
 
     if (status && status.get('replies_count') > 0 && !fetchedContext) {
-      descendantsIds = getDescendants(state, status)
+      descendantsIds = getDescendants(state, status, null, commentSortingType)
     }
 
     const isComment = !!status ? !!status.get('in_reply_to_id') : false
@@ -123,6 +169,7 @@ const makeMapStateToProps = () => {
       ancestorStatus,
       descendantsIds,
       isComment,
+      commentSortingType,
       isComposeModalOpen: state.getIn(['modal', 'modalType']) === 'COMPOSE',
     }
   }
@@ -243,6 +290,15 @@ const mapDispatchToProps = (dispatch) => ({
       }
     }
   },
+
+  onCommentSortOpen(targetRef, callback) {
+    dispatch(openPopover(POPOVER_COMMENT_SORTING_OPTIONS, {
+      targetRef,
+      callback,
+      position: 'top',
+    }))
+  }
+
 });
 
 export default connect(makeMapStateToProps, mapDispatchToProps)(Status);

app/javascript/gabsocial/features/ui/util/async_components.js

@@ -6,6 +6,7 @@ export function BlockDomainModal() { return import(/* webpackChunkName: "compone
 export function BlockedAccounts() { return import(/* webpackChunkName: "features/blocked_accounts" */'../../blocked_accounts') }
 export function BlockedDomains() { return import(/* webpackChunkName: "features/blocked_domains" */'../../blocked_domains') }
 export function BoostModal() { return import(/* webpackChunkName: "components/boost_modal" */'../../../components/modal/boost_modal') }
+export function CommentSortingOptionsPopover() { return import(/* webpackChunkName: "components/comment_sorting_options_popover" */'../../../components/popover/comment_sorting_options_popover') }
 export function CommunityTimeline() { return import(/* webpackChunkName: "features/community_timeline" */'../../community_timeline') }
 export function CommunityTimelineSettingsModal() { return import(/* webpackChunkName: "components/community_timeline_settings_modal" */'../../../components/modal/community_timeline_settings_modal') }
 export function Compose() { return import(/* webpackChunkName: "features/compose" */'../../compose') }

app/javascript/gabsocial/reducers/settings.js

@@ -2,6 +2,7 @@ import { SETTING_CHANGE, SETTING_SAVE } from '../actions/settings'
 import { STORE_HYDRATE } from '../actions/store'
 import { EMOJI_USE } from '../actions/emojis'
 import { LIST_DELETE_SUCCESS, LIST_FETCH_FAIL } from '../actions/lists'
+import { COMMENT_SORTING_TYPE_OLDEST } from '../constants'
 import { Map as ImmutableMap, fromJS } from 'immutable'
 import uuid from '../utils/uuid'
 
@@ -9,6 +10,7 @@ const initialState = ImmutableMap({
   saved: true,
   onboarded: false,
   skinTone: 1,
+  commentSorting: COMMENT_SORTING_TYPE_OLDEST,
 
   displayOptions: ImmutableMap({
     fontSize: 'normal',