From 30d740e2bbe254069487bccb4a37089f275ad38a Mon Sep 17 00:00:00 2001
From: Sami Mazouz <ilyasmazouz@gmail.com>
Date: Sun, 10 Jul 2022 14:58:57 +0100
Subject: [PATCH 1/3] refactor: convert core modals to TypeScript

Signed-off-by: Sami Mazouz <ilyasmazouz@gmail.com>
---
 .../js/src/admin/components/AdminPage.tsx     |  5 +-
 ...stomCssModal.js => EditCustomCssModal.tsx} |  0
 ...oterModal.js => EditCustomFooterModal.tsx} |  0
 ...aderModal.js => EditCustomHeaderModal.tsx} |  0
 .../{EditGroupModal.js => EditGroupModal.tsx} | 23 ++++++--
 .../{SettingsModal.js => SettingsModal.tsx}   | 24 ++++----
 ...angeEmailModal.js => ChangeEmailModal.tsx} | 55 +++++++++----------
 ...sswordModal.js => ChangePasswordModal.tsx} |  8 +--
 ...sionModal.js => RenameDiscussionModal.tsx} | 24 ++++++--
 9 files changed, 83 insertions(+), 56 deletions(-)
 rename framework/core/js/src/admin/components/{EditCustomCssModal.js => EditCustomCssModal.tsx} (100%)
 rename framework/core/js/src/admin/components/{EditCustomFooterModal.js => EditCustomFooterModal.tsx} (100%)
 rename framework/core/js/src/admin/components/{EditCustomHeaderModal.js => EditCustomHeaderModal.tsx} (100%)
 rename framework/core/js/src/admin/components/{EditGroupModal.js => EditGroupModal.tsx} (85%)
 rename framework/core/js/src/admin/components/{SettingsModal.js => SettingsModal.tsx} (65%)
 rename framework/core/js/src/forum/components/{ChangeEmailModal.js => ChangeEmailModal.tsx} (76%)
 rename framework/core/js/src/forum/components/{ChangePasswordModal.js => ChangePasswordModal.tsx} (80%)
 rename framework/core/js/src/forum/components/{RenameDiscussionModal.js => RenameDiscussionModal.tsx} (75%)

diff --git a/framework/core/js/src/admin/components/AdminPage.tsx b/framework/core/js/src/admin/components/AdminPage.tsx
index 71517bd461..658fd53f39 100644
--- a/framework/core/js/src/admin/components/AdminPage.tsx
+++ b/framework/core/js/src/admin/components/AdminPage.tsx
@@ -134,8 +134,11 @@ export type SettingsComponentOptions =
  */
 export type AdminHeaderAttrs = AdminHeaderOptions & Partial<Omit<Mithril.Attributes, 'class'>>;
 
