lukas/OpenMediaCenter
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

reformattings

Browse Source 
no redirect on tagclick on homepage
no multiple add of same tag possible
This commit is contained in:
Lukas Heiligenbrunner
2020-10-25 18:48:23 +00:00
parent 812c45cb13
commit 777cc2a712
43 changed files with 493 additions and 448 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/pages/HomePage/HomePage.js
View File

@@ -1,17 +1,17 @@
import React from "react";
import SideBar, {SideBarItem, SideBarTitle} from "../../elements/SideBar/SideBar";
import Tag from "../../elements/Tag/Tag";
import VideoContainer from "../../elements/VideoContainer/VideoContainer";
import React from 'react';
import SideBar, {SideBarItem, SideBarTitle} from '../../elements/SideBar/SideBar';
import Tag from '../../elements/Tag/Tag';
import VideoContainer from '../../elements/VideoContainer/VideoContainer';
import style from "./HomePage.module.css"
import PageTitle, {Line} from "../../elements/PageTitle/PageTitle";
import style from './HomePage.module.css';
import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
/**
* The home page component showing on the initial pageload
*/
class HomePage extends React.Component {
/** keyword variable needed temporary store search keyword */
keyword = "";
keyword = '';
constructor(props, context) {
super(props, context);
@@ -24,7 +24,7 @@ class HomePage extends React.Component {
sdvideonr: null,
tagnr: null
},
tag: "All",
subtitle: 'All Videos',
data: [],
selectionnr: 0
};
@@ -32,7 +32,7 @@ class HomePage extends React.Component {
componentDidMount() {
// initial get of all videos
this.fetchVideoData("all");
this.fetchVideoData('All');
this.fetchStartData();
}
@@ -47,7 +47,7 @@ class HomePage extends React.Component {
updateRequest.append('action', 'getMovies');
updateRequest.append('tag', tag);
console.log("fetching data");
console.log('fetching data from' + tag);
// fetch all videos available
fetch('/api/video.php', {method: 'POST', body: updateRequest})
@@ -58,11 +58,12 @@ class HomePage extends React.Component {
});
this.setState({
data: result,
selectionnr: result.length
selectionnr: result.length,
tag: tag + ' Videos'
});
}))
.catch(() => {
console.log("no connection to backend");
console.log('no connection to backend');
});
}
@@ -88,7 +89,7 @@ class HomePage extends React.Component {
});
}))
.catch(() => {
console.log("no connection to backend");
console.log('no connection to backend');
});
}
@@ -98,7 +99,7 @@ class HomePage extends React.Component {
* @param keyword The keyword to search for
*/
searchVideos(keyword) {
console.log("search called");
console.log('search called');
const updateRequest = new FormData();
updateRequest.append('action', 'getSearchKeyWord');
@@ -113,11 +114,12 @@ class HomePage extends React.Component {
});
this.setState({
data: result,
selectionnr: result.length
selectionnr: result.length,
tag: 'Search result: ' + keyword
});
}))
.catch(() => {
console.log("no connection to backend");
console.log('no connection to backend');
});
}
@@ -126,15 +128,15 @@ class HomePage extends React.Component {
<>
<PageTitle
title='Home Page'
subtitle={this.state.tag + " Videos - " + this.state.selectionnr}>
<form className={"form-inline " + style.searchform} onSubmit={(e) => {
subtitle={this.state.subtitle + ' - ' + this.state.selectionnr}>
<form className={'form-inline ' + style.searchform} onSubmit={(e) => {
e.preventDefault();
this.searchVideos(this.keyword);
}}>
<input data-testid='searchtextfield' className='form-control mr-sm-2'
type='text' placeholder='Search'
onChange={(e) => {
this.keyword = e.target.value
this.keyword = e.target.value;
}}/>
<button data-testid='searchbtnsubmit' className='btn btn-success' type='submit'>Search</button>
</form>
@@ -149,10 +151,10 @@ class HomePage extends React.Component {
<SideBarItem><b>{this.state.sideinfo.tagnr}</b> different Tags!</SideBarItem>
<Line/>
<SideBarTitle>Default Tags:</SideBarTitle>
<Tag viewbinding={this.props.viewbinding}>All</Tag>
<Tag viewbinding={this.props.viewbinding}>FullHd</Tag>
<Tag viewbinding={this.props.viewbinding}>LowQuality</Tag>
<Tag viewbinding={this.props.viewbinding}>HD</Tag>
<Tag onclick={() => this.fetchVideoData('All')}>All</Tag>
<Tag onclick={() => this.fetchVideoData('FullHd')}>FullHd</Tag>
<Tag onclick={() => this.fetchVideoData('LowQuality')}>LowQuality</Tag>
<Tag onclick={() => this.fetchVideoData('HD')}>HD</Tag>
</SideBar>
{this.state.data.length !== 0 ?
<VideoContainer

52
src/pages/HomePage/HomePage.test.js
View File

@@ -1,7 +1,7 @@
import {shallow} from "enzyme";
import React from "react";
import HomePage from "./HomePage";
import VideoContainer from "../../elements/VideoContainer/VideoContainer";
import {shallow} from 'enzyme';
import React from 'react';
import HomePage from './HomePage';
import VideoContainer from '../../elements/VideoContainer/VideoContainer';
describe('<HomePage/>', function () {
it('renders without crashing ', function () {
@@ -12,7 +12,7 @@ describe('<HomePage/>', function () {
it('test data insertion', function () {
const wrapper = shallow(<HomePage/>);
expect(wrapper.find("VideoContainer")).toHaveLength(0);
expect(wrapper.find('VideoContainer')).toHaveLength(0);
wrapper.setState({
data: [
@@ -21,20 +21,20 @@ describe('<HomePage/>', function () {
});
// there shoud be loaded the Videocontainer element into dom after fetching videos correctly
expect(wrapper.find("VideoContainer")).toHaveLength(1);
expect(wrapper.find('VideoContainer')).toHaveLength(1);
});
it('test title and nr insertions', function () {
const wrapper = shallow(<HomePage/>);
expect(wrapper.find("PageTitle").props().subtitle).toBe("All Videos - 0");
expect(wrapper.find('PageTitle').props().subtitle).toBe('All Videos - 0');
wrapper.setState({
tag: "testtag",
subtitle: 'testsubtitle',
selectionnr: 42
});
expect(wrapper.find("PageTitle").props().subtitle).toBe("testtag Videos - 42");
expect(wrapper.find('PageTitle').props().subtitle).toBe('testsubtitle - 42');
});
it('test search field', done => {
@@ -43,7 +43,7 @@ describe('<HomePage/>', function () {
const wrapper = shallow(<HomePage/>);
wrapper.find('[data-testid="searchtextfield"]').simulate('change', {target: {value: 'testvalue'}});
wrapper.find('[data-testid="searchbtnsubmit"]').simulate("click");
wrapper.find('[data-testid="searchbtnsubmit"]').simulate('click');
process.nextTick(() => {
// state to be set correctly with response
@@ -60,7 +60,7 @@ describe('<HomePage/>', function () {
const wrapper = shallow(<HomePage/>);
const fakeEvent = {preventDefault: () => console.log('preventDefault')};
wrapper.find(".searchform").simulate('submit', fakeEvent);
wrapper.find('.searchform').simulate('submit', fakeEvent);
expect(wrapper.state().selectionnr).toBe(0);
@@ -92,4 +92,34 @@ describe('<HomePage/>', function () {
done();
});
});
it('test tag click', done => {
global.fetch = prepareFetchApi(['test1', 'test2']);
const wrapper = shallow(<HomePage/>);
const tags = wrapper.find('SideBar').dive().find('Tag');
let i = 0;
function testBtn(e) {
e.dive().simulate('click');
process.nextTick(() => {
process.nextTick(() => {
// state to be set correctly with response
console.log('see ifits same');
expect(wrapper.state()).toMatchObject({data: ['test1', 'test2']});
wrapper.state.data = [];
i++;
if (i >= tags.length) {
done();
} else {
testBtn(tags.at(i));
}
});
});
}
testBtn(tags.first());
});
});