add new sortby button and allow sorting on homepage
This commit is contained in:
@ -7,3 +7,56 @@
|
||||
float: right;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
|
||||
/* Style The Dropdown Button */
|
||||
.dropbtn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* The container <div> - needed to position the dropdown content */
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Dropdown Content (Hidden by Default) */
|
||||
.dropdownContent {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #f9f9f9;
|
||||
min-width: 160px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Links inside the dropdown */
|
||||
.dropdownContent span {
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Change color of dropdown links on hover */
|
||||
.dropdownContent span:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
/* Show the dropdown menu on hover */
|
||||
.dropdown:hover .dropdownContent {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Change the background color of the dropdown button when the dropdown content is shown */
|
||||
.dropdown:hover .dropbtn {
|
||||
background-color: #3574fe;
|
||||
}
|
||||
|
||||
@ -11,6 +11,16 @@ import {RouteComponentProps} from 'react-router';
|
||||
import SearchHandling from './SearchHandling';
|
||||
import {VideoTypes} from '../../types/ApiTypes';
|
||||
import {DefaultTags} from '../../types/GeneralTypes';
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
||||
import {faSortDown} from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
// eslint-disable-next-line no-shadow
|
||||
enum SortBy {
|
||||
date,
|
||||
likes,
|
||||
random,
|
||||
name
|
||||
}
|
||||
|
||||
interface Props extends RouteComponentProps {}
|
||||
|
||||
@ -19,6 +29,7 @@ interface state {
|
||||
subtitle: string;
|
||||
data: VideoTypes.VideoUnloadedType[];
|
||||
selectionnr: number;
|
||||
sortby: string;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -42,13 +53,17 @@ export class HomePage extends React.Component<Props, state> {
|
||||
},
|
||||
subtitle: 'All Videos',
|
||||
data: [],
|
||||
selectionnr: 0
|
||||
selectionnr: 0,
|
||||
sortby: 'Date Added'
|
||||
};
|
||||
}
|
||||
|
||||
sortState = SortBy.date;
|
||||
tagState = DefaultTags.all;
|
||||
|
||||
componentDidMount(): void {
|
||||
// initial get of all videos
|
||||
this.fetchVideoData(DefaultTags.all.TagId);
|
||||
this.fetchVideoData();
|
||||
this.fetchStartData();
|
||||
}
|
||||
|
||||
@ -58,14 +73,11 @@ export class HomePage extends React.Component<Props, state> {
|
||||
*
|
||||
* @param tag tag to fetch videos
|
||||
*/
|
||||
fetchVideoData(tag: number): void {
|
||||
fetchVideoData(): void {
|
||||
callAPI(
|
||||
APINode.Video,
|
||||
{action: 'getMovies', Tag: tag},
|
||||
{action: 'getMovies', Tag: this.tagState.TagId, Sort: this.sortState},
|
||||
(result: {Videos: VideoTypes.VideoUnloadedType[]; TagName: string}) => {
|
||||
this.setState({
|
||||
data: []
|
||||
});
|
||||
this.setState({
|
||||
data: result.Videos,
|
||||
selectionnr: result.Videos.length
|
||||
@ -135,32 +147,80 @@ export class HomePage extends React.Component<Props, state> {
|
||||
<Tag
|
||||
tagInfo={{TagName: 'All', TagId: DefaultTags.all.TagId}}
|
||||
onclick={(): void => {
|
||||
this.fetchVideoData(DefaultTags.all.TagId);
|
||||
this.tagState = DefaultTags.all;
|
||||
this.fetchVideoData();
|
||||
this.setState({subtitle: 'All Videos'});
|
||||
}}
|
||||
/>
|
||||
<Tag
|
||||
tagInfo={{TagName: 'Full Hd', TagId: DefaultTags.fullhd.TagId}}
|
||||
onclick={(): void => {
|
||||
this.fetchVideoData(DefaultTags.fullhd.TagId);
|
||||
this.tagState = DefaultTags.fullhd;
|
||||
this.fetchVideoData();
|
||||
this.setState({subtitle: 'Full Hd Videos'});
|
||||
}}
|
||||
/>
|
||||
<Tag
|
||||
tagInfo={{TagName: 'Low Quality', TagId: DefaultTags.lowq.TagId}}
|
||||
onclick={(): void => {
|
||||
this.fetchVideoData(DefaultTags.lowq.TagId);
|
||||
this.tagState = DefaultTags.lowq;
|
||||
this.fetchVideoData();
|
||||
this.setState({subtitle: 'Low Quality Videos'});
|
||||
}}
|
||||
/>
|
||||
<Tag
|
||||
tagInfo={{TagName: 'HD', TagId: DefaultTags.hd.TagId}}
|
||||
onclick={(): void => {
|
||||
this.fetchVideoData(DefaultTags.hd.TagId);
|
||||
this.tagState = DefaultTags.hd;
|
||||
this.fetchVideoData();
|
||||
this.setState({subtitle: 'HD Videos'});
|
||||
}}
|
||||
/>
|
||||
</SideBar>
|
||||
<div>
|
||||
<span style={{color: 'grey', marginRight: 5}}>Sort By: </span>
|
||||
<div className={style.dropdown}>
|
||||
<span className={style.dropbtn}>
|
||||
<span>{this.state.sortby}</span>
|
||||
<FontAwesomeIcon style={{marginLeft: 3, paddingBottom: 3}} icon={faSortDown} size='1x' />
|
||||
</span>
|
||||
<div className={style.dropdownContent}>
|
||||
<span
|
||||
onClick={(): void => {
|
||||
this.sortState = SortBy.date;
|
||||
this.setState({sortby: 'Date Added '});
|
||||
this.fetchVideoData();
|
||||
}}>
|
||||
Date Added
|
||||
</span>
|
||||
<span
|
||||
onClick={(): void => {
|
||||
this.sortState = SortBy.likes;
|
||||
this.setState({sortby: 'Most likes'});
|
||||
this.fetchVideoData();
|
||||
}}>
|
||||
Most likes
|
||||
</span>
|
||||
<span
|
||||
onClick={(): void => {
|
||||
this.sortState = SortBy.random;
|
||||
this.setState({sortby: 'Random'});
|
||||
this.fetchVideoData();
|
||||
}}>
|
||||
Random
|
||||
</span>
|
||||
<span
|
||||
onClick={(): void => {
|
||||
this.sortState = SortBy.name;
|
||||
this.setState({sortby: 'Name'});
|
||||
this.fetchVideoData();
|
||||
}}>
|
||||
Name
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VideoContainer data={this.state.data} />
|
||||
<div className={style.rightinfo} />
|
||||
</Route>
|
||||
|
||||
Reference in New Issue
Block a user