common: change ModalManager#show to accept two parameters instead of a component class instance

FRONTEND FRAMEWORK REWRITE CHANGES.md

@@ -18,6 +18,8 @@
     - `SubtreeRetainer` now has an `update` method instead of `retain`, and its output is used in `onbeforeupdate` lifecycle hook
     - `Evented` util is now a class instead of an object
     - `formatNumber` now uses `Number.prototype.toLocaleString` with the current application locale, and supports passing an options object (eg. for currency formatting - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/resolvedOptions#Description)
+* Modals
+    - `app.modal.show` now takes the Modal _class_ (not instance) and optional props (`app.modal.show(ForgotPasswordModal, props)`)
 
 #### Forum
 * Forum Application

js/src/common/Application.ts

@@ -303,6 +303,6 @@ export default abstract class Application {
     private showDebug(error: RequestError) {
         // this.alerts.dismiss(this.requestError.alert);
 
-        this.modal.show(new RequestErrorModal({ error }));
+        this.modal.show(RequestErrorModal, { error });
     }
 }

js/src/common/components/Modal.tsx

@@ -50,12 +50,6 @@ export default abstract class Modal<T extends ComponentProps = ComponentProps> e
         );
     }
 
-    oncreate(vnode) {
-        super.oncreate(vnode);
-
-        app.modal.component = this;
-    }
-
     /**
      * Determine whether or not the modal should be dismissible via an 'x' button.
      */

js/src/common/components/ModalManager.tsx

@@ -13,7 +13,7 @@ export default class ModalManager extends Component {
     showing!: boolean;
     hideTimeout!: number;
 
-    modal: typeof Modal | null = null;
+    modal: (new () => Modal) | null = null;
     modalProps: ComponentProps = {};
 
     component: Modal | null = null;
@@ -35,16 +35,13 @@ export default class ModalManager extends Component {
     /**
      * Show a modal dialog.
      */
-    show(component: Modal) {
-        if (!(component instanceof Modal) && !(component.tag?.prototype instanceof Modal)) {
-            throw new Error('The ModalManager component can only show Modal components');
-        }
-
+    show(component: new () => Modal, props: ComponentProps = {}) {
         clearTimeout(this.hideTimeout);
 
         this.showing = true;
-        this.modal = component.tag || component.constructor;
-        this.modalProps = component.props || component.attrs || {};
+        this.modal = component;
+        this.modalProps = props;
+        this.component = null;
 
         // Store the vnode state in app.modal.component
         extend(this.modalProps, 'oninit', (v, vnode) => (this.component = vnode.state));

js/src/forum/components/HeaderSecondary.tsx

@@ -73,18 +73,19 @@ export default class HeaderSecondary extends Component {
                     Button.component({
                         children: app.translator.trans('core.forum.header.sign_up_link'),
                         className: 'Button Button--link',
-                        onclick: () => app.modal.show(new SignUpModal()),
+                        onclick: () => app.modal.show(SignUpModal),
                     }),
                     10
                 );
             }
+            ``;
 
             items.add(
                 'logIn',
                 Button.component({
                     children: app.translator.trans('core.forum.header.log_in_link'),
                     className: 'Button Button--link',
-                    onclick: () => app.modal.show(new LogInModal()),
+                    onclick: () => app.modal.show(LogInModal),
                 }),
                 0
             );

js/src/forum/components/LogInModal.tsx

@@ -144,7 +144,7 @@ export default class LogInModal extends Modal<LogInModalProps> {
         const email = this.identification();
         const props = email.indexOf('@') !== -1 ? { email } : undefined;
 
-        app.modal.show(new ForgotPasswordModal(props));
+        app.modal.show(ForgotPasswordModal, props);
     }
 
     /**
@@ -158,7 +158,7 @@ export default class LogInModal extends Modal<LogInModalProps> {
         const identification = this.identification();
         props[identification.indexOf('@') !== -1 ? 'email' : 'username'] = identification;
 
-        // app.modal.show(new SignUpModal(props));
+        // app.modal.show(SignUpModal, props);
     }
 
     oncreate(vnode) {

js/src/forum/components/SettingsPage.tsx

@@ -71,7 +71,7 @@ export default class SettingsPage extends UserPage {
             Button.component({
                 children: app.translator.trans('core.forum.settings.change_password_button'),
                 className: 'Button',
-                onclick: () => app.modal.show(new ChangePasswordModal()),
+                onclick: () => app.modal.show(ChangePasswordModal),
             })
         );
 
@@ -80,7 +80,7 @@ export default class SettingsPage extends UserPage {
             Button.component({
                 children: app.translator.trans('core.forum.settings.change_email_button'),
                 className: 'Button',
-                onclick: () => app.modal.show(new ChangeEmailModal()),
+                onclick: () => app.modal.show(ChangeEmailModal),
             })
         );
 

js/src/forum/utils/DiscussionControls.tsx

@@ -185,7 +185,7 @@ export default {
                 }
             }
 
-            app.modal.show(new LogInModal());
+            app.modal.show(LogInModal);
 
             reject();
         });
@@ -234,11 +234,9 @@ export default {
      * Rename the discussion.
      */
     renameAction(this: Discussion) {
-        return app.modal.show(
-            new RenameDiscussionModal({
-                currentTitle: this.title(),
-                discussion: this,
-            })
-        );
+        return app.modal.show(RenameDiscussionModal, {
+            currentTitle: this.title(),
+            discussion: this,
+        });
     },
 };

js/src/forum/utils/UserControls.ts

@@ -118,6 +118,6 @@ export default {
      * Edit the user.
      */
     editAction(user: User) {
-        app.modal.show(new EditUserModal({ user }));
+        app.modal.show(EditUserModal, { user });
     },
 };