Adding default sort / filter into user settings.

- Fixes #295

5 files changed, 152 insertions, 41 deletions

diff --git a/ui/src/components/community.tsx b/ui/src/components/community.tsx
index efeaa1b3..8f36178c 100644
--- a/ui/src/components/community.tsx
+++ b/ui/src/components/community.tsx
@@ -15,7 +15,7 @@ import {
   GetPostsResponse,
   CreatePostLikeResponse,
 } from '../interfaces';
-import { WebSocketService } from '../services';
+import { WebSocketService, UserService } from '../services';
 import { PostListings } from './post-listings';
 import { SortSelect } from './sort-select';
 import { Sidebar } from './sidebar';
@@ -72,6 +72,8 @@ export class Community extends Component<any, State> {
   getSortTypeFromProps(props: any): SortType {
     return props.match.params.sort
       ? routeSortTypeToEnum(props.match.params.sort)
+      : UserService.Instance.user
+      ? UserService.Instance.user.default_sort_type
       : SortType.Hot;
   }
 
diff --git a/ui/src/components/listing-type-select.tsx b/ui/src/components/listing-type-select.tsx
new file mode 100644
index 00000000..d583b93c
--- /dev/null
+++ b/ui/src/components/listing-type-select.tsx
@@ -0,0 +1,68 @@
+import { Component, linkEvent } from 'inferno';
+import { ListingType } from '../interfaces';
+import { UserService } from '../services';
+
+import { i18n } from '../i18next';
+
+interface ListingTypeSelectProps {
+  type_: ListingType;
+  onChange?(val: ListingType): any;
+}
+
+interface ListingTypeSelectState {
+  type_: ListingType;
+}
+
+export class ListingTypeSelect extends Component<
+  ListingTypeSelectProps,
+  ListingTypeSelectState
+> {
+  private emptyState: ListingTypeSelectState = {
+    type_: this.props.type_,
+  };
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = this.emptyState;
+  }
+
+  render() {
+    return (
+      <div class="btn-group btn-group-toggle">
+        <label
+          className={`btn btn-sm btn-secondary 
+            ${this.state.type_ == ListingType.Subscribed && 'active'}
+            ${UserService.Instance.user == undefined ? 'disabled' : 'pointer'}
+          `}
+        >
+          <input
+            type="radio"
+            value={ListingType.Subscribed}
+            checked={this.state.type_ == ListingType.Subscribed}
+            onChange={linkEvent(this, this.handleTypeChange)}
+            disabled={UserService.Instance.user == undefined}
+          />
+          {i18n.t('subscribed')}
+        </label>
+        <label
+          className={`pointer btn btn-sm btn-secondary ${this.state.type_ ==
+            ListingType.All && 'active'}`}
+        >
+          <input
+            type="radio"
+            value={ListingType.All}
+            checked={this.state.type_ == ListingType.All}
+            onChange={linkEvent(this, this.handleTypeChange)}
+          />
+          {i18n.t('all')}
+        </label>
+      </div>
+    );
+  }
+
+  handleTypeChange(i: ListingTypeSelect, event: any) {
+    i.state.type_ = Number(event.target.value);
+    i.setState(i.state);
+    i.props.onChange(i.state.type_);
+  }
+}
diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx
index e4ff5a50..c871db72 100644
--- a/ui/src/components/main.tsx
+++ b/ui/src/components/main.tsx
@@ -21,6 +21,7 @@ import {
 import { WebSocketService, UserService } from '../services';
 import { PostListings } from './post-listings';
 import { SortSelect } from './sort-select';
+import { ListingTypeSelect } from './listing-type-select';
 import { SiteForm } from './site-form';
 import {
   msgOp,
@@ -81,13 +82,15 @@ export class Main extends Component<any, MainState> {
     return props.match.params.type
       ? routeListingTypeToEnum(props.match.params.type)
       : UserService.Instance.user
-      ? ListingType.Subscribed
+      ? UserService.Instance.user.default_listing_type
       : ListingType.All;
   }
 
   getSortTypeFromProps(props: any): SortType {
     return props.match.params.sort
       ? routeSortTypeToEnum(props.match.params.sort)
+      : UserService.Instance.user
+      ? UserService.Instance.user.default_sort_type
       : SortType.Hot;
   }
 
@@ -101,6 +104,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.handleTypeChange = this.handleTypeChange.bind(this);
 
     this.subscription = WebSocketService.Instance.subject
       .pipe(
@@ -423,35 +427,10 @@ export class Main extends Component<any, MainState> {
   selects() {
     return (
       <div className="mb-3">
-        <div class="btn-group btn-group-toggle">
-          <label
-            className={`btn btn-sm btn-secondary 
-            ${this.state.type_ == ListingType.Subscribed && 'active'}
-            ${UserService.Instance.user == undefined ? 'disabled' : 'pointer'}
-            `}
-          >
-            <input
-              type="radio"
-              value={ListingType.Subscribed}
-              checked={this.state.type_ == ListingType.Subscribed}
-              onChange={linkEvent(this, this.handleTypeChange)}
-              disabled={UserService.Instance.user == undefined}
-            />
-            {i18n.t('subscribed')}
-          </label>
-          <label
-            className={`pointer btn btn-sm btn-secondary ${this.state.type_ ==
-              ListingType.All && 'active'}`}
-          >
-            <input
-              type="radio"
-              value={ListingType.All}
-              checked={this.state.type_ == ListingType.All}
-              onChange={linkEvent(this, this.handleTypeChange)}
-            />
-            {i18n.t('all')}
-          </label>
-        </div>
+        <ListingTypeSelect
+          type_={this.state.type_}
+          onChange={this.handleTypeChange}
+        />
         <span class="ml-2">
           <SortSelect sort={this.state.sort} onChange={this.handleSortChange} />
         </span>
@@ -527,13 +506,13 @@ export class Main extends Component<any, MainState> {
     window.scrollTo(0, 0);
   }
 
-  handleTypeChange(i: Main, event: any) {
-    i.state.type_ = Number(event.target.value);
-    i.state.page = 1;
-    i.state.loading = true;
-    i.setState(i.state);
-    i.updateUrl();
-    i.fetchPosts();
+  handleTypeChange(val: ListingType) {
+    this.state.type_ = val;
+    this.state.page = 1;
+    this.state.loading = true;
+    this.setState(this.state);
+    this.updateUrl();
+    this.fetchPosts();
     window.scrollTo(0, 0);
   }
 
diff --git a/ui/src/components/user.tsx b/ui/src/components/user.tsx
index 671997b9..3006afc4 100644
--- a/ui/src/components/user.tsx
+++ b/ui/src/components/user.tsx
@@ -9,6 +9,7 @@ import {
   CommunityUser,
   GetUserDetailsForm,
   SortType,
+  ListingType,
   UserDetailsResponse,
   UserView,
   CommentResponse,
@@ -29,6 +30,7 @@ import {
 } from '../utils';
 import { PostListing } from './post-listing';
 import { SortSelect } from './sort-select';
+import { ListingTypeSelect } from './listing-type-select';
 import { CommentNodes } from './comment-nodes';
 import { MomentTime } from './moment-time';
 import { i18n } from '../i18next';
@@ -90,6 +92,8 @@ export class User extends Component<any, UserState> {
     userSettingsForm: {
       show_nsfw: null,
       theme: null,
+      default_sort_type: null,
+      default_listing_type: null,
       auth: null,
     },
     userSettingsLoading: null,
@@ -105,6 +109,12 @@ export class User extends Component<any, UserState> {
 
     this.state = this.emptyState;
     this.handleSortChange = this.handleSortChange.bind(this);
+    this.handleUserSettingsSortTypeChange = this.handleUserSettingsSortTypeChange.bind(
+      this
+    );
+    this.handleUserSettingsListingTypeChange = this.handleUserSettingsListingTypeChange.bind(
+      this
+    );
 
     this.state.user_id = Number(this.props.match.params.id);
     this.state.username = this.props.match.params.username;
@@ -403,6 +413,32 @@ export class User extends Component<any, UserState> {
                   </select>
                 </div>
               </div>
+              <form className="form-group">
+                <div class="col-12">
+                  <label>
+                    <T i18nKey="sort_type" class="mr-2">
+                      #
+                    </T>
+                  </label>
+                  <ListingTypeSelect
+                    type_={this.state.userSettingsForm.default_listing_type}
+                    onChange={this.handleUserSettingsListingTypeChange}
+                  />
+                </div>
+              </form>
+              <form className="form-group">
+                <div class="col-12">
+                  <label>
+                    <T i18nKey="type" class="mr-2">
+                      #
+                    </T>
+                  </label>
+                  <SortSelect
+                    sort={this.state.userSettingsForm.default_sort_type}
+                    onChange={this.handleUserSettingsSortTypeChange}
+                  />
+                </div>
+              </form>
               <div class="form-group">
                 <div class="col-12">
                   <div class="form-check">
@@ -421,9 +457,12 @@ export class User extends Component<any, UserState> {
                   </div>
                 </div>
               </div>
-              <div class="form-group row mb-0">
+              <div class="form-group">
                 <div class="col-12">
-                  <button type="submit" class="btn btn-secondary mr-4">
+                  <button
+                    type="submit"
+                    class="btn btn-block btn-secondary mr-4"
+                  >
                     {this.state.userSettingsLoading ? (
                       <svg class="icon icon-spinner spin">
                         <use xlinkHref="#icon-spinner"></use>
@@ -432,8 +471,13 @@ export class User extends Component<any, UserState> {
                       capitalizeFirstLetter(i18n.t('save'))
                     )}
                   </button>
+                </div>
+              </div>
+              <hr />
+              <div class="form-group mb-0">
+                <div class="col-12">
                   <button
-                    class="btn btn-danger"
+                    class="btn btn-block btn-danger"
                     onClick={linkEvent(
                       this,
                       this.handleDeleteAccountShowConfirmToggle
@@ -620,6 +664,16 @@ export class User extends Component<any, UserState> {
     i.setState(i.state);
   }
 
+  handleUserSettingsSortTypeChange(val: SortType) {
+    this.state.userSettingsForm.default_sort_type = val;
+    this.setState(this.state);
+  }
+
+  handleUserSettingsListingTypeChange(val: ListingType) {
+    this.state.userSettingsForm.default_listing_type = val;
+    this.setState(this.state);
+  }
+
   handleUserSettingsSubmit(i: User, event: any) {
     event.preventDefault();
     i.state.userSettingsLoading = true;
@@ -670,6 +724,10 @@ export class User extends Component<any, UserState> {
         this.state.userSettingsForm.theme = UserService.Instance.user.theme
           ? UserService.Instance.user.theme
           : 'darkly';
+        this.state.userSettingsForm.default_sort_type =
+          UserService.Instance.user.default_sort_type;
+        this.state.userSettingsForm.default_listing_type =
+          UserService.Instance.user.default_listing_type;
       }
       document.title = `/u/${this.state.user.name} - ${WebSocketService.Instance.site.name}`;
       window.scrollTo(0, 0);
diff --git a/ui/src/interfaces.ts b/ui/src/interfaces.ts
index 4056e05d..2f75efd9 100644
--- a/ui/src/interfaces.ts
+++ b/ui/src/interfaces.ts
@@ -75,6 +75,8 @@ export interface User {
   username: string;
   show_nsfw: boolean;
   theme: string;
+  default_sort_type: SortType;
+  default_listing_type: ListingType;
 }
 
 export interface UserView {
@@ -463,6 +465,8 @@ export interface LoginResponse {
 export interface UserSettingsForm {
   show_nsfw: boolean;
   theme: string;
+  default_sort_type: SortType;
+  default_listing_type: ListingType;
   auth: string;
 }