diff options
author | Dessalines <tyhou13@gmx.com> | 2019-10-20 21:21:54 -0700 |
---|---|---|
committer | Dessalines <tyhou13@gmx.com> | 2019-10-20 21:21:54 -0700 |
commit | 90ce1f1a3fca5c8d8a13e91f991b23ecb77f1faf (patch) | |
tree | cd851bbdb333f3b16cfd0f5aaeed97e6f46af143 /ui/src/components | |
parent | a7dedaf273b6fd2ebd9c9b8b9d6a7d227f376797 (diff) |
Adding default sort / filter into user settings.
- Fixes #295
Diffstat (limited to 'ui/src/components')
-rw-r--r-- | ui/src/components/community.tsx | 4 | ||||
-rw-r--r-- | ui/src/components/listing-type-select.tsx | 68 | ||||
-rw-r--r-- | ui/src/components/main.tsx | 53 | ||||
-rw-r--r-- | ui/src/components/user.tsx | 64 |
4 files changed, 148 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); |