79 lines
2.3 KiB
JavaScript
79 lines
2.3 KiB
JavaScript
import React from "react";
|
|
import SideBar from "../elements/SideBar";
|
|
import Tag from "../elements/Tag";
|
|
|
|
import "../css/CategoryPage.css"
|
|
import {TagPreview} from "../elements/Preview";
|
|
|
|
class CategoryPage extends React.Component {
|
|
constructor(props: P, context: any) {
|
|
super(props, context);
|
|
|
|
this.props = props;
|
|
|
|
this.state = {
|
|
loadedtags: []
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.loadTags();
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<>
|
|
<div className='pageheader'>
|
|
<span className='pageheadertitle'>Category Page</span>
|
|
<span
|
|
className='pageheadersubtitle'>{this.state.loadedtags ? this.state.loadedtags.length + " different Tags" : ""}</span>
|
|
<hr/>
|
|
</div>
|
|
<SideBar>
|
|
<div className='sidebartitle'>Infos:</div>
|
|
<hr/>
|
|
<div className='sidebartitle'>Default Tags:</div>
|
|
<Tag onClick={() => {
|
|
this.setState({tag: "All"});
|
|
this.fetchVideoData("all");
|
|
}}>All
|
|
</Tag>
|
|
<Tag>FullHd</Tag>
|
|
<Tag>LowQuality</Tag>
|
|
<Tag>HD</Tag>
|
|
</SideBar>
|
|
<div id='categorycontent'>
|
|
{this.state.loadedtags ?
|
|
this.state.loadedtags.map((m) => (
|
|
<TagPreview
|
|
name={m.tag_name}
|
|
tag_id={m.tag_id}/>
|
|
)) :
|
|
"loading"
|
|
}
|
|
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* load all available tags from db.
|
|
*/
|
|
loadTags() {
|
|
const updateRequest = new FormData();
|
|
updateRequest.append('action', 'getAllTags');
|
|
|
|
// fetch all videos available
|
|
fetch('/api/Tags.php', {method: 'POST', body: updateRequest})
|
|
.then((response) => response.json()
|
|
.then((result) => {
|
|
this.setState({loadedtags: result});
|
|
}))
|
|
.catch(() => {
|
|
console.log("no connection to backend");
|
|
});
|
|
}
|
|
}
|
|
|
|
export default CategoryPage; |