diff options
Diffstat (limited to 'ui')
-rw-r--r-- | ui/package.json | 16 | ||||
-rw-r--r-- | ui/src/components/community.tsx | 56 | ||||
-rw-r--r-- | ui/src/components/inbox.tsx | 44 | ||||
-rw-r--r-- | ui/src/components/main.tsx | 50 | ||||
-rw-r--r-- | ui/src/components/search.tsx | 46 | ||||
-rw-r--r-- | ui/src/components/sort-select.tsx | 69 | ||||
-rw-r--r-- | ui/src/components/user.tsx | 55 | ||||
-rw-r--r-- | ui/src/utils.ts | 2 |
8 files changed, 148 insertions, 190 deletions
diff --git a/ui/package.json b/ui/package.json index f20c9ab0..f816b4f6 100644 --- a/ui/package.json +++ b/ui/package.json @@ -58,23 +58,13 @@ "engineStrict": true, "husky": { "hooks": { - "pre-commit": "yarn run lint && lint-staged" + "pre-commit": "lint-staged" } }, "lint-staged": { - "*.js": [ + "*.{ts,tsx,js}": [ "prettier --write", - "yarn run lint", - "git add" - ], - "*.ts": [ - "prettier --write", - "yarn run lint", - "git add" - ], - "*.tsx": [ - "prettier --write", - "yarn run lint", + "eslint --fix", "git add" ], "package.json": [ diff --git a/ui/src/components/community.tsx b/ui/src/components/community.tsx index 434f4530..efeaa1b3 100644 --- a/ui/src/components/community.tsx +++ b/ui/src/components/community.tsx @@ -17,6 +17,7 @@ import { } from '../interfaces'; import { WebSocketService } from '../services'; import { PostListings } from './post-listings'; +import { SortSelect } from './sort-select'; import { Sidebar } from './sidebar'; import { msgOp, @@ -82,6 +83,7 @@ export class Community extends Component<any, State> { super(props, context); this.state = this.emptyState; + this.handleSortChange = this.handleSortChange.bind(this); this.subscription = WebSocketService.Instance.subject .pipe( @@ -112,10 +114,13 @@ export class Community extends Component<any, State> { // Necessary for back button for some reason componentWillReceiveProps(nextProps: any) { - if (nextProps.history.action == 'POP') { - this.state = this.emptyState; + if ( + nextProps.history.action == 'POP' || + nextProps.history.action == 'PUSH' + ) { this.state.sort = this.getSortTypeFromProps(nextProps); this.state.page = this.getPageFromProps(nextProps); + this.setState(this.state); this.fetchPosts(); } } @@ -164,38 +169,8 @@ export class Community extends Component<any, State> { selects() { return ( - <div className="mb-2"> - <select - value={this.state.sort} - onChange={linkEvent(this, this.handleSortChange)} - class="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> + <div class="mb-2"> + <SortSelect sort={this.state.sort} onChange={this.handleSortChange} /> </div> ); } @@ -237,12 +212,13 @@ export class Community extends Component<any, State> { window.scrollTo(0, 0); } - handleSortChange(i: Community, event: any) { - i.state.sort = Number(event.target.value); - i.state.page = 1; - 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); } diff --git a/ui/src/components/inbox.tsx b/ui/src/components/inbox.tsx index 6e961b17..bcde9363 100644 --- a/ui/src/components/inbox.tsx +++ b/ui/src/components/inbox.tsx @@ -16,6 +16,7 @@ import { import { WebSocketService, UserService } from '../services'; import { msgOp } from '../utils'; import { CommentNodes } from './comment-nodes'; +import { SortSelect } from './sort-select'; import { i18n } from '../i18next'; import { T } from 'inferno-i18next'; @@ -54,6 +55,7 @@ export class Inbox extends Component<any, InboxState> { super(props, context); this.state = this.emptyState; + this.handleSortChange = this.handleSortChange.bind(this); this.subscription = WebSocketService.Instance.subject .pipe( @@ -153,33 +155,11 @@ export class Inbox extends Component<any, InboxState> { <T i18nKey="mentions">#</T> </option> </select> - <select - value={this.state.sort} - onChange={linkEvent(this, this.handleSortChange)} - class="custom-select custom-select-sm w-auto" - > - <option disabled> - <T i18nKey="sort_type">#</T> - </option> - <option value={SortType.New}> - <T i18nKey="new">#</T> - </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> + <SortSelect + sort={this.state.sort} + onChange={this.handleSortChange} + hideHot + /> </div> ); } @@ -300,11 +280,11 @@ export class Inbox extends Component<any, InboxState> { WebSocketService.Instance.getUserMentions(userMentionsForm); } - handleSortChange(i: Inbox, event: any) { - i.state.sort = Number(event.target.value); - i.state.page = 1; - i.setState(i.state); - i.refetch(); + handleSortChange(val: SortType) { + this.state.sort = val; + this.state.page = 1; + this.setState(this.state); + this.refetch(); } markAllAsRead() { 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); } diff --git a/ui/src/components/search.tsx b/ui/src/components/search.tsx index 68b4ee88..bba7c5ad 100644 --- a/ui/src/components/search.tsx +++ b/ui/src/components/search.tsx @@ -21,6 +21,7 @@ import { routeSortTypeToEnum, } from '../utils'; import { PostListing } from './post-listing'; +import { SortSelect } from './sort-select'; import { CommentNodes } from './comment-nodes'; import { i18n } from '../i18next'; import { T } from 'inferno-i18next'; @@ -76,6 +77,7 @@ export class Search extends Component<any, SearchState> { super(props, context); this.state = this.emptyState; + this.handleSortChange = this.handleSortChange.bind(this); this.subscription = WebSocketService.Instance.subject .pipe( @@ -203,33 +205,13 @@ export class Search extends Component<any, SearchState> { <T i18nKey="users">#</T> </option> </select> - <select - value={this.state.sort} - onChange={linkEvent(this, this.handleSortChange)} - class="custom-select custom-select-sm w-auto ml-2" - > - <option disabled> - <T i18nKey="sort_type">#</T> - </option> - <option value={SortType.New}> - <T i18nKey="new">#</T> - </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} + hideHot + /> + </span> </div> ); } @@ -438,11 +420,11 @@ export class Search extends Component<any, SearchState> { } } - handleSortChange(i: Search, event: any) { - i.state.sort = Number(event.target.value); - i.state.page = 1; - i.setState(i.state); - i.updateUrl(); + handleSortChange(val: SortType) { + this.state.sort = val; + this.state.page = 1; + this.setState(this.state); + this.updateUrl(); } handleTypeChange(i: Search, event: any) { diff --git a/ui/src/components/sort-select.tsx b/ui/src/components/sort-select.tsx new file mode 100644 index 00000000..a3ef0f8d --- /dev/null +++ b/ui/src/components/sort-select.tsx @@ -0,0 +1,69 @@ +import { Component, linkEvent } from 'inferno'; +import { SortType } from '../interfaces'; + +import { T } from 'inferno-i18next'; + +interface SortSelectProps { + sort: SortType; + onChange?(val: SortType): any; + hideHot?: boolean; +} + +interface SortSelectState { + sort: SortType; +} + +export class SortSelect extends Component<SortSelectProps, SortSelectState> { + private emptyState: SortSelectState = { + sort: this.props.sort, + }; + + constructor(props: any, context: any) { + super(props, context); + this.state = this.emptyState; + } + + render() { + return ( + <select + value={this.state.sort} + onChange={linkEvent(this, this.handleSortChange)} + class="custom-select custom-select-sm w-auto" + > + <option disabled> + <T i18nKey="sort_type">#</T> + </option> + {!this.props.hideHot && ( + <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> + ); + } + + handleSortChange(i: SortSelect, event: any) { + i.state.sort = Number(event.target.value); + i.setState(i.state); + i.props.onChange(i.state.sort); + } +} diff --git a/ui/src/components/user.tsx b/ui/src/components/user.tsx index 393d91d5..671997b9 100644 --- a/ui/src/components/user.tsx +++ b/ui/src/components/user.tsx @@ -28,6 +28,7 @@ import { setTheme, } from '../utils'; import { PostListing } from './post-listing'; +import { SortSelect } from './sort-select'; import { CommentNodes } from './comment-nodes'; import { MomentTime } from './moment-time'; import { i18n } from '../i18next'; @@ -103,6 +104,7 @@ export class User extends Component<any, UserState> { super(props, context); this.state = this.emptyState; + this.handleSortChange = this.handleSortChange.bind(this); this.state.user_id = Number(this.props.match.params.id); this.state.username = this.props.match.params.username; @@ -154,11 +156,14 @@ export class User extends Component<any, UserState> { // Necessary for back button for some reason componentWillReceiveProps(nextProps: any) { - if (nextProps.history.action == 'POP') { - this.state = this.emptyState; + if ( + nextProps.history.action == 'POP' || + nextProps.history.action == 'PUSH' + ) { this.state.view = this.getViewFromProps(nextProps); this.state.sort = this.getSortTypeFromProps(nextProps); this.state.page = this.getPageFromProps(nextProps); + this.setState(this.state); this.refetch(); } } @@ -219,33 +224,13 @@ export class User extends Component<any, UserState> { <T i18nKey="saved">#</T> </option> </select> - <select - value={this.state.sort} - onChange={linkEvent(this, this.handleSortChange)} - class="custom-select custom-select-sm w-auto ml-2" - > - <option disabled> - <T i18nKey="sort_type">#</T> - </option> - <option value={SortType.New}> - <T i18nKey="new">#</T> - </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} + hideHot + /> + </span> </div> ); } @@ -608,12 +593,12 @@ export class User extends Component<any, UserState> { WebSocketService.Instance.getUserDetails(form); } - handleSortChange(i: User, event: any) { - i.state.sort = Number(event.target.value); - i.state.page = 1; - i.setState(i.state); - i.updateUrl(); - i.refetch(); + handleSortChange(val: SortType) { + this.state.sort = val; + this.state.page = 1; + this.setState(this.state); + this.updateUrl(); + this.refetch(); } handleViewChange(i: User, event: any) { diff --git a/ui/src/utils.ts b/ui/src/utils.ts index ce221e32..867ff91e 100644 --- a/ui/src/utils.ts +++ b/ui/src/utils.ts @@ -166,6 +166,8 @@ export function routeSortTypeToEnum(sort: string): SortType { return SortType.TopWeek; } else if (sort == 'topmonth') { return SortType.TopMonth; + } else if (sort == 'topyear') { + return SortType.TopYear; } else if (sort == 'topall') { return SortType.TopAll; } |