refactor: improve extensibility

js/src/forum/components/SolvedFilter.tsx

@@ -0,0 +1,44 @@
+import app from 'flarum/forum/app';
+import Component, { ComponentAttrs } from 'flarum/common/Component';
+import Dropdown from 'flarum/common/components/Dropdown';
+import Button from 'flarum/common/components/Button';
+
+export interface SolvedFilterAttrs extends ComponentAttrs {
+  selected: number;
+}
+
+export default class SolvedFilter extends Component<SolvedFilterAttrs> {
+  view() {
+    const { selected } = this.attrs;
+    const options = ['all', 'solved', 'unsolved'];
+
+    return Dropdown.component(
+      {
+        buttonClassName: 'Button',
+        label: app.translator.trans(
+          `fof-best-answer.forum.filter.${options[selected] || Object.keys(options).map((key) => options[Number(key)])[0]}_label`
+        ),
+        accessibleToggleLabel: app.translator.trans('fof-best-answer.forum.filter.accessible_label'),
+      },
+      Object.keys(options).map((value) => {
+        const label = options[Number(value)];
+        const active = (selected || Object.keys(options)[0]) === value;
+
+        return Button.component(
+          {
+            icon: active ? 'fas fa-check' : true,
+            active: active,
+            onclick: () => {
+              app.discussions.bestAnswer = value;
+              if (value === '0') {
+                delete app.discussions.bestAnswer;
+              }
+              app.discussions.refresh();
+            },
+          },
+          app.translator.trans(`fof-best-answer.forum.filter.${label}_label`)
+        );
+      })
+    );
+  }
+}

js/src/forum/components/index.ts

@@ -6,6 +6,7 @@ import SelectBestAnswerItem from './SelectBestAnswerItem';
 import SelectBestAnswerNotification from './SelectBestAnswerNotification';
 import SolutionSearchItem from './SolutionSearchItem';
 import SolutionSearchSource from './SolutionSearchSource';
+import SolvedFilter from './SolvedFilter';
 
 export const components = {
   SelectBestAnswerItem,
@@ -16,4 +17,5 @@ export const components = {
   BestAnswerInDiscussionNotification,
   SelectBestAnswerNotification,
   SolutionSearchItem,
+  SolvedFilter,
 };

js/src/forum/extenders/extendIndexPage.tsx

@@ -1,8 +1,7 @@
 import app from 'flarum/forum/app';
 import { extend } from 'flarum/common/extend';
 import IndexPage from 'flarum/forum/components/IndexPage';
-import Dropdown from 'flarum/common/components/Dropdown';
-import Button from 'flarum/common/components/Button';
+import SolvedFilter from '../components/SolvedFilter';
 
 export default function extendIndexPage() {
   extend(IndexPage.prototype, 'sidebarItems', function (items) {
@@ -37,40 +36,8 @@ export default function extendIndexPage() {
       return;
     }
 
-    const options = ['all', 'solved', 'unsolved'];
-
     const selected = app.discussions.bestAnswer as unknown as number;
 
-    items.add(
-      'solved-filter',
-      Dropdown.component(
-        {
-          buttonClassName: 'Button',
-          label: app.translator.trans(
-            `fof-best-answer.forum.filter.${options[selected] || Object.keys(options).map((key) => options[Number(key)])[0]}_label`
-          ),
-          accessibleToggleLabel: app.translator.trans('fof-best-answer.forum.filter.accessible_label'),
-        },
-        Object.keys(options).map((value) => {
-          const label = options[Number(value)];
-          const active = (selected || Object.keys(options)[0]) === value;
-
-          return Button.component(
-            {
-              icon: active ? 'fas fa-check' : true,
-              active: active,
-              onclick: () => {
-                app.discussions.bestAnswer = value;
-                if (value === '0') {
-                  delete app.discussions.bestAnswer;
-                }
-                app.discussions.refresh();
-              },
-            },
-            app.translator.trans(`fof-best-answer.forum.filter.${label}_label`)
-          );
-        })
-      )
-    );
+    items.add('solved-filter', <SolvedFilter selected={selected} />);
   });
 }