Migrate to private class properties/methods

ts/components/leftPane/LeftPaneSetGroupMetadataHelper.tsx

@@ -38,21 +38,14 @@ export type LeftPaneSetGroupMetadataPropsType = {
 };
 
 export class LeftPaneSetGroupMetadataHelper extends LeftPaneHelper<LeftPaneSetGroupMetadataPropsType> {
-  private readonly groupAvatar: undefined | Uint8Array;
-
-  private readonly groupName: string;
-
-  private readonly groupExpireTimer: DurationInSeconds;
-
-  private readonly hasError: boolean;
-
-  private readonly isCreating: boolean;
-
-  private readonly isEditingAvatar: boolean;
-
-  private readonly selectedContacts: ReadonlyArray<ContactListItemConversationType>;
-
-  private readonly userAvatarData: ReadonlyArray<AvatarDataType>;
+  readonly #groupAvatar: undefined | Uint8Array;
+  readonly #groupName: string;
+  readonly #groupExpireTimer: DurationInSeconds;
+  readonly #hasError: boolean;
+  readonly #isCreating: boolean;
+  readonly #isEditingAvatar: boolean;
+  readonly #selectedContacts: ReadonlyArray<ContactListItemConversationType>;
+  readonly #userAvatarData: ReadonlyArray<AvatarDataType>;
 
   constructor({
     groupAvatar,
@@ -66,14 +59,14 @@ export class LeftPaneSetGroupMetadataHelper extends LeftPaneHelper<LeftPaneSetGr
   }: Readonly<LeftPaneSetGroupMetadataPropsType>) {
     super();
 
-    this.groupAvatar = groupAvatar;
-    this.groupName = groupName;
-    this.groupExpireTimer = groupExpireTimer;
-    this.hasError = hasError;
-    this.isCreating = isCreating;
-    this.isEditingAvatar = isEditingAvatar;
-    this.selectedContacts = selectedContacts;
-    this.userAvatarData = userAvatarData;
+    this.#groupAvatar = groupAvatar;
+    this.#groupName = groupName;
+    this.#groupExpireTimer = groupExpireTimer;
+    this.#hasError = hasError;
+    this.#isCreating = isCreating;
+    this.#isEditingAvatar = isEditingAvatar;
+    this.#selectedContacts = selectedContacts;
+    this.#userAvatarData = userAvatarData;
   }
 
   override getHeaderContents({
@@ -90,7 +83,7 @@ export class LeftPaneSetGroupMetadataHelper extends LeftPaneHelper<LeftPaneSetGr
         <button
           aria-label={backButtonLabel}
           className="module-left-pane__header__contents__back-button"
-          disabled={this.isCreating}
+          disabled={this.#isCreating}
           onClick={this.getBackAction({ showChooseGroupMembers })}
           title={backButtonLabel}
           type="button"
@@ -107,7 +100,7 @@ export class LeftPaneSetGroupMetadataHelper extends LeftPaneHelper<LeftPaneSetGr
   }: {
     showChooseGroupMembers: () => void;
   }): undefined | (() => void) {
-    return this.isCreating ? undefined : showChooseGroupMembers;
+    return this.#isCreating ? undefined : showChooseGroupMembers;
   }
 
   override getPreRowsNode({
@@ -134,7 +127,7 @@ export class LeftPaneSetGroupMetadataHelper extends LeftPaneHelper<LeftPaneSetGr
     toggleComposeEditingAvatar: () => unknown;
   }>): ReactChild {
     const [avatarColor] = AvatarColors;
-    const disabled = this.isCreating;
+    const disabled = this.#isCreating;
 
     return (
       <form
@@ -143,14 +136,14 @@ export class LeftPaneSetGroupMetadataHelper extends LeftPaneHelper<LeftPaneSetGr
           event.preventDefault();
           event.stopPropagation();
 
-          if (!this.canCreateGroup()) {
+          if (!this.#canCreateGroup()) {
             return;
           }
 
           createGroup();
         }}
       >
-        {this.isEditingAvatar && (
+        {this.#isEditingAvatar && (
           <Modal
             modalName="LeftPaneSetGroupMetadataHelper.AvatarEditor"
             hasXButton
@@ -162,7 +155,7 @@ export class LeftPaneSetGroupMetadataHelper extends LeftPaneHelper<LeftPaneSetGr
           >
             <AvatarEditor
               avatarColor={avatarColor}
-              avatarValue={this.groupAvatar}
+              avatarValue={this.#groupAvatar}
               deleteAvatarFromDisk={composeDeleteAvatarFromDisk}
               i18n={i18n}
               isGroup
@@ -171,7 +164,7 @@ export class LeftPaneSetGroupMetadataHelper extends LeftPaneHelper<LeftPaneSetGr
                 setComposeGroupAvatar(newAvatar);
                 toggleComposeEditingAvatar();
               }}
-              userAvatarData={this.userAvatarData}
+              userAvatarData={this.#userAvatarData}
               replaceAvatar={composeReplaceAvatar}
               saveAvatarToDisk={composeSaveAvatarToDisk}
             />
@@ -179,7 +172,7 @@ export class LeftPaneSetGroupMetadataHelper extends LeftPaneHelper<LeftPaneSetGr
         )}
         <AvatarPreview
           avatarColor={avatarColor}
-          avatarValue={this.groupAvatar}
+          avatarValue={this.#groupAvatar}
           i18n={i18n}
           isEditable
           isGroup
@@ -196,7 +189,7 @@ export class LeftPaneSetGroupMetadataHelper extends LeftPaneHelper<LeftPaneSetGr
             i18n={i18n}
             onChangeValue={setComposeGroupName}
             ref={focusRef}
-            value={this.groupName}
+            value={this.#groupName}
           />
         </div>
 
@@ -206,12 +199,12 @@ export class LeftPaneSetGroupMetadataHelper extends LeftPaneHelper<LeftPaneSetGr
           </div>
           <DisappearingTimerSelect
             i18n={i18n}
-            value={this.groupExpireTimer}
+            value={this.#groupExpireTimer}
             onChange={setComposeGroupExpireTimer}
           />
         </section>
 
-        {this.hasError && (
+        {this.#hasError && (
           <Alert
             body={i18n('icu:setGroupMetadata__error-message')}
             i18n={i18n}
@@ -231,12 +224,12 @@ export class LeftPaneSetGroupMetadataHelper extends LeftPaneHelper<LeftPaneSetGr
   }>): ReactChild {
     return (
       <Button
-        disabled={!this.canCreateGroup()}
+        disabled={!this.#canCreateGroup()}
         onClick={() => {
           createGroup();
         }}
       >
-        {this.isCreating ? (
+        {this.#isCreating ? (
           <span aria-label={i18n('icu:loading')} role="status">
             <Spinner size="20px" svgSize="small" direction="on-avatar" />
           </span>
@@ -248,14 +241,14 @@ export class LeftPaneSetGroupMetadataHelper extends LeftPaneHelper<LeftPaneSetGr
   }
 
   getRowCount(): number {
-    if (!this.selectedContacts.length) {
+    if (!this.#selectedContacts.length) {
       return 0;
     }
-    return this.selectedContacts.length + 2;
+    return this.#selectedContacts.length + 2;
   }
 
   getRow(rowIndex: number): undefined | Row {
-    if (!this.selectedContacts.length) {
+    if (!this.#selectedContacts.length) {
       return undefined;
     }
 
@@ -267,11 +260,11 @@ export class LeftPaneSetGroupMetadataHelper extends LeftPaneHelper<LeftPaneSetGr
     }
 
     // This puts a blank row for the footer.
-    if (rowIndex === this.selectedContacts.length + 1) {
+    if (rowIndex === this.#selectedContacts.length + 1) {
       return { type: RowType.Blank };
     }
 
-    const contact = this.selectedContacts[rowIndex - 1];
+    const contact = this.#selectedContacts[rowIndex - 1];
     return contact
       ? {
           type: RowType.Contact,
@@ -299,8 +292,8 @@ export class LeftPaneSetGroupMetadataHelper extends LeftPaneHelper<LeftPaneSetGr
     return false;
   }
 
-  private canCreateGroup(): boolean {
-    return !this.isCreating && Boolean(this.groupName.trim());
+  #canCreateGroup(): boolean {
+    return !this.#isCreating && Boolean(this.#groupName.trim());
   }
 }