chore: major frontend JS cleanup (#3609)

extensions/subscriptions/js/src/forum/addSubscriptionBadge.js

@@ -9,23 +9,12 @@ export default function addSubscriptionBadge() {
 
     switch (this.subscription()) {
       case 'follow':
-        badge = Badge.component({
-          label: app.translator.trans('flarum-subscriptions.forum.badge.following_tooltip'),
-          icon: 'fas fa-star',
-          type: 'following',
-        });
+        badge = <Badge label={app.translator.trans('flarum-subscriptions.forum.badge.following_tooltip')} icon="fas fa-star" type="following" />;
         break;
 
       case 'ignore':
-        badge = Badge.component({
-          label: app.translator.trans('flarum-subscriptions.forum.badge.ignoring_tooltip'),
-          icon: 'far fa-eye-slash',
-          type: 'ignoring',
-        });
+        badge = <Badge label={app.translator.trans('flarum-subscriptions.forum.badge.ignoring_tooltip')} icon="far fa-eye-slash" type="ignoring" />;
         break;
-
-      default:
-      // no default
     }
 
     if (badge) {

extensions/subscriptions/js/src/forum/addSubscriptionControls.js

@@ -19,13 +19,9 @@ export default function addSubscriptionControls() {
 
       items.add(
         'subscription',
-        Button.component(
-          {
-            icon: states[subscription].icon,
-            onclick: discussion.save.bind(discussion, { subscription: states[subscription].save }),
-          },
-          states[subscription].label
-        )
+        <Button icon={states[subscription].icon} onclick={discussion.save.bind(discussion, { subscription: states[subscription].save })}>
+          {states[subscription].label}
+        </Button>
       );
     }
   });
@@ -34,7 +30,7 @@ export default function addSubscriptionControls() {
     if (app.session.user) {
       const discussion = this.discussion;
 
-      items.add('subscription', SubscriptionMenu.component({ discussion }), 80);
+      items.add('subscription', <SubscriptionMenu discussion={discussion} />, 80);
     }
   });
 }

extensions/subscriptions/js/src/forum/addSubscriptionFilter.js

@@ -12,13 +12,9 @@ export default function addSubscriptionFilter() {
 
       items.add(
         'following',
-        LinkButton.component(
-          {
-            href: app.route('following', params),
-            icon: 'fas fa-star',
-          },
-          app.translator.trans('flarum-subscriptions.forum.index.following_link')
-        ),
+        <LinkButton href={app.route('following', params)} icon="fas fa-star">
+          {app.translator.trans('flarum-subscriptions.forum.index.following_link')}
+        </LinkButton>,
         50
       );
     }

extensions/subscriptions/js/src/forum/addSubscriptionSettings.tsx

@@ -7,21 +7,20 @@ export default function () {
   extend(SettingsPage.prototype, 'notificationsItems', function (this: SettingsPage, items) {
     items.add(
       'followAfterReply',
-      Switch.component(
-        {
-          state: this.user.preferences().followAfterReply,
-          onchange: (value) => {
-            this.followAfterReplyLoading = true;
+      <Switch
+        state={this.user.preferences().followAfterReply}
+        onchange={(value) => {
+          this.followAfterReplyLoading = true;
 
-            this.user.savePreferences({ followAfterReply: value }).then(() => {
-              this.followAfterReplyLoading = false;
-              m.redraw();
-            });
-          },
-          loading: this.followAfterReplyLoading,
-        },
-        app.translator.trans('flarum-subscriptions.forum.settings.follow_after_reply_label')
-      )
+          this.user.savePreferences({ followAfterReply: value }).then(() => {
+            this.followAfterReplyLoading = false;
+            m.redraw();
+          });
+        }}
+        loading={this.followAfterReplyLoading}
+      >
+        {app.translator.trans('flarum-subscriptions.forum.settings.follow_after_reply_label')}
+      </Switch>
     );
 
     items.add(

extensions/subscriptions/js/src/forum/components/SubscriptionMenu.js

@@ -95,11 +95,11 @@ export default class SubscriptionMenu extends Dropdown {
         <ul className="Dropdown-menu dropdown-menu Dropdown-menu--right">
           {this.options.map((attrs) => (
             <li>
-              {SubscriptionMenuItem.component({
-                ...attrs,
-                onclick: this.saveSubscription.bind(this, discussion, attrs.subscription),
-                active: subscription === attrs.subscription,
-              })}
+              <SubscriptionMenuItem
+                {...attrs}
+                onclick={this.saveSubscription.bind(this, discussion, attrs.subscription)}
+                active={subscription === attrs.subscription}
+              />
             </li>
           ))}
         </ul>

extensions/subscriptions/js/src/forum/components/SubscriptionMenuItem.js

@@ -5,7 +5,7 @@ export default class SubscriptionMenuItem extends Component {
   view() {
     return (
       <button className="SubscriptionMenuItem hasIcon" onclick={this.attrs.onclick}>
-        {this.attrs.active ? icon('fas fa-check', { className: 'Button-icon' }) : ''}
+        {this.attrs.active && icon('fas fa-check', { className: 'Button-icon' })}
         <span className="SubscriptionMenuItem-label">
           {icon(this.attrs.icon, { className: 'Button-icon' })}
           <strong>{this.attrs.label}</strong>