+export type SettingValue = string;
+export type MutableSettings = Record<string, Stream<SettingValue>>;
+
 export default abstract class AdminPage<CustomAttrs extends IPageAttrs = IPageAttrs> extends Page<CustomAttrs> {
-  settings: Record<string, Stream<string>> = {};
+  settings: MutableSettings = {};
   loading: boolean = false;
 
   view(vnode: Mithril.Vnode<CustomAttrs, this>): Mithril.Children {
diff --git a/framework/core/js/src/admin/components/EditCustomCssModal.js b/framework/core/js/src/admin/components/EditCustomCssModal.tsx
similarity index 100%
rename from framework/core/js/src/admin/components/EditCustomCssModal.js
rename to framework/core/js/src/admin/components/EditCustomCssModal.tsx
diff --git a/framework/core/js/src/admin/components/EditCustomFooterModal.js b/framework/core/js/src/admin/components/EditCustomFooterModal.tsx
similarity index 100%
rename from framework/core/js/src/admin/components/EditCustomFooterModal.js
rename to framework/core/js/src/admin/components/EditCustomFooterModal.tsx
diff --git a/framework/core/js/src/admin/components/EditCustomHeaderModal.js b/framework/core/js/src/admin/components/EditCustomHeaderModal.tsx
similarity index 100%
rename from framework/core/js/src/admin/components/EditCustomHeaderModal.js
rename to framework/core/js/src/admin/components/EditCustomHeaderModal.tsx
diff --git a/framework/core/js/src/admin/components/EditGroupModal.js b/framework/core/js/src/admin/components/EditGroupModal.tsx
similarity index 85%
rename from framework/core/js/src/admin/components/EditGroupModal.js
rename to framework/core/js/src/admin/components/EditGroupModal.tsx
index d89182f9f9..d1b6293834 100644
--- a/framework/core/js/src/admin/components/EditGroupModal.js
+++ b/framework/core/js/src/admin/components/EditGroupModal.tsx
@@ -1,18 +1,31 @@
 import app from '../../admin/app';
-import Modal from '../../common/components/Modal';
+import Modal, { IInternalModalAttrs } from '../../common/components/Modal';
 import Button from '../../common/components/Button';
 import Badge from '../../common/components/Badge';
 import Group from '../../common/models/Group';
 import ItemList from '../../common/utils/ItemList';
 import Switch from '../../common/components/Switch';
 import Stream from '../../common/utils/Stream';
+import Mithril from 'mithril';
+import extractText from '../../common/utils/extractText';
+
+export interface IEditGroupModalAttrs extends IInternalModalAttrs {
+  group?: Group;
+}
 
 /**
  * The `EditGroupModal` component shows a modal dialog which allows the user
  * to create or edit a group.
  */
-export default class EditGroupModal extends Modal {
-  oninit(vnode) {
+export default class EditGroupModal<CustomAttrs extends IEditGroupModalAttrs = IEditGroupModalAttrs> extends Modal<CustomAttrs> {
+  group!: Group;
+  nameSingular!: Stream<string>;
+  namePlural!: Stream<string>;
+  icon!: Stream<string>;
+  color!: Stream<string>;
+  isHidden!: Stream<boolean>;
+
+  oninit(vnode: Mithril.Vnode<CustomAttrs, this>) {
     super.oninit(vnode);
 
     this.group = this.attrs.group || app.store.createRecord('groups');
@@ -134,7 +147,7 @@ export default class EditGroupModal extends Modal {
     };
   }
 
-  onsubmit(e) {
+  onsubmit(e: SubmitEvent) {
     e.preventDefault();
 
     this.loading = true;
@@ -149,7 +162,7 @@ export default class EditGroupModal extends Modal {
   }
 
   deleteGroup() {
-    if (confirm(app.translator.trans('core.admin.edit_group.delete_confirmation'))) {
+    if (confirm(extractText(app.translator.trans('core.admin.edit_group.delete_confirmation')))) {
       this.group.delete().then(() => m.redraw());
       this.hide();
     }
diff --git a/framework/core/js/src/admin/components/SettingsModal.js b/framework/core/js/src/admin/components/SettingsModal.tsx
similarity index 65%
rename from framework/core/js/src/admin/components/SettingsModal.js
rename to framework/core/js/src/admin/components/SettingsModal.tsx
index e108c78ae8..bc167fed5c 100644
--- a/framework/core/js/src/admin/components/SettingsModal.js
+++ b/framework/core/js/src/admin/components/SettingsModal.tsx
@@ -1,18 +1,18 @@
 import app from '../../admin/app';
-import Modal from '../../common/components/Modal';
+import Modal, { IInternalModalAttrs } from '../../common/components/Modal';
 import Button from '../../common/components/Button';
 import Stream from '../../common/utils/Stream';
 import saveSettings from '../utils/saveSettings';
+import Mithril from 'mithril';
+import { MutableSettings, SettingValue } from './AdminPage';
 
-export default class SettingsModal extends Modal {
-  oninit(vnode) {
-    super.oninit(vnode);
+export interface ISettingsModalAttrs extends IInternalModalAttrs {}
 
-    this.settings = {};
-    this.loading = false;
-  }
+export default abstract class SettingsModal<CustomAttrs extends ISettingsModalAttrs = ISettingsModalAttrs> extends Modal<CustomAttrs> {
+  settings: MutableSettings = {};
+  loading: boolean = false;
 
-  form() {
+  form(): Mithril.Children {
     return '';
   }
 
@@ -28,7 +28,7 @@ export default class SettingsModal extends Modal {
     );
   }
 
-  submitButton() {
+  submitButton(): Mithril.Children {
     return (
       <Button type="submit" className="Button Button--primary" loading={this.loading} disabled={!this.changed()}>
         {app.translator.trans('core.admin.settings.submit_button')}
@@ -36,14 +36,14 @@ export default class SettingsModal extends Modal {
     );
   }
 
-  setting(key, fallback = '') {
+  setting(key: string, fallback: string = ''): Stream<SettingValue> {
     this.settings[key] = this.settings[key] || Stream(app.data.settings[key] || fallback);
 
     return this.settings[key];
   }
 
   dirty() {
-    const dirty = {};
+    const dirty: Record<string, SettingValue> = {};
 
     Object.keys(this.settings).forEach((key) => {
       const value = this.settings[key]();
@@ -60,7 +60,7 @@ export default class SettingsModal extends Modal {
     return Object.keys(this.dirty()).length;
   }
 
-  onsubmit(e) {
+  onsubmit(e: SubmitEvent) {
     e.preventDefault();
 
     this.loading = true;
diff --git a/framework/core/js/src/forum/components/ChangeEmailModal.js b/framework/core/js/src/forum/components/ChangeEmailModal.tsx
similarity index 76%
rename from framework/core/js/src/forum/components/ChangeEmailModal.js
rename to framework/core/js/src/forum/components/ChangeEmailModal.tsx
index 3d7cb6ef01..0d32c62721 100644
--- a/framework/core/js/src/forum/components/ChangeEmailModal.js
+++ b/framework/core/js/src/forum/components/ChangeEmailModal.tsx
@@ -1,35 +1,34 @@
 import app from '../../forum/app';
-import Modal from '../../common/components/Modal';
+import Modal, { IInternalModalAttrs } from '../../common/components/Modal';
 import Button from '../../common/components/Button';
 import Stream from '../../common/utils/Stream';
+import Mithril from 'mithril';
+import RequestError from '../../common/utils/RequestError';
 
 /**
  * The `ChangeEmailModal` component shows a modal dialog which allows the user
  * to change their email address.
  */
-export default class ChangeEmailModal extends Modal {
-  oninit(vnode) {
-    super.oninit(vnode);
+export default class ChangeEmailModal<CustomAttrs extends IInternalModalAttrs = IInternalModalAttrs> extends Modal<CustomAttrs> {
+  /**
+   * The value of the email input.
+   */
+  email!: Stream<string>;
+
+  /**
+   * The value of the password input.
+   */
+  password!: Stream<string>;
 
-    /**
-     * Whether or not the email has been changed successfully.
-     *
-     * @type {Boolean}
-     */
-    this.success = false;
+  /**
+   * Whether or not the email has been changed successfully.
+   */
+  success: boolean = false;
 
-    /**
-     * The value of the email input.
-     *
-     * @type {function}
-     */
-    this.email = Stream(app.session.user.email());
+  oninit(vnode: Mithril.Vnode<CustomAttrs, this>) {
+    super.oninit(vnode);
 
-    /**
-     * The value of the password input.
-     *
-     * @type {function}
-     */
+    this.email = Stream(app.session.user!.email() || '');
     this.password = Stream('');
   }
 
@@ -67,7 +66,7 @@ export default class ChangeEmailModal extends Modal {
               type="email"
               name="email"
               className="FormControl"
-              placeholder={app.session.user.email()}
+              placeholder={app.session.user!.email()}
               bidi={this.email}
               disabled={this.loading}
             />
@@ -98,12 +97,12 @@ export default class ChangeEmailModal extends Modal {
     );
   }
 
-  onsubmit(e) {
+  onsubmit(e: SubmitEvent) {
     e.preventDefault();
 
     // If the user hasn't actually entered a different email address, we don't
     // need to do anything. Woot!
-    if (this.email() === app.session.user.email()) {
+    if (this.email() === app.session.user!.email()) {
       this.hide();
       return;
     }
@@ -111,8 +110,8 @@ export default class ChangeEmailModal extends Modal {
     this.loading = true;
     this.alertAttrs = null;
 
-    app.session.user
-      .save(
+    app.session
+      .user!.save(
         { email: this.email() },
         {
           errorHandler: this.onerror.bind(this),
@@ -126,8 +125,8 @@ export default class ChangeEmailModal extends Modal {
       .then(this.loaded.bind(this));
   }
 
-  onerror(error) {
-    if (error.status === 401) {
+  onerror(error: RequestError) {
+    if (error.status === 401 && error.alert) {
       error.alert.content = app.translator.trans('core.forum.change_email.incorrect_password_message');
     }
 
diff --git a/framework/core/js/src/forum/components/ChangePasswordModal.js b/framework/core/js/src/forum/components/ChangePasswordModal.tsx
similarity index 80%
rename from framework/core/js/src/forum/components/ChangePasswordModal.js
rename to framework/core/js/src/forum/components/ChangePasswordModal.tsx
index 4c3596e654..1db4884342 100644
--- a/framework/core/js/src/forum/components/ChangePasswordModal.js
+++ b/framework/core/js/src/forum/components/ChangePasswordModal.tsx
@@ -1,12 +1,12 @@
 import app from '../../forum/app';
-import Modal from '../../common/components/Modal';
+import Modal, { IInternalModalAttrs } from '../../common/components/Modal';
 import Button from '../../common/components/Button';
 
 /**
  * The `ChangePasswordModal` component shows a modal dialog which allows the
  * user to send themself a password reset email.
  */
-export default class ChangePasswordModal extends Modal {
+export default class ChangePasswordModal<CustomAttrs extends IInternalModalAttrs = IInternalModalAttrs> extends Modal<CustomAttrs> {
   className() {
     return 'ChangePasswordModal Modal--small';
   }
@@ -35,7 +35,7 @@ export default class ChangePasswordModal extends Modal {
     );
   }
 
-  onsubmit(e) {
+  onsubmit(e: SubmitEvent) {
     e.preventDefault();
 
     this.loading = true;
@@ -44,7 +44,7 @@ export default class ChangePasswordModal extends Modal {
       .request({
         method: 'POST',
         url: app.forum.attribute('apiUrl') + '/forgot',
-        body: { email: app.session.user.email() },
+        body: { email: app.session.user!.email() },
       })
       .then(this.hide.bind(this), this.loaded.bind(this));
   }
diff --git a/framework/core/js/src/forum/components/RenameDiscussionModal.js b/framework/core/js/src/forum/components/RenameDiscussionModal.tsx
similarity index 75%
rename from framework/core/js/src/forum/components/RenameDiscussionModal.js
rename to framework/core/js/src/forum/components/RenameDiscussionModal.tsx
index 5b0c066697..b2cdf76a76 100644
--- a/framework/core/js/src/forum/components/RenameDiscussionModal.js
+++ b/framework/core/js/src/forum/components/RenameDiscussionModal.tsx
@@ -1,13 +1,24 @@
 import app from '../../forum/app';
-import Modal from '../../common/components/Modal';
+import Modal, { IInternalModalAttrs } from '../../common/components/Modal';
 import Button from '../../common/components/Button';
 import Stream from '../../common/utils/Stream';
+import Mithril from 'mithril';
+import Discussion from '../../common/models/Discussion';
+
+export interface IRenameDiscussionModalAttrs extends IInternalModalAttrs {
+  discussion: Discussion;
+  currentTitle: string;
+}
 
 /**
  * The 'RenameDiscussionModal' displays a modal dialog with an input to rename a discussion
  */
-export default class RenameDiscussionModal extends Modal {
-  oninit(vnode) {
+export default class RenameDiscussionModal<CustomAttrs extends IRenameDiscussionModalAttrs = IRenameDiscussionModalAttrs> extends Modal<CustomAttrs> {
+  discussion!: Discussion;
+  currentTitle!: string;
+  newTitle!: Stream<string>;
+
+  oninit(vnode: Mithril.Vnode<CustomAttrs, this>) {
     super.oninit(vnode);
 
     this.discussion = this.attrs.discussion;
@@ -45,7 +56,7 @@ export default class RenameDiscussionModal extends Modal {
     );
   }
 
-  onsubmit(e) {
+  onsubmit(e: SubmitEvent) {
     e.preventDefault();
 
     this.loading = true;
@@ -70,8 +81,9 @@ export default class RenameDiscussionModal extends Modal {
           this.loading = false;
           m.redraw();
         });
-    } else {
-      this.hide();
     }
+
+    this.hide();
+    return;
   }
 }

From 8b2ed266c94c7727f990500c7b7a52f558249210 Mon Sep 17 00:00:00 2001
From: Sami Mazouz <ilyasmazouz@gmail.com>
Date: Sun, 10 Jul 2022 15:37:22 +0100
Subject: [PATCH 2/3] chore: excplicitly specify return type instead

Signed-off-by: Sami Mazouz <ilyasmazouz@gmail.com>
---
 .../js/src/forum/components/RenameDiscussionModal.tsx     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/framework/core/js/src/forum/components/RenameDiscussionModal.tsx b/framework/core/js/src/forum/components/RenameDiscussionModal.tsx
index b2cdf76a76..9469bbc5b6 100644
--- a/framework/core/js/src/forum/components/RenameDiscussionModal.tsx
+++ b/framework/core/js/src/forum/components/RenameDiscussionModal.tsx
@@ -56,7 +56,7 @@ export default class RenameDiscussionModal<CustomAttrs extends IRenameDiscussion
     );
   }
 
-  onsubmit(e: SubmitEvent) {
+  onsubmit(e: SubmitEvent): Promise<void>|void {
     e.preventDefault();
 
     this.loading = true;
@@ -82,8 +82,8 @@ export default class RenameDiscussionModal<CustomAttrs extends IRenameDiscussion
           m.redraw();
         });
     }
-
-    this.hide();
-    return;
+    else {
+      this.hide();
+    }
   }
 }

From 794f424a5f3c5cc14d797c69cbd5836a8a159ce6 Mon Sep 17 00:00:00 2001
From: Sami Mazouz <ilyasmazouz@gmail.com>
Date: Sun, 10 Jul 2022 15:44:15 +0100
Subject: [PATCH 3/3] chore: `yarn format`

Signed-off-by: Sami Mazouz <ilyasmazouz@gmail.com>
---
 .../core/js/src/forum/components/RenameDiscussionModal.tsx   | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/framework/core/js/src/forum/components/RenameDiscussionModal.tsx b/framework/core/js/src/forum/components/RenameDiscussionModal.tsx
index 9469bbc5b6..e2b9446c56 100644
--- a/framework/core/js/src/forum/components/RenameDiscussionModal.tsx
+++ b/framework/core/js/src/forum/components/RenameDiscussionModal.tsx
@@ -56,7 +56,7 @@ export default class RenameDiscussionModal<CustomAttrs extends IRenameDiscussion
     );
   }
 
-  onsubmit(e: SubmitEvent): Promise<void>|void {
+  onsubmit(e: SubmitEvent): Promise<void> | void {
     e.preventDefault();
 
     this.loading = true;
@@ -81,8 +81,7 @@ export default class RenameDiscussionModal<CustomAttrs extends IRenameDiscussion
           this.loading = false;
           m.redraw();
         });
-    }
-    else {
+    } else {
       this.hide();
     }
   }