Convert beatmap discussions main component to typescript

.github/workflows/lint.yml

@@ -49,7 +49,7 @@ jobs:
       - name: Install js dependencies
         run: yarn --frozen-lockfile
 
-      - run: 'yarn lint --max-warnings 96 > /dev/null'
+      - run: 'yarn lint --max-warnings 95 > /dev/null'
 
       - run: ./bin/update_licence.sh -nf
 

resources/js/beatmap-discussions-history/main.tsx

@@ -1,98 +1,50 @@
 // Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0.
 // See the LICENCE file in the repository root for full licence text.
 
-import { BeatmapsContext } from 'beatmap-discussions/beatmaps-context';
-import { BeatmapsetsContext } from 'beatmap-discussions/beatmapsets-context';
 import { Discussion } from 'beatmap-discussions/discussion';
-import { DiscussionsContext } from 'beatmap-discussions/discussions-context';
 import BeatmapsetCover from 'components/beatmapset-cover';
 import BeatmapsetDiscussionsBundleJson from 'interfaces/beatmapset-discussions-bundle-json';
-import { keyBy } from 'lodash';
-import { computed, makeObservable } from 'mobx';
-import { observer } from 'mobx-react';
-import { deletedUserJson } from 'models/user';
 import * as React from 'react';
+import BeatmapsetDiscussionsBundleStore from 'stores/beatmapset-discussions-bundle-store';
 import { makeUrl } from 'utils/beatmapset-discussion-helper';
 import { trans } from 'utils/lang';
 
