85 lines
2.8 KiB
TypeScript
85 lines
2.8 KiB
TypeScript
import React from 'react';
|
|
import PageTitle from '../../elements/PageTitle/PageTitle';
|
|
import SideBar, {SideBarTitle} from '../../elements/SideBar/SideBar';
|
|
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
|
import {faUser} from '@fortawesome/free-solid-svg-icons';
|
|
import style from './ActorPage.module.css';
|
|
import VideoContainer from '../../elements/VideoContainer/VideoContainer';
|
|
import {APINode, callAPI} from '../../utils/Api';
|
|
import {ActorType} from '../../types/VideoTypes';
|
|
import {Link, withRouter} from 'react-router-dom';
|
|
import {RouteComponentProps} from 'react-router';
|
|
import {Button} from '../../elements/GPElements/Button';
|
|
import {ActorTypes, VideoTypes} from '../../types/ApiTypes';
|
|
|
|
interface state {
|
|
data: VideoTypes.VideoUnloadedType[];
|
|
actor: ActorType;
|
|
}
|
|
|
|
/**
|
|
* empty default props with id in url
|
|
*/
|
|
interface Props extends RouteComponentProps<{id: string}> {}
|
|
|
|
/**
|
|
* info page about a specific actor and a list of all its videos
|
|
*/
|
|
export class ActorPage extends React.Component<Props, state> {
|
|
constructor(props: Props) {
|
|
super(props);
|
|
|
|
this.state = {data: [], actor: {ActorId: 0, Name: '', Thumbnail: ''}};
|
|
}
|
|
|
|
render(): JSX.Element {
|
|
return (
|
|
<>
|
|
<PageTitle title={this.state.actor.Name} subtitle={this.state.data ? this.state.data.length + ' videos' : null}>
|
|
<span className={style.overviewbutton}>
|
|
<Link to='/actors'>
|
|
<Button onClick={(): void => {}} title='Go to Actor overview' />
|
|
</Link>
|
|
</span>
|
|
</PageTitle>
|
|
<SideBar>
|
|
<div className={style.pic}>
|
|
<FontAwesomeIcon style={{color: 'white'}} icon={faUser} size='10x' />
|
|
</div>
|
|
<SideBarTitle>Attention: This is an early preview!</SideBarTitle>
|
|
</SideBar>
|
|
<VideoContainer data={this.state.data} />
|
|
</>
|
|
);
|
|
}
|
|
|
|
componentDidMount(): void {
|
|
this.getActorInfo();
|
|
}
|
|
|
|
/**
|
|
* request more actor info from backend
|
|
*/
|
|
getActorInfo(): void {
|
|
callAPI(
|
|
APINode.Actor,
|
|
{
|
|
action: 'getActorInfo',
|
|
ActorId: parseInt(this.props.match.params.id, 10)
|
|
},
|
|
(result: ActorTypes.videofetchresult) => {
|
|
this.setState({
|
|
data: result.Videos ? result.Videos : [],
|
|
actor: result.Info
|
|
});
|
|
},
|
|
(_) => {
|
|
// if there is an load error redirect to home page
|
|
this.props.history.push('/');
|
|
}
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withRouter(ActorPage);
|