created new category page

load random picture of category to tags list

api/Tags.php

@@ -0,0 +1,36 @@
+<?php
+require 'Database.php';
+
+$conn = Database::getInstance()->getConnection();
+
+if (isset($_POST['action'])) {
+    $action = $_POST['action'];
+    switch ($action) {
+        case "getAllTags":
+            $query = "SELECT tag_name,tag_id from tags";
+
+            $result = $conn->query($query);
+            $rows = array();
+            while ($r = mysqli_fetch_assoc($result)) {
+                array_push($rows, $r);
+            }
+            echo json_encode($rows);
+
+            break;
+        case "getRandomTagPreview":
+            $id = $_POST['id'];
+
+            $query = "SELECT thumbnail from videos
+                        INNER JOIN video_tags vt on videos.movie_id = vt.video_id
+                        WHERE tag_id='$id' 
+                        ORDER BY RAND()
+                        LIMIT 1";
+
+            $result = $conn->query($query);
+            $r = mysqli_fetch_assoc($result);
+
+            echo $r['thumbnail'];
+
+            break;
+    }
+}

package.json

@@ -19,7 +19,7 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "proxy": "http://192.168.0.209",
+  "proxy": "http://192.168.0.248",
   "homepage": "/",
   "eslintConfig": {
     "extends": "react-app"

src/css/CategoryPage.css

@@ -0,0 +1,4 @@
+#categorycontent{
+    width: 70%;
+    float: left;
+}

src/css/Preview.css

@@ -4,6 +4,13 @@
     text-align: center;
     font-weight: bold;
     max-width: 266px;
+}
+
+.tagpreviewtitle{
+    font-size: larger;
+}
+
+.videopreviewtitle{
     font-size: smaller;
 }
 

src/elements/Preview.js

@@ -39,7 +39,7 @@ class Preview extends React.Component {
     render() {
         return (
             <div className='videopreview' onClick={() => this.itemClick()}>
-                <div className='previewtitle'>{this.state.name}</div>
+                <div className='previewtitle videopreviewtitle'>{this.state.name}</div>
                 <div className='previewpic'>
                     <img className='previewimage'
                          src={this.state.previewpicture}
@@ -61,4 +61,49 @@ class Preview extends React.Component {
     }
 }
 
+export class TagPreview extends React.Component {
+    constructor(props: P, context: any) {
+        super(props, context);
+
+        this.props = props;
+
+        this.state = {
+            thumbnail: null
+        };
+    }
+
+    componentDidMount() {
+        this.loadPreview();
+    }
+
+
+    render() {
+        return (
+            <div className='videopreview' onClick={() => this.itemClick()}>
+                <div className='previewtitle tagpreviewtitle'>{this.props.name}</div>
+                <div className='previewpic'>
+                    <img className='previewimage'
+                         src={this.state.thumbnail}
+                         alt='Pic loading.'/>
+                </div>
+                <div className='previewbottom'>
+
+                </div>
+            </div>
+        );
+    }
+
+    loadPreview() {
+        const updateRequest = new FormData();
+        updateRequest.append('action', 'getRandomTagPreview');
+        updateRequest.append('id', this.props.tag_id);
+
+        fetch('/api/Tags.php', {method: 'POST', body: updateRequest})
+            .then((response) => response.text())
+            .then((result) => {
+                this.setState({thumbnail: result});
+            });
+    }
+}
+
 export default Preview;

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();
+    }
+
     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;