Merge pull request #12870 from notbakaneko/feature/move-sort-discussions-state

Move discussion sort state into discussions state

Author: nanaya

resources/js/beatmap-discussions/discussions-state.ts

@@ -19,6 +19,7 @@ import { parseJsonNullable, storeJson } from 'utils/json';
 import { Filter, filters } from './current-discussions';
 import DiscussionMode, { discussionModes } from './discussion-mode';
 import DiscussionPage, { isDiscussionPage } from './discussion-page';
+import Sort from './sort';
 
 const defaultFilterPraise = new Set<BeatmapsetStatus>(['approved', 'ranked']);
 const jsonId = 'json-discussions-state';
@@ -69,6 +70,12 @@ export default class DiscussionsState {
   @observable selectedNominatedRulesets: Ruleset[] = [];
   @observable selectedUserId: number | null = null;
   @observable showDeleted = true; // this toggle only affects All and deleted discussion filters, other filters don't show deleted
+  @observable sort: Record<DiscussionMode, Sort> = {
+    general: 'updated_at',
+    generalAll: 'updated_at',
+    reviews: 'updated_at',
+    timeline: 'timeline',
+  };
 
   private previousFilter: Filter = 'total';
   private previousPage: DiscussionPage = 'general';
@@ -87,6 +94,13 @@ export default class DiscussionsState {
     return beatmap;
   }
 
+  @computed
+  get currentSort() {
+    return this.currentPage === 'events'
+      ? 'timeline' // returning any valid mode is fine.
+      : this.sort[this.currentPage];
+  }
+
   /**
    * Discussions for the current beatmap grouped by filters
    */

resources/js/beatmap-discussions/discussions.tsx

@@ -4,81 +4,32 @@
 import IconExpand from 'components/icon-expand';
 import BeatmapsetDiscussionJson, { BeatmapsetDiscussionJsonForShow } from 'interfaces/beatmapset-discussion-json';
 import BeatmapsetDiscussionsStore from 'interfaces/beatmapset-discussions-store';
-import { action, computed, makeObservable, observable } from 'mobx';
+import { action, computed, makeObservable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { canModeratePosts } from 'utils/beatmapset-discussion-helper';
 import { classWithModifiers } from 'utils/css';
 import { trans } from 'utils/lang';
 import { Discussion } from './discussion';
-import DiscussionMode from './discussion-mode';
 import DiscussionsState from './discussions-state';
+import Sort, { sortPresets } from './sort';
 
 const bn = 'beatmap-discussions';
 
-const sortPresets = {
-  created_at: {
-    sort(a: BeatmapsetDiscussionJson, b: BeatmapsetDiscussionJson) {
-      return a.created_at === b.created_at
-        ? a.id - b.id
-        : Date.parse(a.created_at) - Date.parse(b.created_at);
-    },
-    text: trans('beatmaps.discussions.sort.created_at'),
-  },
-  // there's obviously no timeline field
-  timeline: {
-    sort(a: BeatmapsetDiscussionJson, b: BeatmapsetDiscussionJson) {
-      // TODO: this shouldn't be called when not timeline, anyway.
-      if (a.timestamp == null || b.timestamp == null) {
-        return 0;
-      }
-
-      return a.timestamp === b.timestamp
-        ? a.id - b.id
-        : a.timestamp - b.timestamp;
-    },
-    text: trans('beatmaps.discussions.sort.timeline'),
-  },
-  updated_at: {
-    sort(a: BeatmapsetDiscussionJson, b: BeatmapsetDiscussionJson) {
-      return a.last_post_at === b.last_post_at
-        ? b.id - a.id
-        : Date.parse(b.last_post_at) - Date.parse(a.last_post_at);
-    },
-    text: trans('beatmaps.discussions.sort.updated_at'),
-  },
-};
-
-type Sort = 'created_at' | 'updated_at' | 'timeline';
-
 interface Props {
   discussionsState: DiscussionsState;
   store: BeatmapsetDiscussionsStore;
 }
 
 @observer
 export class Discussions extends React.Component<Props> {
-  @observable private sort: Record<DiscussionMode, Sort> = {
-    general: 'updated_at',
-    generalAll: 'updated_at',
-    reviews: 'updated_at',
-    timeline: 'timeline',
-  };
-
-  @computed
-  private get currentSort() {
-    return this.discussionsState.currentPage === 'events'
-      ? 'timeline' // returning any valid mode is fine.
-      : this.sort[this.discussionsState.currentPage];
-  }
-
   private get discussionsState() {
     return this.props.discussionsState;
   }
 
   @computed
   private get isTimelineVisible() {
-    return this.discussionsState.currentPage === 'timeline' && this.currentSort === 'timeline';
+    return this.discussionsState.currentPage === 'timeline' && this.discussionsState.currentSort === 'timeline';
   }
 
   private get store() {
@@ -94,7 +45,7 @@ export class Discussions extends React.Component<Props> {
     return discussions.slice().sort((a: BeatmapsetDiscussionJson, b: BeatmapsetDiscussionJson) => {
       const mapperNoteCompare =
         // no sticky for timeline sort
-        this.currentSort !== 'timeline'
+        this.discussionsState.currentSort !== 'timeline'
         // stick the mapper note
         && [a.message_type, b.message_type].includes('mapper_note')
         // but if both are mapper note, do base comparison
@@ -103,7 +54,7 @@ export class Discussions extends React.Component<Props> {
       if (mapperNoteCompare) {
         return a.message_type === 'mapper_note' ? -1 : 1;
       } else {
-        return sortPresets[this.currentSort].sort(a, b);
+        return sortPresets[this.discussionsState.currentSort].sort(a, b);
       }
     });
   }
@@ -139,7 +90,7 @@ export class Discussions extends React.Component<Props> {
   @action
   private readonly handleChangeSort = (e: React.SyntheticEvent<HTMLButtonElement>) => {
     if (this.discussionsState.currentPage === 'events') return;
-    this.sort[this.discussionsState.currentPage] = e.currentTarget.dataset.sortPreset as Sort;
+    this.discussionsState.sort[this.discussionsState.currentPage] = e.currentTarget.dataset.sortPreset as Sort;
   };
 
   @action
@@ -237,7 +188,7 @@ export class Discussions extends React.Component<Props> {
           {presets.map((preset) => (
             <button
               key={preset}
-              className={classWithModifiers('sort__item', 'button', { active: this.currentSort === preset })}
+              className={classWithModifiers('sort__item', 'button', { active: this.discussionsState.currentSort === preset })}
               data-sort-preset={preset}
               onClick={this.handleChangeSort}
               type='button'

resources/js/beatmap-discussions/sort.ts

@@ -0,0 +1,42 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+import BeatmapsetDiscussionJson from 'interfaces/beatmapset-discussion-json';
+import { trans } from 'utils/lang';
+
+export const sortPresets = {
+  created_at: {
+    sort(a: BeatmapsetDiscussionJson, b: BeatmapsetDiscussionJson) {
+      return a.created_at === b.created_at
+        ? a.id - b.id
+        : Date.parse(a.created_at) - Date.parse(b.created_at);
+    },
+    text: trans('beatmaps.discussions.sort.created_at'),
+  },
+  // there's obviously no timeline field
+  timeline: {
+    sort(a: BeatmapsetDiscussionJson, b: BeatmapsetDiscussionJson) {
+      // TODO: this shouldn't be called when not timeline, anyway.
+      if (a.timestamp == null || b.timestamp == null) {
+        return 0;
+      }
+
+      return a.timestamp === b.timestamp
+        ? a.id - b.id
+        : a.timestamp - b.timestamp;
+    },
+    text: trans('beatmaps.discussions.sort.timeline'),
+  },
+  updated_at: {
+    sort(a: BeatmapsetDiscussionJson, b: BeatmapsetDiscussionJson) {
+      return a.last_post_at === b.last_post_at
+        ? b.id - a.id
+        : Date.parse(b.last_post_at) - Date.parse(a.last_post_at);
+    },
+    text: trans('beatmaps.discussions.sort.updated_at'),
+  },
+};
+
+type Sort = 'created_at' | 'updated_at' | 'timeline';
+
+export default Sort;