remember sortby selection with localstorage

This commit is contained in:
lukas 2022-03-01 13:20:39 +01:00
parent 43091ff7ed
commit 1adafef4e1

View File

@ -29,7 +29,7 @@ interface state {
subtitle: string; subtitle: string;
data: VideoTypes.VideoUnloadedType[]; data: VideoTypes.VideoUnloadedType[];
selectionnr: number; selectionnr: number;
sortby: string; sortby: SortBy;
} }
/** /**
@ -39,9 +39,33 @@ export class HomePage extends React.Component<Props, state> {
/** keyword variable needed temporary store search keyword */ /** keyword variable needed temporary store search keyword */
keyword = ''; keyword = '';
/**
* get text label from sort type
* @param type SortBy type
*/
getLabelFromSortType(type: SortBy): String {
switch (type) {
case SortBy.date:
return 'Date Added';
case SortBy.length:
return 'Length';
case SortBy.likes:
return 'Most likes';
case SortBy.name:
return 'Name';
case SortBy.random:
return 'Random';
default:
return '';
}
}
constructor(props: Props) { constructor(props: Props) {
super(props); super(props);
// get previously stored location from localstorage
const storedSelection = global.localStorage.getItem('sortby');
this.state = { this.state = {
sideinfo: { sideinfo: {
VideoNr: 0, VideoNr: 0,
@ -54,11 +78,10 @@ export class HomePage extends React.Component<Props, state> {
subtitle: 'All Videos', subtitle: 'All Videos',
data: [], data: [],
selectionnr: 0, selectionnr: 0,
sortby: 'Date Added' sortby: storedSelection == null ? SortBy.date : parseInt(storedSelection, 10)
}; };
} }
sortState = SortBy.date;
tagState = DefaultTags.all; tagState = DefaultTags.all;
componentDidMount(): void { componentDidMount(): void {
@ -87,7 +110,7 @@ export class HomePage extends React.Component<Props, state> {
fetchVideoData(): void { fetchVideoData(): void {
callAPI( callAPI(
APINode.Video, APINode.Video,
{action: 'getMovies', Tag: this.tagState.TagId, Sort: this.sortState}, {action: 'getMovies', Tag: this.tagState.TagId, Sort: this.state.sortby},
(result: {Videos: VideoTypes.VideoUnloadedType[]; TagName: string}) => { (result: {Videos: VideoTypes.VideoUnloadedType[]; TagName: string}) => {
this.setState({ this.setState({
data: result.Videos, data: result.Videos,
@ -190,15 +213,25 @@ export class HomePage extends React.Component<Props, state> {
<span className={style.sortbyLabel}>Sort By: </span> <span className={style.sortbyLabel}>Sort By: </span>
<div className={style.dropdown}> <div className={style.dropdown}>
<span className={style.dropbtn}> <span className={style.dropbtn}>
<span>{this.state.sortby}</span> <span>{this.getLabelFromSortType(this.state.sortby)}</span>
<FontAwesomeIcon style={{marginLeft: 3, paddingBottom: 3}} icon={faSortDown} size='1x' /> <FontAwesomeIcon style={{marginLeft: 3, paddingBottom: 3}} icon={faSortDown} size='1x' />
</span> </span>
<div className={style.dropdownContent}> <div className={style.dropdownContent}>
<span onClick={(): void => this.onDropDownItemClick(SortBy.date, 'Date Added')}>Date Added</span> <span onClick={(): void => this.onDropDownItemClick(SortBy.date)}>
<span onClick={(): void => this.onDropDownItemClick(SortBy.likes, 'Most likes')}>Most likes</span> {this.getLabelFromSortType(SortBy.date)}
<span onClick={(): void => this.onDropDownItemClick(SortBy.random, 'Random')}>Random</span> </span>
<span onClick={(): void => this.onDropDownItemClick(SortBy.name, 'Name')}>Name</span> <span onClick={(): void => this.onDropDownItemClick(SortBy.likes)}>
<span onClick={(): void => this.onDropDownItemClick(SortBy.length, 'Length')}>Length</span> {this.getLabelFromSortType(SortBy.likes)}
</span>
<span onClick={(): void => this.onDropDownItemClick(SortBy.random)}>
{this.getLabelFromSortType(SortBy.random)}
</span>
<span onClick={(): void => this.onDropDownItemClick(SortBy.name)}>
{this.getLabelFromSortType(SortBy.name)}
</span>
<span onClick={(): void => this.onDropDownItemClick(SortBy.length)}>
{this.getLabelFromSortType(SortBy.length)}
</span>
</div> </div>
</div> </div>
</div> </div>
@ -214,10 +247,12 @@ export class HomePage extends React.Component<Props, state> {
* @param type type of sort action * @param type type of sort action
* @param name new header title * @param name new header title
*/ */
onDropDownItemClick(type: SortBy, name: string): void { onDropDownItemClick(type: SortBy): void {
this.sortState = type; this.setState({sortby: type}, (): void => {
this.setState({sortby: name}); global.localStorage.setItem('sortby', type.toString());
this.fetchVideoData();
this.fetchVideoData();
});
} }
} }