Added comment sorting

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

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