Externalize into sort-select component.

- Fixes #311

1 files changed, 12 insertions, 38 deletions

diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx
index b1ddef4c..e4ff5a50 100644
--- a/ui/src/components/main.tsx
+++ b/ui/src/components/main.tsx
@@ -20,6 +20,7 @@ import {
 } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
 import { PostListings } from './post-listings';
+import { SortSelect } from './sort-select';
 import { SiteForm } from './site-form';
 import {
   msgOp,
@@ -99,6 +100,7 @@ export class Main extends Component<any, MainState> {
 
     this.state = this.emptyState;
     this.handleEditCancel = this.handleEditCancel.bind(this);
+    this.handleSortChange = this.handleSortChange.bind(this);
 
     this.subscription = WebSocketService.Instance.subject
       .pipe(
@@ -450,37 +452,9 @@ export class Main extends Component<any, MainState> {
             {i18n.t('all')}
           </label>
         </div>
-        <select
-          value={this.state.sort}
-          onChange={linkEvent(this, this.handleSortChange)}
-          class="ml-2 custom-select custom-select-sm w-auto"
-        >
-          <option disabled>
-            <T i18nKey="sort_type">#</T>
-          </option>
-          <option value={SortType.Hot}>
-            <T i18nKey="hot">#</T>
-          </option>
-          <option value={SortType.New}>
-            <T i18nKey="new">#</T>
-          </option>
-          <option disabled>─────</option>
-          <option value={SortType.TopDay}>
-            <T i18nKey="top_day">#</T>
-          </option>
-          <option value={SortType.TopWeek}>
-            <T i18nKey="week">#</T>
-          </option>
-          <option value={SortType.TopMonth}>
-            <T i18nKey="month">#</T>
-          </option>
-          <option value={SortType.TopYear}>
-            <T i18nKey="year">#</T>
-          </option>
-          <option value={SortType.TopAll}>
-            <T i18nKey="all">#</T>
-          </option>
-        </select>
+        <span class="ml-2">
+          <SortSelect sort={this.state.sort} onChange={this.handleSortChange} />
+        </span>
       </div>
     );
   }
@@ -543,13 +517,13 @@ export class Main extends Component<any, MainState> {
     window.scrollTo(0, 0);
   }
 
-  handleSortChange(i: Main, event: any) {
-    i.state.sort = Number(event.target.value);
-    i.state.page = 1;
-    i.state.loading = true;
-    i.setState(i.state);
-    i.updateUrl();
-    i.fetchPosts();
+  handleSortChange(val: SortType) {
+    this.state.sort = val;
+    this.state.page = 1;
+    this.state.loading = true;
+    this.setState(this.state);
+    this.updateUrl();
+    this.fetchPosts();
     window.scrollTo(0, 0);
   }