grishka/lemmy
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Externalize into sort-select component.

Browse source 
- Fixes #311
This commit is contained in:
Dessalines 2019-10-20 17:49:13 -07:00
parent 3a4505aaab
commit a7dedaf273
8 changed files with 148 additions and 190 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
ui/package.json vendored
View file

@ -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": [

56
ui/src/components/community.tsx vendored
View file

@ -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);
}

44
ui/src/components/inbox.tsx vendored
View file

@ -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() {

50
ui/src/components/main.tsx vendored
View file

@ -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);
}

46
ui/src/components/search.tsx vendored
View file

@ -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) {

69
ui/src/components/sort-select.tsx vendored Normal file
View file

@ -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);
}
}

55
ui/src/components/user.tsx vendored
View file

@ -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) {

2
ui/src/utils.ts vendored
View file

@ -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;
}