- 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;
+}
diff --git a/src/pages/HomePage/HomePage.test.js b/src/pages/HomePage/HomePage.test.js
index aa279fa..b321b3f 100644
--- a/src/pages/HomePage/HomePage.test.js
+++ b/src/pages/HomePage/HomePage.test.js
@@ -1,8 +1,10 @@
import {shallow} from 'enzyme';
import React from 'react';
-import {HomePage} from './HomePage';
+import {HomePage, SortBy} from './HomePage';
import VideoContainer from '../../elements/VideoContainer/VideoContainer';
import {SearchHandling} from './SearchHandling';
+import exp from "constants";
+import {DefaultTags} from "../../types/GeneralTypes";
describe('
', function () {
it('renders without crashing ', function () {
@@ -10,21 +12,6 @@ describe('
', function () {
wrapper.unmount();
});
- it('test data insertion', function () {
- const wrapper = shallow(
);
-
- expect(wrapper.find('VideoContainer')).toHaveLength(0);
-
- wrapper.setState({
- data: [
- {}, {}
- ]
- });
-
- // there shoud be loaded the Videocontainer element into dom after fetching videos correctly
- expect(wrapper.find('VideoContainer')).toHaveLength(1);
- });
-
it('test title and nr insertions', function () {
const wrapper = shallow(
);
@@ -38,23 +25,6 @@ describe('
', function () {
expect(wrapper.find('PageTitle').props().subtitle).toBe('testsubtitle - 42');
});
- it('test search field', done => {
- global.fetch = global.prepareFetchApi([{}, {}]);
-
- const wrapper = shallow(
);
-
- wrapper.find('[data-testid="searchtextfield"]').simulate('change', {target: {value: 'testvalue'}});
- wrapper.find('[data-testid="searchbtnsubmit"]').simulate('click');
-
- process.nextTick(() => {
- // state to be set correctly with response
- expect(wrapper.state().selectionnr).toBe(2);
-
- global.fetch.mockClear();
- done();
- });
- });
-
it('test form submit', () => {
const func = jest.fn();
const wrapper = shallow(
);
@@ -87,7 +57,7 @@ describe('
', function () {
});
it('test tag click', done => {
- global.fetch = prepareFetchApi(['test1', 'test2']);
+ global.fetch = prepareFetchApi({Videos: ['test1', 'test2'], TagName: 'all'});
const wrapper = shallow(
);
@@ -115,6 +85,20 @@ describe('
', function () {
testBtn(tags.first());
});
+
+ it('test sortby type change', function () {
+ const wrapper = shallow(
);
+
+ // expect those default values
+ expect(wrapper.state().sortby).toBe('Date Added');
+ expect(wrapper.instance().sortState).toBe(SortBy.date);
+ expect(wrapper.instance().tagState).toBe(DefaultTags.all);
+
+ wrapper.instance().onDropDownItemClick(SortBy.name, 'namesort');
+
+ expect(wrapper.state().sortby).toBe('namesort');
+ expect(wrapper.instance().sortState).toBe(SortBy.name);
+ });
});
describe('
', () => {
diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
index 3b51274..752e259 100644
--- a/src/pages/HomePage/HomePage.tsx
+++ b/src/pages/HomePage/HomePage.tsx
@@ -10,25 +10,37 @@ import {Route, Switch, withRouter} from 'react-router-dom';
import {RouteComponentProps} from 'react-router';
import SearchHandling from './SearchHandling';
import {VideoTypes} from '../../types/ApiTypes';
-import {DefaultTags} from "../../types/GeneralTypes";
+import {DefaultTags} from '../../types/GeneralTypes';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faSortDown} from '@fortawesome/free-solid-svg-icons';
-interface props extends RouteComponentProps {}
+// eslint-disable-next-line no-shadow
+export enum SortBy {
+ date,
+ likes,
+ random,
+ name,
+ length
+}
+
+interface Props extends RouteComponentProps {}
interface state {
- sideinfo: VideoTypes.startDataType
- subtitle: string,
- data: VideoTypes.VideoUnloadedType[],
- selectionnr: number
+ sideinfo: VideoTypes.startDataType;
+ subtitle: string;
+ data: VideoTypes.VideoUnloadedType[];
+ selectionnr: number;
+ sortby: string;
}
/**
* The home page component showing on the initial pageload
*/
-export class HomePage extends React.Component
{
+export class HomePage extends React.Component {
/** keyword variable needed temporary store search keyword */
keyword = '';
- constructor(props: props) {
+ constructor(props: Props) {
super(props);
this.state = {
@@ -38,17 +50,21 @@ export class HomePage extends React.Component {
HDNr: 0,
SDNr: 0,
DifferentTags: 0,
- Tagged: 0,
+ Tagged: 0
},
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,16 +74,17 @@ export class HomePage extends React.Component {
*
* @param tag tag to fetch videos
*/
- fetchVideoData(tag: number): void {
- callAPI(APINode.Video, {action: 'getMovies', tag: tag}, (result: VideoTypes.VideoUnloadedType[]) => {
- this.setState({
- data: []
- });
- this.setState({
- data: result,
- selectionnr: result.length,
- });
- });
+ fetchVideoData(): void {
+ callAPI(
+ APINode.Video,
+ {action: 'getMovies', Tag: this.tagState.TagId, Sort: this.sortState},
+ (result: {Videos: VideoTypes.VideoUnloadedType[]; TagName: string}) => {
+ this.setState({
+ data: result.Videos,
+ selectionnr: result.Videos.length
+ });
+ }
+ );
}
/**
@@ -79,70 +96,123 @@ export class HomePage extends React.Component {
});
}
-
render(): JSX.Element {
return (
<>
-
+
-
-