created new category page

load random picture of category to tags list

src/pages/CategoryPage.js

@@ -1,13 +1,79 @@
 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();
+    }
 
-class CategoryPage extends React.Component{
     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;