83 lines
2.5 KiB
TypeScript
83 lines
2.5 KiB
TypeScript
import React from 'react';
|
|
import SideBar, {SideBarTitle} from '../../elements/SideBar/SideBar';
|
|
import Tag from '../../elements/Tag/Tag';
|
|
import NewTagPopup from '../../elements/Popups/NewTagPopup/NewTagPopup';
|
|
import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
|
|
import {Route, Switch} from 'react-router-dom';
|
|
import {DefaultTags} from '../../types/GeneralTypes';
|
|
import {CategoryViewWR} from './CategoryView';
|
|
import TagView from './TagView';
|
|
|
|
|
|
interface CategoryPageState {
|
|
popupvisible: boolean;
|
|
subtitle: string;
|
|
}
|
|
|
|
/**
|
|
* Component for Category Page
|
|
* Contains a Tag Overview and loads specific Tag videos in VideoContainer
|
|
*/
|
|
class CategoryPage extends React.Component<{}, CategoryPageState> {
|
|
constructor(props: {}) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
popupvisible: false,
|
|
subtitle: ''
|
|
};
|
|
|
|
this.setSubTitle = this.setSubTitle.bind(this);
|
|
}
|
|
|
|
render(): JSX.Element {
|
|
return (
|
|
<>
|
|
<PageTitle
|
|
title='Categories'
|
|
subtitle={this.state.subtitle}/>
|
|
|
|
<SideBar>
|
|
<SideBarTitle>Default Tags:</SideBarTitle>
|
|
<Tag tagInfo={DefaultTags.all}/>
|
|
<Tag tagInfo={DefaultTags.fullhd}/>
|
|
<Tag tagInfo={DefaultTags.hd}/>
|
|
<Tag tagInfo={DefaultTags.lowq}/>
|
|
|
|
<Line/>
|
|
<button data-testid='btnaddtag' className='btn btn-success' onClick={(): void => {
|
|
this.setState({popupvisible: true});
|
|
}}>Add a new Tag!
|
|
</button>
|
|
</SideBar>
|
|
<Switch>
|
|
<Route path='/categories/:id'>
|
|
<CategoryViewWR setSubTitle={this.setSubTitle}/>
|
|
</Route>
|
|
<Route path='/categories'>
|
|
<TagView setSubTitle={this.setSubTitle}/>
|
|
</Route>
|
|
</Switch>
|
|
|
|
{this.state.popupvisible ?
|
|
<NewTagPopup onHide={(): void => {
|
|
this.setState({popupvisible: false});
|
|
// this.loadTags();
|
|
}}/> :
|
|
null
|
|
}
|
|
</>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* set the subtitle of this page
|
|
* @param subtitle string as subtitle
|
|
*/
|
|
setSubTitle(subtitle: string): void {
|
|
this.setState({subtitle: subtitle});
|
|
}
|
|
}
|
|
|
|
export default CategoryPage;
|