fix some tests
fix merge issues
This commit is contained in:
@ -1,142 +0,0 @@
|
||||
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 {callAPI} from '../../utils/Api';
|
||||
|
||||
/**
|
||||
* The home page component showing on the initial pageload
|
||||
*/
|
||||
class HomePage extends React.Component {
|
||||
/** keyword variable needed temporary store search keyword */
|
||||
keyword = '';
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
sideinfo: {
|
||||
videonr: null,
|
||||
fullhdvideonr: null,
|
||||
hdvideonr: null,
|
||||
sdvideonr: null,
|
||||
tagnr: null
|
||||
},
|
||||
subtitle: 'All Videos',
|
||||
data: [],
|
||||
selectionnr: 0
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
// initial get of all videos
|
||||
this.fetchVideoData('All');
|
||||
this.fetchStartData();
|
||||
}
|
||||
|
||||
/**
|
||||
* fetch available videos for specified tag
|
||||
* this function clears all preview elements an reloads gravity with tag
|
||||
*
|
||||
* @param tag tag to fetch videos
|
||||
*/
|
||||
fetchVideoData(tag) {
|
||||
callAPI('video.php', {action: 'getMovies', tag: tag}, (result) => {
|
||||
this.setState({
|
||||
data: []
|
||||
});
|
||||
this.setState({
|
||||
data: result,
|
||||
selectionnr: result.length,
|
||||
tag: tag + ' Videos'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* fetch the necessary data for left info box
|
||||
*/
|
||||
fetchStartData() {
|
||||
callAPI('video.php', {action: 'getStartData'}, (result) => {
|
||||
this.setState({
|
||||
sideinfo: {
|
||||
videonr: result['total'],
|
||||
fullhdvideonr: result['fullhd'],
|
||||
hdvideonr: result['hd'],
|
||||
sdvideonr: result['sd'],
|
||||
tagnr: result['tags']
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* search for a keyword in db and update previews
|
||||
*
|
||||
* @param keyword The keyword to search for
|
||||
*/
|
||||
searchVideos(keyword) {
|
||||
console.log('search called');
|
||||
|
||||
callAPI('video.php', {action: 'getSearchKeyWord', keyword: keyword}, (result) => {
|
||||
this.setState({
|
||||
data: []
|
||||
});
|
||||
this.setState({
|
||||
data: result,
|
||||
selectionnr: result.length,
|
||||
tag: 'Search result: ' + keyword
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<PageTitle
|
||||
title='Home Page'
|
||||
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;
|
||||
}}/>
|
||||
<button data-testid='searchbtnsubmit' className='btn btn-success' type='submit'>Search</button>
|
||||
</form>
|
||||
</PageTitle>
|
||||
<SideBar>
|
||||
<SideBarTitle>Infos:</SideBarTitle>
|
||||
<Line/>
|
||||
<SideBarItem><b>{this.state.sideinfo.videonr}</b> Videos Total!</SideBarItem>
|
||||
<SideBarItem><b>{this.state.sideinfo.fullhdvideonr}</b> FULL-HD Videos!</SideBarItem>
|
||||
<SideBarItem><b>{this.state.sideinfo.hdvideonr}</b> HD Videos!</SideBarItem>
|
||||
<SideBarItem><b>{this.state.sideinfo.sdvideonr}</b> SD Videos!</SideBarItem>
|
||||
<SideBarItem><b>{this.state.sideinfo.tagnr}</b> different Tags!</SideBarItem>
|
||||
<Line/>
|
||||
<SideBarTitle>Default Tags:</SideBarTitle>
|
||||
<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
|
||||
data={this.state.data}/> :
|
||||
<div>No Data found!</div>}
|
||||
<div className={style.rightinfo}>
|
||||
|
||||
</div>
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default HomePage;
|
||||
@ -1,7 +1,8 @@
|
||||
import {shallow} from 'enzyme';
|
||||
import React from 'react';
|
||||
import HomePage from './HomePage';
|
||||
import {HomePage} from './HomePage';
|
||||
import VideoContainer from '../../elements/VideoContainer/VideoContainer';
|
||||
import {SearchHandling} from './SearchHandling';
|
||||
|
||||
describe('<HomePage/>', function () {
|
||||
it('renders without crashing ', function () {
|
||||
@ -54,23 +55,15 @@ describe('<HomePage/>', function () {
|
||||
});
|
||||
});
|
||||
|
||||
it('test form submit', done => {
|
||||
global.fetch = global.prepareFetchApi([{}, {}]);
|
||||
|
||||
it('test form submit', () => {
|
||||
const func = jest.fn();
|
||||
const wrapper = shallow(<HomePage/>);
|
||||
wrapper.setProps({history: {push: () => func()}});
|
||||
|
||||
const fakeEvent = {preventDefault: () => console.log('preventDefault')};
|
||||
wrapper.find('.searchform').simulate('submit', fakeEvent);
|
||||
|
||||
expect(wrapper.state().selectionnr).toBe(0);
|
||||
|
||||
process.nextTick(() => {
|
||||
// state to be set correctly with response
|
||||
expect(wrapper.state().selectionnr).toBe(2);
|
||||
|
||||
global.fetch.mockClear();
|
||||
done();
|
||||
});
|
||||
expect(func).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('test no backend connection behaviour', done => {
|
||||
@ -123,3 +116,24 @@ describe('<HomePage/>', function () {
|
||||
testBtn(tags.first());
|
||||
});
|
||||
});
|
||||
|
||||
describe('<SearchHandling/>', () => {
|
||||
it('renders without crashing', function () {
|
||||
const wrapper = shallow(<SearchHandling match={{params: {name: 'testname'}}}/>);
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
it('renders videos correctly into container', function () {
|
||||
const wrapper = shallow(<SearchHandling match={{params: {name: 'testname'}}}/>);
|
||||
|
||||
wrapper.setState({
|
||||
data: [{
|
||||
movie_id: 42,
|
||||
movie_name: 'testname'
|
||||
}]
|
||||
});
|
||||
|
||||
// expect video container to be visible
|
||||
expect(wrapper.find('VideoContainer')).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
|
||||
156
src/pages/HomePage/HomePage.tsx
Normal file
156
src/pages/HomePage/HomePage.tsx
Normal file
@ -0,0 +1,156 @@
|
||||
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 {callAPI} from '../../utils/Api';
|
||||
import {Route, Switch, withRouter} from 'react-router-dom';
|
||||
import {VideoUnloadedType} from '../../api/VideoTypes';
|
||||
import {RouteComponentProps} from 'react-router';
|
||||
import SearchHandling from './SearchHandling';
|
||||
|
||||
interface props extends RouteComponentProps {}
|
||||
|
||||
interface state {
|
||||
sideinfo: {
|
||||
videonr: number,
|
||||
fullhdvideonr: number,
|
||||
hdvideonr: number,
|
||||
sdvideonr: number,
|
||||
tagnr: number
|
||||
},
|
||||
subtitle: string,
|
||||
data: VideoUnloadedType[],
|
||||
selectionnr: number
|
||||
}
|
||||
|
||||
interface startDataData {
|
||||
total: number;
|
||||
fullhd: number;
|
||||
hd: number;
|
||||
sd: number;
|
||||
tags: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* The home page component showing on the initial pageload
|
||||
*/
|
||||
export class HomePage extends React.Component<props, state> {
|
||||
/** keyword variable needed temporary store search keyword */
|
||||
keyword = '';
|
||||
|
||||
constructor(props: props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
sideinfo: {
|
||||
videonr: 0,
|
||||
fullhdvideonr: 0,
|
||||
hdvideonr: 0,
|
||||
sdvideonr: 0,
|
||||
tagnr: 0
|
||||
},
|
||||
subtitle: 'All Videos',
|
||||
data: [],
|
||||
selectionnr: 0
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount(): void {
|
||||
// initial get of all videos
|
||||
this.fetchVideoData('All');
|
||||
this.fetchStartData();
|
||||
}
|
||||
|
||||
/**
|
||||
* fetch available videos for specified tag
|
||||
* this function clears all preview elements an reloads gravity with tag
|
||||
*
|
||||
* @param tag tag to fetch videos
|
||||
*/
|
||||
fetchVideoData(tag: string): void {
|
||||
callAPI('video.php', {action: 'getMovies', tag: tag}, (result: VideoUnloadedType[]) => {
|
||||
this.setState({
|
||||
data: []
|
||||
});
|
||||
this.setState({
|
||||
data: result,
|
||||
selectionnr: result.length,
|
||||
subtitle: `${tag} Videos`
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* fetch the necessary data for left info box
|
||||
*/
|
||||
fetchStartData(): void {
|
||||
callAPI('video.php', {action: 'getStartData'}, (result: startDataData) => {
|
||||
this.setState({
|
||||
sideinfo: {
|
||||
videonr: result['total'],
|
||||
fullhdvideonr: result['fullhd'],
|
||||
hdvideonr: result['hd'],
|
||||
sdvideonr: result['sd'],
|
||||
tagnr: result['tags']
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
render(): JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<Switch>
|
||||
<Route path='/search/:name'>
|
||||
<SearchHandling/>
|
||||
</Route>
|
||||
<Route path='/'>
|
||||
<PageTitle
|
||||
title='Home Page'
|
||||
subtitle={this.state.subtitle + ' - ' + this.state.selectionnr}>
|
||||
<form className={'form-inline ' + style.searchform} onSubmit={(e): void => {
|
||||
e.preventDefault();
|
||||
this.props.history.push('/search/' + this.keyword);
|
||||
}}>
|
||||
<input data-testid='searchtextfield' className='form-control mr-sm-2'
|
||||
type='text' placeholder='Search'
|
||||
onChange={(e): void => {
|
||||
this.keyword = e.target.value;
|
||||
}}/>
|
||||
<button data-testid='searchbtnsubmit' className='btn btn-success' type='submit'>Search</button>
|
||||
</form>
|
||||
</PageTitle>
|
||||
<SideBar>
|
||||
<SideBarTitle>Infos:</SideBarTitle>
|
||||
<Line/>
|
||||
<SideBarItem><b>{this.state.sideinfo.videonr}</b> Videos Total!</SideBarItem>
|
||||
<SideBarItem><b>{this.state.sideinfo.fullhdvideonr}</b> FULL-HD Videos!</SideBarItem>
|
||||
<SideBarItem><b>{this.state.sideinfo.hdvideonr}</b> HD Videos!</SideBarItem>
|
||||
<SideBarItem><b>{this.state.sideinfo.sdvideonr}</b> SD Videos!</SideBarItem>
|
||||
<SideBarItem><b>{this.state.sideinfo.tagnr}</b> different Tags!</SideBarItem>
|
||||
<Line/>
|
||||
<SideBarTitle>Default Tags:</SideBarTitle>
|
||||
<Tag tagInfo={{tag_name: 'All', tag_id: -1}} onclick={(): void => this.fetchVideoData('All')}/>
|
||||
<Tag tagInfo={{tag_name: 'FullHd', tag_id: -1}} onclick={(): void => this.fetchVideoData('FullHd')}/>
|
||||
<Tag tagInfo={{tag_name: 'LowQuality', tag_id: -1}} onclick={(): void => this.fetchVideoData('LowQuality')}/>
|
||||
<Tag tagInfo={{tag_name: 'HD', tag_id: -1}} onclick={(): void => this.fetchVideoData('HD')}/>
|
||||
</SideBar>
|
||||
{this.state.data.length !== 0 ?
|
||||
<VideoContainer
|
||||
data={this.state.data}/> :
|
||||
<div>No Data found!</div>}
|
||||
<div className={style.rightinfo}>
|
||||
|
||||
</div>
|
||||
</Route>
|
||||
</Switch>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withRouter(HomePage);
|
||||
70
src/pages/HomePage/SearchHandling.tsx
Normal file
70
src/pages/HomePage/SearchHandling.tsx
Normal file
@ -0,0 +1,70 @@
|
||||
import {RouteComponentProps} from 'react-router';
|
||||
import React from 'react';
|
||||
import {withRouter} from 'react-router-dom';
|
||||
import {callAPI} from '../../utils/Api';
|
||||
import {VideoUnloadedType} from '../../api/VideoTypes';
|
||||
import VideoContainer from '../../elements/VideoContainer/VideoContainer';
|
||||
import PageTitle from '../../elements/PageTitle/PageTitle';
|
||||
import SideBar from '../../elements/SideBar/SideBar';
|
||||
|
||||
interface params {
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface props extends RouteComponentProps<params> {}
|
||||
|
||||
interface state {
|
||||
data: VideoUnloadedType[];
|
||||
}
|
||||
|
||||
export class SearchHandling extends React.Component<props, state> {
|
||||
constructor(props: props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
data: []
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount(): void {
|
||||
this.searchVideos(this.props.match.params.name);
|
||||
}
|
||||
|
||||
render(): JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<PageTitle title='Search' subtitle={this.props.match.params.name + ': ' + this.state.data.length}/>
|
||||
<SideBar hiddenFrame/>
|
||||
{this.getVideoData()}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* get videocontainer if data loaded
|
||||
*/
|
||||
getVideoData(): JSX.Element {
|
||||
if (this.state.data.length !== 0) {
|
||||
return (
|
||||
<VideoContainer data={this.state.data}/>
|
||||
);
|
||||
} else {
|
||||
return (<div>No Data found!</div>);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* search for a keyword in db and update previews
|
||||
*
|
||||
* @param keyword The keyword to search for
|
||||
*/
|
||||
searchVideos(keyword: string): void {
|
||||
callAPI('video.php', {action: 'getSearchKeyWord', keyword: keyword}, (result: VideoUnloadedType[]) => {
|
||||
this.setState({
|
||||
data: result
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default withRouter(SearchHandling);
|
||||
Reference in New Issue
Block a user