improved tag clicking events

src/elements/PageTitle/PageTitle.test.js

@@ -13,7 +13,7 @@ describe('<Preview/>', function () {
         const wrapper = shallow(<PageTitle>heyimachild</PageTitle>);
 
         const children = wrapper.children();
-        expect(children.at(children.length-2).text()).toBe("heyimachild");
+        expect(children.at(children.length - 2).text()).toBe("heyimachild");
     });
 
     it('renders pagetitle prop', function () {

src/elements/Preview/Preview.js

@@ -60,9 +60,10 @@ class Preview extends React.Component {
     itemClick() {
         console.log("item clicked!" + this.state.name);
 
-        this.props.viewbinding.showVideo(<Player
-            viewbinding={this.props.viewbinding}
-            movie_id={this.props.movie_id}/>);
+        this.props.viewbinding.changeRootElement(
+            <Player
+                viewbinding={this.props.viewbinding}
+                movie_id={this.props.movie_id}/>);
     }
 }
 

src/elements/Tag/Tag.js

@@ -1,6 +1,7 @@
 import React from "react";
 
 import "./Tag.css"
+import VideoContainer from "../VideoContainer/VideoContainer";
 
 class Tag extends React.Component {
     constructor(props, context) {
@@ -10,12 +11,33 @@ class Tag extends React.Component {
     }
 
     render() {
-        // todo onclick events correctlyy
         return (
-            <button className='tagbtn' onClick={this.props.onClick}
+            <button className='tagbtn' onClick={() => this.TagClick()}
                     data-testid="Test-Tag">{this.props.children}</button>
         );
     }
+
+    TagClick() {
+        const tag = this.props.children.toString().toLowerCase();
+
+        const updateRequest = new FormData();
+        updateRequest.append('action', 'getMovies');
+        updateRequest.append('tag', tag);
+
+        // fetch all videos available
+        fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
+            .then((response) => response.json()
+                .then((result) => {
+                    this.props.contentbinding(
+                        <VideoContainer
+                            data={result}
+                            viewbinding={this.props.viewbinding}/>, tag
+                    );
+                }))
+            .catch(() => {
+                console.log("no connection to backend");
+            });
+    }
 }
 
 export default Tag;