-interface Props {
-  bundle: BeatmapsetDiscussionsBundleJson;
-}
-
-@observer
-export default class Main extends React.Component<Props> {
-  @computed
-  private get beatmaps() {
-    return keyBy(this.props.bundle.beatmaps, 'id');
-  }
-
-  @computed
-  private get beatmapsets() {
-    return keyBy(this.props.bundle.beatmapsets, 'id');
-  }
-
-  @computed
-  private get discussions() {
-    return keyBy(this.props.bundle.included_discussions, 'id');
-  }
-
-  @computed
-  private get users() {
-    const values = keyBy(this.props.bundle.users, 'id');
-    // eslint-disable-next-line id-blacklist
-    values.null = values.undefined = deletedUserJson;
-
-    return values;
-  }
-
-  constructor(props: Props) {
-    super(props);
-
-    makeObservable(this);
-  }
+export default class Main extends React.Component<BeatmapsetDiscussionsBundleJson> {
+  private readonly store = new BeatmapsetDiscussionsBundleStore(this.props);
 
   render() {
     return (
-      <DiscussionsContext.Provider value={this.discussions}>
-        <BeatmapsetsContext.Provider value={this.beatmapsets}>
-          <BeatmapsContext.Provider value={this.beatmaps}>
-            <div className='modding-profile-list modding-profile-list--index'>
-              {this.props.bundle.discussions.length === 0 ? (
-                <div className='modding-profile-list__empty'>
-                  {trans('beatmap_discussions.index.none_found')}
-                </div>
-              ) : (this.props.bundle.discussions.map((discussion) => {
-                // TODO: handle in child component? Refactored state might not have beatmapset here (and uses Map)
-                const beatmapset = this.beatmapsets[discussion.beatmapset_id];
-
-                return beatmapset != null && (
-                  <div key={discussion.id} className='modding-profile-list__row'>
-                    <a
-                      className='modding-profile-list__thumbnail'
-                      href={makeUrl({ discussion })}
-                    >
-                      <BeatmapsetCover
-                        beatmapset={beatmapset}
-                        size='list'
-                      />
-                    </a>
-                    <Discussion
-                      beatmapset={beatmapset}
-                      currentBeatmap={discussion.beatmap_id != null ? this.beatmaps[discussion.beatmap_id] : null}
-                      discussion={discussion}
-                      isTimelineVisible={false}
-                      preview
-                      readonly
-                      showDeleted
-                      users={this.users}
-                    />
-                  </div>
-                );
-              }))}
+      <div className='modding-profile-list modding-profile-list--index'>
+        {this.props.discussions.length === 0 ? (
+          <div className='modding-profile-list__empty'>
+            {trans('beatmap_discussions.index.none_found')}
+          </div>
+        ) : (this.props.discussions.map((discussion) => {
+          // TODO: handle in child component? Refactored state might not have beatmapset here (and uses Map)
+          const beatmapset = this.store.beatmapsets.get(discussion.beatmapset_id);
+
+          return beatmapset != null && (
+            <div key={discussion.id} className='modding-profile-list__row'>
+              <a
+                className='modding-profile-list__thumbnail'
+                href={makeUrl({ discussion })}
+              >
+                <BeatmapsetCover
+                  beatmapset={beatmapset}
+                  size='list'
+                />
+              </a>
+              <Discussion
+                discussion={discussion}
+                discussionsState={null}
+                isTimelineVisible={false}
+                readonly
+                store={this.store}
+              />
             </div>
-          </BeatmapsContext.Provider>
-        </BeatmapsetsContext.Provider>
-      </DiscussionsContext.Provider>
+          );
+        }))}
+      </div>
     );
   }
 }

resources/js/beatmap-discussions/beatmap-list.tsx

@@ -5,7 +5,7 @@ import BeatmapListItem from 'components/beatmap-list-item';
 import BeatmapExtendedJson from 'interfaces/beatmap-extended-json';
 import BeatmapsetJson from 'interfaces/beatmapset-json';
 import UserJson from 'interfaces/user-json';
-import { deletedUser } from 'models/user';
+import { deletedUserJson } from 'models/user';
 import * as React from 'react';
 import { blackoutToggle } from 'utils/blackout';
 import { classWithModifiers } from 'utils/css';
@@ -19,7 +19,7 @@ interface Props {
   currentBeatmap: BeatmapExtendedJson;
   getCount: (beatmap: BeatmapExtendedJson) => number | undefined;
   onSelectBeatmap: (beatmapId: number) => void;
-  users: Partial<Record<number, UserJson>>;
+  users: Map<number | null | undefined, UserJson>;
 }
 
 interface State {
@@ -86,7 +86,7 @@ export default class BeatmapList extends React.PureComponent<Props, State> {
           beatmap={beatmap}
           beatmapUrl={this.props.createLink(beatmap)}
           beatmapset={this.props.beatmapset}
-          mapper={this.props.users[beatmap.user_id] ?? deletedUser}
+          mapper={this.props.users.get(beatmap.user_id) ?? deletedUserJson}
           showNonGuestMapper={false}
         />
         {count != null &&

resources/js/beatmap-discussions/beatmap-owner-editor.tsx

@@ -5,7 +5,7 @@ import { Spinner } from 'components/spinner';
 import UserAvatar from 'components/user-avatar';
 import UserLink from 'components/user-link';
 import BeatmapJson from 'interfaces/beatmap-json';
-import BeatmapsetExtendedJson from 'interfaces/beatmapset-extended-json';
+import BeatmapsetWithDiscussionsJson from 'interfaces/beatmapset-with-discussions-json';
 import UserJson from 'interfaces/user-json';
 import { route } from 'laroute';
 import { action, computed, makeObservable, observable, runInAction } from 'mobx';
@@ -16,17 +16,17 @@ import { onErrorWithCallback } from 'utils/ajax';
 import { classWithModifiers } from 'utils/css';
 import { transparentGif } from 'utils/html';
 import { trans } from 'utils/lang';
-
-type BeatmapsetWithDiscussionJson = BeatmapsetExtendedJson;
+import DiscussionsState from './discussions-state';
 
 interface XhrCollection {
-  updateOwner: JQuery.jqXHR<BeatmapsetWithDiscussionJson>;
+  updateOwner: JQuery.jqXHR<BeatmapsetWithDiscussionsJson>;
   userLookup: JQuery.jqXHR<UserJson>;
 }
 
 interface Props {
   beatmap: BeatmapJson;
   beatmapsetUser: UserJson;
+  discussionsState: DiscussionsState;
   user: UserJson;
   userByName: Map<string, UserJson>;
 }
@@ -245,8 +245,8 @@ export default class BeatmapOwnerEditor extends React.Component<Props> {
       data: { beatmap: { user_id: userId } },
       method: 'PUT',
     });
-    this.xhr.updateOwner.done((data) => runInAction(() => {
-      $.publish('beatmapsetDiscussions:update', { beatmapset: data });
+    this.xhr.updateOwner.done((beatmapset) => runInAction(() => {
+      this.props.discussionsState.update({ beatmapset });
       this.editing = false;
     })).fail(onErrorWithCallback(() => {
       this.updateOwner(userId);

resources/js/beatmap-discussions/beatmaps-owner-editor.tsx

@@ -10,11 +10,13 @@ import * as React from 'react';
 import { group as groupBeatmaps } from 'utils/beatmap-helper';
 import { trans } from 'utils/lang';
 import BeatmapOwnerEditor from './beatmap-owner-editor';
+import DiscussionsState from './discussions-state';
 
 interface Props {
   beatmapset: BeatmapsetExtendedJson;
+  discussionsState: DiscussionsState;
   onClose: () => void;
-  users: Partial<Record<number, UserJson>>;
+  users: Map<number | null | undefined, UserJson>;
 }
 
 @observer
@@ -26,7 +28,7 @@ export default class BeatmapsOwnerEditor extends React.Component<Props> {
 
     // this will be outdated on new props but it's fine
     // as there's separate process handling unknown users
-    for (const user of Object.values(props.users)) {
+    for (const user of this.props.users.values()) {
       if (user != null) {
         this.userByName.set(normaliseUsername(user.username), user);
       }
@@ -61,6 +63,7 @@ export default class BeatmapsOwnerEditor extends React.Component<Props> {
                 key={beatmap.id}
                 beatmap={beatmap}
                 beatmapsetUser={beatmapsetUser}
+                discussionsState={this.props.discussionsState}
                 user={this.getUser(beatmap.user_id)}
                 userByName={this.userByName}
               />
@@ -82,6 +85,6 @@ export default class BeatmapsOwnerEditor extends React.Component<Props> {
   }
 
   private getUser(userId: number) {
-    return this.props.users[userId] ?? deletedUserJson;
+    return this.props.users.get(userId) ?? deletedUserJson;
   }
 }

resources/js/beatmap-discussions/chart.tsx

@@ -7,7 +7,7 @@ import { formatTimestamp, makeUrl } from 'utils/beatmapset-discussion-helper';
 import { classWithModifiers } from 'utils/css';
 
 interface Props {
-  discussions: Partial<Record<string, BeatmapsetDiscussionJson>>;
+  discussions: BeatmapsetDiscussionJson[];
   duration: number;
 }
 
@@ -22,7 +22,7 @@ export default function Chart(props: Props) {
   const items: React.ReactNode[] = [];
 
   if (props.duration !== 0) {
-    Object.values(props.discussions).forEach((discussion) => {
+    props.discussions.forEach((discussion) => {
       if (discussion == null || discussion.timestamp == null) return;
 
       let className = classWithModifiers('beatmapset-discussions-chart__item', [

resources/js/beatmap-discussions/discussion-mode.ts

@@ -1,10 +1,9 @@
 // Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0.
 // See the LICENCE file in the repository root for full licence text.
 
-// In display order on discussion page tabs
-export const discussionPages = ['reviews', 'generalAll', 'general', 'timeline', 'events'] as const;
-export type DiscussionPage = (typeof discussionPages)[number];
+import DiscussionPage from './discussion-page';
 
 type DiscussionMode = Exclude<DiscussionPage, 'events'>;
+export const discussionModes: Readonly<DiscussionMode[]> = ['reviews', 'generalAll', 'general', 'timeline'] as const;
 
 export default DiscussionMode;

resources/js/beatmap-discussions/discussion-page.ts

@@ -0,0 +1,14 @@
+// Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+// In display order on discussion page tabs
+export const discussionPages = ['reviews', 'generalAll', 'general', 'timeline', 'events'] as const;
+type DiscussionPage = (typeof discussionPages)[number];
+
+const discussionPageSet = new Set<unknown>(discussionPages);
+
+export function isDiscussionPage(value: unknown): value is DiscussionPage {
+  return discussionPageSet.has(value);
+}
+
+export default DiscussionPage;

resources/js/beatmap-discussions/discussion-vote-buttons.tsx

@@ -3,6 +3,7 @@
 
 import UserListPopup, { createTooltip } from 'components/user-list-popup';
 import { BeatmapsetDiscussionJsonForShow } from 'interfaces/beatmapset-discussion-json';
+import BeatmapsetWithDiscussionsJson from 'interfaces/beatmapset-with-discussions-json';
 import UserJson from 'interfaces/user-json';
 import { route } from 'laroute';
 import { action, computed, makeObservable, observable } from 'mobx';
@@ -14,20 +15,22 @@ import { onError } from 'utils/ajax';
 import { classWithModifiers } from 'utils/css';
 import { trans } from 'utils/lang';
 import { hideLoadingOverlay, showLoadingOverlay } from 'utils/loading-overlay';
+import DiscussionsState from './discussions-state';
 
 const voteTypes = ['up', 'down'] as const;
 type VoteType = typeof voteTypes[number];
 
 interface Props {
   cannotVote: boolean;
   discussion: BeatmapsetDiscussionJsonForShow;
-  users: Partial<Record<number | string, UserJson>>;
+  discussionsState: DiscussionsState;
+  users: Map<number | null | undefined, UserJson>;
 }
 
 @observer
 export default class DiscussionVoteButtons extends React.Component<Props> {
   private readonly tooltips: Partial<Record<VoteType, JQuery>> = {};
-  @observable private voteXhr: JQuery.jqXHR<BeatmapsetDiscussionJsonForShow> | null = null;
+  @observable private voteXhr: JQuery.jqXHR<BeatmapsetWithDiscussionsJson> | null = null;
 
   @computed
   private get canDownvote() {
@@ -68,7 +71,7 @@ export default class DiscussionVoteButtons extends React.Component<Props> {
       ? trans(`beatmaps.discussions.votes.none.${type}`)
       : `${trans(`beatmaps.discussions.votes.latest.${type}`)}:`;
 
-    const users = this.props.discussion.votes.voters[type].map((id) => this.props.users[id] ?? { id });
+    const users = this.props.discussion.votes.voters[type].map((id) => this.props.users.get(id) ?? { id });
 
     return renderToStaticMarkup(<UserListPopup count={count} title={title} users={users} />);
   }
@@ -89,7 +92,7 @@ export default class DiscussionVoteButtons extends React.Component<Props> {
     });
 
     this.voteXhr
-      .done((beatmapset) => $.publish('beatmapsetDiscussions:update', { beatmapset }))
+      .done((beatmapset) => this.props.discussionsState.update({ beatmapset }))
       .fail(onError)
       .always(action(() => {
         hideLoadingOverlay();