66 lines
2.1 KiB
TypeScript
66 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import {APINode, callAPI} from '../../utils/Api';
|
|
import {ActorType} from '../../types/VideoTypes';
|
|
import ActorTile from '../../elements/ActorTile/ActorTile';
|
|
import PageTitle from '../../elements/PageTitle/PageTitle';
|
|
import SideBar from '../../elements/SideBar/SideBar';
|
|
// import style from './ActorOverviewPage.module.css';
|
|
import {Button} from '../../elements/GPElements/Button';
|
|
import NewActorPopup from '../../elements/Popups/NewActorPopup/NewActorPopup';
|
|
import DynamicContentContainer from '../../elements/DynamicContentContainer/DynamicContentContainer';
|
|
|
|
interface Props {}
|
|
|
|
interface state {
|
|
actors: ActorType[];
|
|
NActorPopupVisible: boolean;
|
|
}
|
|
|
|
class ActorOverviewPage extends React.Component<Props, state> {
|
|
constructor(props: Props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
actors: [],
|
|
NActorPopupVisible: false
|
|
};
|
|
}
|
|
|
|
componentDidMount(): void {
|
|
this.fetchAvailableActors();
|
|
}
|
|
|
|
render(): JSX.Element {
|
|
return (
|
|
<>
|
|
<PageTitle title='Actors' subtitle={this.state.actors.length + ' Actors'} />
|
|
<SideBar>
|
|
<Button title='Add Actor' onClick={(): void => this.setState({NActorPopupVisible: true})} />
|
|
</SideBar>
|
|
<DynamicContentContainer
|
|
renderElement={(el): JSX.Element => <ActorTile key={el.ActorId} actor={el} />}
|
|
data={this.state.actors}
|
|
initialLoadNr={36}
|
|
/>
|
|
|
|
{this.state.NActorPopupVisible ? (
|
|
<NewActorPopup
|
|
onHide={(): void => {
|
|
this.setState({NActorPopupVisible: false});
|
|
this.fetchAvailableActors(); // refetch actors
|
|
}}
|
|
/>
|
|
) : null}
|
|
</>
|
|
);
|
|
}
|
|
|
|
fetchAvailableActors(): void {
|
|
callAPI<ActorType[]>(APINode.Actor, {action: 'getAllActors'}, (result) => {
|
|
this.setState({actors: result});
|
|
});
|
|
}
|
|
}
|
|
|
|
export default ActorOverviewPage;
|