Enforce readonly for private fields

.eslintrc.js

@@ -106,6 +106,7 @@ module.exports = {
         '@typescript-eslint/object-curly-spacing': ['error', 'always'],
         '@typescript-eslint/prefer-for-of': 'error',
         '@typescript-eslint/prefer-function-type': 'error',
+        '@typescript-eslint/prefer-readonly': 'error',
         '@typescript-eslint/quotes': [
           'error',
           'single',

resources/js/artist-tracks-index/main.tsx

@@ -45,7 +45,7 @@ const headerLinks = [
 
 @observer
 export default class Main extends React.Component<Props> {
-  @observable private data = JSON.parse(this.props.container.dataset.data ?? '') as Data;
+  @observable private readonly data = JSON.parse(this.props.container.dataset.data ?? '') as Data;
   @observable private isNavigating = false;
   @observable private loadingXhr?: JQuery.jqXHR<ArtistTracksIndex> | null = null;
 

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

@@ -72,7 +72,7 @@ export default class BeatmapList extends React.PureComponent<Props, State> {
     );
   }
 
-  private beatmapListItem = (beatmap: BeatmapExtendedJson) => {
+  private readonly beatmapListItem = (beatmap: BeatmapExtendedJson) => {
     const count = this.props.getCount(beatmap);
 
     return (
@@ -98,13 +98,13 @@ export default class BeatmapList extends React.PureComponent<Props, State> {
     );
   };
 
-  private hideSelector = () => {
+  private readonly hideSelector = () => {
     if (this.state.showingSelector) {
       this.setSelector(false);
     }
   };
 
-  private onDocumentClick = (e: JQuery.ClickEvent) => {
+  private readonly onDocumentClick = (e: JQuery.ClickEvent) => {
     if (e.button !== 0) return;
 
     if ($(e.target).closest('.js-beatmap-list-selector').length) {
@@ -114,25 +114,25 @@ export default class BeatmapList extends React.PureComponent<Props, State> {
     this.hideSelector();
   };
 
-  private selectBeatmap = (e: React.MouseEvent<HTMLElement>) => {
+  private readonly selectBeatmap = (e: React.MouseEvent<HTMLElement>) => {
     if (e.button !== 0) return;
     e.preventDefault();
 
     const beatmapId = parseInt(e.currentTarget.dataset.id ?? '', 10);
     this.props.onSelectBeatmap(beatmapId);
   };
 
-  private setSelector = (state: boolean) => {
+  private readonly setSelector = (state: boolean) => {
     if (this.state.showingSelector !== state) {
       this.setState({ showingSelector: state }, this.syncBlackout);
     }
   };
 
-  private syncBlackout = () => {
+  private readonly syncBlackout = () => {
     blackoutToggle(this.state.showingSelector, 0.5);
   };
 
-  private toggleSelector = (e: React.MouseEvent<HTMLElement>) => {
+  private readonly toggleSelector = (e: React.MouseEvent<HTMLElement>) => {
     if (e.button !== 0) return;
     e.preventDefault();
 

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

@@ -35,12 +35,12 @@ interface Props {
 export default class BeatmapOwnerEditor extends React.Component<Props> {
   @observable private checkingUser: string | null = null;
   @observable private editing = false;
-  private inputRef = React.createRef<HTMLInputElement>();
+  private readonly inputRef = React.createRef<HTMLInputElement>();
   @observable private inputUsername: string;
   private shouldFocusInputOnNextRender = false;
   @observable private updatingOwner = false;
   private userLookupTimeout?: number;
-  private xhr: Partial<XhrCollection> = {};
+  private readonly xhr: Partial<XhrCollection> = {};
 
   @computed
   private get inputUser() {
@@ -102,33 +102,33 @@ export default class BeatmapOwnerEditor extends React.Component<Props> {
   }
 
   @action
-  private handleCancelEditingClick = () => {
+  private readonly handleCancelEditingClick = () => {
     this.editing = false;
   };
 
   @action
-  private handleResetClick = () => {
+  private readonly handleResetClick = () => {
     if (!confirm(trans('beatmap_discussions.owner_editor.reset_confirm'))) return;
 
     this.editing = false;
     this.updateOwner(this.props.beatmapsetUser.id);
   };
 
-  private handleSaveClick = () => {
+  private readonly handleSaveClick = () => {
     if (this.inputUser == null) return;
 
     this.updateOwner(this.inputUser.id);
   };
 
   @action
-  private handleStartEditingClick = () => {
+  private readonly handleStartEditingClick = () => {
     this.editing = true;
     this.shouldFocusInputOnNextRender = true;
     this.inputUsername = this.props.user.username;
   };
 
   @action
-  private handleUsernameInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+  private readonly handleUsernameInput = (e: React.ChangeEvent<HTMLInputElement>) => {
     this.inputUsername = e.currentTarget.value;
     const inputUsernameNormalised = normaliseUsername(this.inputUsername);
 
@@ -143,7 +143,7 @@ export default class BeatmapOwnerEditor extends React.Component<Props> {
     }
   };
 
-  private handleUsernameInputKeyup = (e: React.KeyboardEvent<HTMLInputElement>) => {
+  private readonly handleUsernameInputKeyup = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') this.handleSaveClick();
   };
 
@@ -230,7 +230,7 @@ export default class BeatmapOwnerEditor extends React.Component<Props> {
   }
 
   @action
-  private updateOwner = (userId: number) => {
+  private readonly updateOwner = (userId: number) => {
     this.xhr.updateOwner?.abort();
 
     if (this.props.beatmap.user_id === userId) {
@@ -255,7 +255,7 @@ export default class BeatmapOwnerEditor extends React.Component<Props> {
     }));
   };
 
-  private userLookup = () => {
+  private readonly userLookup = () => {
     const currentCheckingUser = this.checkingUser;
 
     if (currentCheckingUser == null) return;

resources/js/beatmap-discussions/discussions.tsx

@@ -71,7 +71,7 @@ interface Props {
 
 @observer
 export class Discussions extends React.Component<Props> {
-  @observable private discussionsState = new DiscussionsState();
+  @observable private readonly discussionsState = new DiscussionsState();
   @observable private sort: Record<DiscussionMode, Sort> = {
     general: 'updated_at',
     generalAll: 'updated_at',
@@ -153,7 +153,7 @@ export class Discussions extends React.Component<Props> {
   };
 
   @action
-  private handleExpandClick = (e: React.SyntheticEvent<HTMLButtonElement>) => {
+  private readonly handleExpandClick = (e: React.SyntheticEvent<HTMLButtonElement>) => {
     this.discussionsState.discussionDefaultCollapsed = e.currentTarget.dataset.type === 'collapse';
     this.discussionsState.discussionCollapsed.clear();
   };

resources/js/beatmap-discussions/editor-insertion-menu.tsx

@@ -100,7 +100,7 @@ export class EditorInsertionMenu extends React.Component<Props> {
     $(this.scrollContainer).on(`scroll.${this.eventId}`, this.throttledScroll);
   }
 
-  private containerMouseMove = (event: JQuery.MouseMoveEvent) => {
+  private readonly containerMouseMove = (event: JQuery.MouseMoveEvent) => {
     if (!event.originalEvent) {
       return;
     }
@@ -141,20 +141,20 @@ export class EditorInsertionMenu extends React.Component<Props> {
     this.startHideTimer();
   };
 
-  private forceHideMenu = () => {
+  private readonly forceHideMenu = () => {
     this.mouseOver = false;
     this.hideMenu();
   };
 
-  private hideMenu = () => {
+  private readonly hideMenu = () => {
     if (!this.insertRef.current || this.mouseOver) {
       return;
     }
 
     this.insertRef.current.style.display = 'none';
   };
 
-  private insertBlock = (event: React.MouseEvent<HTMLElement>) => {
+  private readonly insertBlock = (event: React.MouseEvent<HTMLElement>) => {
     const ed = this.context;
     const slateNodeElement = this.hoveredBlock?.lastChild;
     const type = event.currentTarget.dataset.discussionType;
@@ -221,7 +221,7 @@ export class EditorInsertionMenu extends React.Component<Props> {
     Transforms.insertNodes(ed, insertNode, { at: insertAt });
   };
 
-  private insertButton = (type: string) => {
+  private readonly insertButton = (type: string) => {
     let icon = 'fas fa-question';
 
     switch (type) {
@@ -248,11 +248,11 @@ export class EditorInsertionMenu extends React.Component<Props> {
     );
   };
 
-  private menuMouseEnter = () => {
+  private readonly menuMouseEnter = () => {
     this.mouseOver = true;
   };
 
-  private menuMouseLeave = () => {
+  private readonly menuMouseLeave = () => {
     this.mouseOver = false;
     this.startHideTimer();
   };

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

@@ -16,7 +16,7 @@ export class EditorToolbar extends React.Component {
   static contextType = SlateContext;
   declare context: React.ContextType<typeof SlateContext>;
   private readonly eventId = `editor-toolbar-${nextVal()}`;
-  private ref = React.createRef<HTMLDivElement>();
+  private readonly ref = React.createRef<HTMLDivElement>();
   private scrollContainer?: HTMLElement;
   private scrollTimer?: number;
   private readonly throttledUpdate = throttle(() => this.updatePosition(), 100);

resources/js/beatmap-discussions/image-link.tsx

@@ -52,7 +52,7 @@ export default class ImageLink extends React.Component<Props> {
   }
 
   @action
-  private handleOnLoad = () => {
+  private readonly handleOnLoad = () => {
     this.loaded = true;
   };
 

resources/js/beatmap-discussions/love-beatmap-dialog.tsx

@@ -21,7 +21,7 @@ interface Props {
 
 @observer
 export default class LoveBeatmapDialog extends React.Component<Props> {
-  @observable private selectedBeatmapIds: Set<number>;
+  @observable private readonly selectedBeatmapIds: Set<number>;
   @observable private xhr: JQuery.jqXHR<BeatmapsetWithDiscussionsJson> | null = null;
 
   @computed
@@ -79,7 +79,7 @@ export default class LoveBeatmapDialog extends React.Component<Props> {
     );
   }
 
-  private checkIsModeSelected = (mode: GameMode) => {
+  private readonly checkIsModeSelected = (mode: GameMode) => {
     const modeBeatmaps = this.groupedBeatmaps.get(mode) ?? [];
     const isAllSelected = modeBeatmaps.every((beatmap) => this.selectedBeatmapIds.has(beatmap.id));
     const isAllUnselected = modeBeatmaps.every((beatmap) => !this.selectedBeatmapIds.has(beatmap.id));
@@ -92,7 +92,7 @@ export default class LoveBeatmapDialog extends React.Component<Props> {
   };
 
   @action
-  private handleCheckboxDifficulty = (e: React.ChangeEvent<HTMLInputElement>) => {
+  private readonly handleCheckboxDifficulty = (e: React.ChangeEvent<HTMLInputElement>) => {
     const beatmapId = parseInt(e.target.value, 10);
 
     if (this.selectedBeatmapIds.has(beatmapId)) {
@@ -102,7 +102,7 @@ export default class LoveBeatmapDialog extends React.Component<Props> {
     }
   };
 
-  private handleCheckboxMode = (e: React.ChangeEvent<HTMLInputElement>) => {
+  private readonly handleCheckboxMode = (e: React.ChangeEvent<HTMLInputElement>) => {
     const mode = e.target.value as GameMode;
     const modeBeatmaps = this.groupedBeatmaps.get(mode) ?? [];
 
@@ -111,7 +111,7 @@ export default class LoveBeatmapDialog extends React.Component<Props> {
   };
 
   @action
-  private handleSubmit = () => {
+  private readonly handleSubmit = () => {
     if (this.xhr != null
       || this.selectedBeatmapIds.size === 0
       || !confirm(trans('beatmaps.nominations.love_confirm'))) {

resources/js/beatmap-discussions/mode-switcher.tsx

@@ -24,7 +24,7 @@ interface Props {
 const selectedClassName = 'page-mode-link--is-active';
 
 export class ModeSwitcher extends React.PureComponent<Props> {
-  private scrollerRef = React.createRef<HTMLUListElement>();
+  private readonly scrollerRef = React.createRef<HTMLUListElement>();
 
   componentDidMount() {
     this.scrollModeSwitcher();
@@ -49,7 +49,7 @@ export class ModeSwitcher extends React.PureComponent<Props> {
     );
   }
 
-  private renderMode = (mode: DiscussionPage) => (
+  private readonly renderMode = (mode: DiscussionPage) => (
     <li key={mode} className='page-mode__item'>
       <a
         className={classWithModifiers('page-mode-link', { 'is-active': this.props.mode === mode })}

resources/js/beatmap-discussions/nominations.tsx

@@ -227,7 +227,7 @@ export class Nominations extends React.PureComponent<Props> {
     });
   }
 
-  private focusNewDiscussionWithModeSwitch = () => {
+  private readonly focusNewDiscussionWithModeSwitch = () => {
     // Switch to generalAll tab just in case currently in event tab
     // and thus new discussion box isn't visible.
     $.publish('beatmapsetDiscussions:update', {

resources/js/beatmap-discussions/nominator.tsx

@@ -29,7 +29,7 @@ const bn = 'nomination-dialog';
 
 @observer
 export class Nominator extends React.Component<Props> {
-  private checkboxContainerRef = React.createRef<HTMLDivElement>();
+  private readonly checkboxContainerRef = React.createRef<HTMLDivElement>();
   @observable private loading = false;
   @observable private selectedModes: GameMode[] = [];
   @observable private visible = false;

resources/js/beatmaps/beatmapset-card-size-selector.tsx

@@ -43,7 +43,7 @@ export default class BeatmapsetCardViewSelector extends React.Component<Props> {
     );
   }
 
-  private handleClick = () => {
+  private readonly handleClick = () => {
     void core.userPreferences.set('beatmapset_card_size', this.props.size);
   };
 }

resources/js/beatmaps/beatmapset-search-controller.ts

@@ -43,7 +43,7 @@ export class BeatmapsetSearchController {
   private filtersObserver!: Lambda;
   private initialErrorMessage?: string;
 
-  constructor(private beatmapsetSearch: BeatmapsetSearch) {
+  constructor(private readonly beatmapsetSearch: BeatmapsetSearch) {
     makeObservable(this);
   }
 
@@ -150,7 +150,7 @@ export class BeatmapsetSearchController {
     });
   }
 
-  private filterChangedHandler = (change: IObjectDidChange<BeatmapsetSearchFilters>) => {
+  private readonly filterChangedHandler = (change: IObjectDidChange<BeatmapsetSearchFilters>) => {
     if (change.type === 'update' && change.oldValue === change.newValue) return;
     // FIXME: sort = null changes ignored because search triggered too early during filter update.
     if (change.type !== 'remove' && change.name === 'sort' && change.newValue == null) return;

resources/js/beatmaps/beatmapset-search.ts

@@ -28,7 +28,7 @@ export class BeatmapsetSearch implements DispatchListener {
 
   private xhr?: JQueryXHR;
 
-  constructor(private beatmapsetStore: BeatmapsetStore) {
+  constructor(private readonly beatmapsetStore: BeatmapsetStore) {
     makeObservable(this);
   }
 

resources/js/beatmaps/main.tsx

@@ -58,7 +58,7 @@ export class Main extends React.Component<Props> {
     );
   }
 
-  private scrollPositionHandler = (value: SearchStatus, oldValue: SearchStatus) => {
+  private readonly scrollPositionHandler = (value: SearchStatus, oldValue: SearchStatus) => {
     if (value.restore) return;
     if (isEqual(oldValue, value)) return;
 
@@ -76,7 +76,7 @@ export class Main extends React.Component<Props> {
     }
   };
 
-  private searchStatusErrorHandler = (value: SearchStatus) => {
+  private readonly searchStatusErrorHandler = (value: SearchStatus) => {
     if (value.error != null) {
       onError(value.error);
     }