show video previews on tag click

src/elements/Preview.js

@@ -63,7 +63,7 @@ class Preview extends React.Component {
 }
 
 export class TagPreview extends React.Component {
-    constructor(props: P, context: any) {
+    constructor(props, context) {
         super(props, context);
 
         this.props = props;
@@ -82,7 +82,7 @@ export class TagPreview extends React.Component {
             .then((response) => response.json()
                 .then((result) => {
                     console.log(result);
-                    this.props.viewbinding.showVideo(
+                    this.props.categorybinding(
                         <VideoContainer
                             data={result}
                             viewbinding={this.props.viewbinding}/>

src/elements/VideoContainer.js

@@ -2,7 +2,7 @@ import React from "react";
 import Preview from "./Preview";
 
 class VideoContainer extends React.Component {
-    constructor(props: P, context: any) {
+    constructor(props, context) {
         super(props, context);
 
         this.data = props.data;
@@ -12,6 +12,7 @@ class VideoContainer extends React.Component {
             selectionnr: null
         };
     }
+
     // stores current index of loaded elements
     loadindex = 0;
 
@@ -31,6 +32,9 @@ class VideoContainer extends React.Component {
                         movie_id={elem.movie_id}
                         viewbinding={this.props.viewbinding}/>
                 ))}
+                {/*todo css for no items to show*/}
+                {this.state.loadeditems.length === 0 ?
+                    "no items to show!" : null}
             </div>
         );
     }
@@ -70,4 +74,4 @@ class VideoContainer extends React.Component {
     }
 }
 
-export default VideoContainer;
+export default VideoContainer;

src/pages/CategoryPage.js

@@ -6,13 +6,14 @@ import "../css/CategoryPage.css"
 import {TagPreview} from "../elements/Preview";
 
 class CategoryPage extends React.Component {
-    constructor(props: P, context: any) {
+    constructor(props, context) {
         super(props, context);
 
         this.props = props;
 
         this.state = {
-            loadedtags: []
+            loadedtags: [],
+            selected: false
         };
     }
 
@@ -39,14 +40,17 @@ class CategoryPage extends React.Component {
                     <button className='btn btn-success'>Add a new Tag!</button>
                 </SideBar>
                 <div id='categorycontent'>
-                    {this.state.loadedtags ?
+                    {!this.state.selected ?
+                        (this.state.loadedtags ?
                         this.state.loadedtags.map((m) => (
                             <TagPreview
                                 name={m.tag_name}
                                 tag_id={m.tag_id}
-                                viewbinding={this.props.viewbinding}/>
+                                viewbinding={this.props.viewbinding}
+                                categorybinding={this.setPage}/>
                         )) :
-                        "loading"
+                        "loading") :
+                        this.selectionelements
                     }
 
                 </div>
@@ -54,6 +58,12 @@ class CategoryPage extends React.Component {
         );
     }
 
+    setPage = (element) => {
+        this.selectionelements = element;
+
+        this.setState({selected: true});
+    };
+
     /**
      * load all available tags from db.
      */
@@ -73,4 +83,4 @@ class CategoryPage extends React.Component {
     }
 }
 
-export default CategoryPage;
+export default CategoryPage;