improved tag clicking events

src/App.js

@@ -14,29 +14,38 @@ class App extends React.Component {
         this.state = {page: "default"};
 
         // bind this to the method for being able to call methods such as this.setstate
-        this.showVideo = this.showVideo.bind(this);
+        this.changeRootElement = this.changeRootElement.bind(this);
-        this.hideVideo = this.hideVideo.bind(this);
+        this.returnToLastElement = this.returnToLastElement.bind(this);
     }
 
-    videoelement = null;
+    newElement = null;
 
     MainBody() {
         let page;
         if (this.state.page === "default") {
-            page = <HomePage viewbinding={{showVideo: this.showVideo, hideVideo: this.hideVideo}}/>;
+            page = <HomePage viewbinding={{
+                changeRootElement: this.changeRootElement,
+                returnToLastElement: this.returnToLastElement
+            }}/>;
             this.mypage = page;
         } else if (this.state.page === "random") {
-            page = <RandomPage viewbinding={{showVideo: this.showVideo, hideVideo: this.hideVideo}}/>;
+            page = <RandomPage viewbinding={{
+                changeRootElement: this.changeRootElement,
+                returnToLastElement: this.returnToLastElement
+            }}/>;
             this.mypage = page;
         } else if (this.state.page === "settings") {
             page = <SettingsPage/>;
             this.mypage = page;
         } else if (this.state.page === "categories") {
-            page = <CategoryPage viewbinding={{showVideo: this.showVideo, hideVideo: this.hideVideo}}/>;
+            page = <CategoryPage viewbinding={{
+                changeRootElement: this.changeRootElement,
+                returnToLastElement: this.returnToLastElement
+            }}/>;
             this.mypage = page;
         } else if (this.state.page === "video") {
             // show videoelement if neccessary
-            page = this.videoelement;
+            page = this.newElement;
 
             console.log(page);
         } else if (this.state.page === "lastpage") {
@@ -86,19 +95,18 @@ class App extends React.Component {
         );
     }
 
-    showVideo(element) {
+    changeRootElement(element) {
-        this.videoelement = element;
+        this.newElement = element;
 
         this.setState({
             page: "video"
         });
     }
 
-    hideVideo() {
+    returnToLastElement() {
         this.setState({
             page: "lastpage"
         });
-        this.element = null;
     }
 }
 

src/App.test.js

@@ -21,7 +21,7 @@ describe('<App/>', function () {
     it('simulate video view change ', function () {
         const wrapper = shallow(<App/>);
 
-        wrapper.instance().showVideo(<div id='testit'></div>);
+        wrapper.instance().changeRootElement(<div id='testit'></div>);
 
         expect(wrapper.find("#testit")).toHaveLength(1);
     });
@@ -29,11 +29,11 @@ describe('<App/>', function () {
     it('test hide video again', function () {
         const wrapper = shallow(<App/>);
 
-        wrapper.instance().showVideo(<div id='testit'></div>);
+        wrapper.instance().changeRootElement(<div id='testit'></div>);
 
         expect(wrapper.find("#testit")).toHaveLength(1);
 
-        wrapper.instance().hideVideo();
+        wrapper.instance().returnToLastElement();
 
         expect(wrapper.find("HomePage")).toHaveLength(1);
     });
@@ -43,11 +43,11 @@ describe('<App/>', function () {
 
         wrapper.find(".nav-link").findWhere(t => t.text() === "Random Video" && t.type() === "div").simulate("click");
 
-        wrapper.instance().showVideo(<div id='testit'></div>);
+        wrapper.instance().changeRootElement(<div id='testit'></div>);
 
         expect(wrapper.find("#testit")).toHaveLength(1);
 
-        wrapper.instance().hideVideo();
+        wrapper.instance().returnToLastElement();
 
         expect(wrapper.find("RandomPage")).toHaveLength(1);
     });

src/elements/Preview/Preview.js

@@ -60,7 +60,8 @@ class Preview extends React.Component {
     itemClick() {
         console.log("item clicked!" + this.state.name);
 
-        this.props.viewbinding.showVideo(<Player
+        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;

src/pages/CategoryPage/CategoryPage.js

@@ -31,10 +31,10 @@ class CategoryPage extends React.Component {
 
                 <SideBar>
                     <div className='sidebartitle'>Default Tags:</div>
-                    <Tag>All</Tag>
+                    <Tag viewbinding={this.props.viewbinding} contentbinding={this.setPage}>All</Tag>
-                    <Tag>FullHd</Tag>
+                    <Tag viewbinding={this.props.viewbinding} contentbinding={this.setPage}>FullHd</Tag>
-                    <Tag>LowQuality</Tag>
+                    <Tag viewbinding={this.props.viewbinding} contentbinding={this.setPage}>LowQuality</Tag>
-                    <Tag>HD</Tag>
+                    <Tag viewbinding={this.props.viewbinding} contentbinding={this.setPage}>HD</Tag>
                     <hr/>
                     <button data-testid='btnaddtag' className='btn btn-success' onClick={() => {
                         this.setState({popupvisible: true})
@@ -78,7 +78,7 @@ class CategoryPage extends React.Component {
 
     setPage = (element, tagname) => {
         this.selectionelements = element;
-
+        this.setState({selected: null}); // todo save this change trigger better
         this.setState({selected: tagname});
     };
 

src/pages/HomePage/HomePage.js

@@ -118,6 +118,12 @@ class HomePage extends React.Component {
             });
     }
 
+    setPage = (element, tagname) => {
+        this.setState({tag: tagname});
+        // todo warning double data download here!
+        this.fetchVideoData(tagname);
+    };
+
     render() {
         return (
             <div>
@@ -146,26 +152,18 @@ class HomePage extends React.Component {
                     <div className='sidebarinfo'><b>{this.state.sideinfo.tagnr}</b> different Tags!</div>
                     <hr/>
                     <div className='sidebartitle'>Default Tags:</div>
-                    <Tag onClick={() => {
+                    <Tag
-                        this.setState({tag: "All"});
+                        viewbinding={this.props.viewbinding}
-                        this.fetchVideoData("all");
+                        contentbinding={this.setPage}>All</Tag>
-                    }}>All
+                    <Tag
-                    </Tag>
+                        viewbinding={this.props.viewbinding}
-                    <Tag onClick={() => {
+                        contentbinding={this.setPage}>FullHd</Tag>
-                        this.setState({tag: "Full HD"});
+                    <Tag
-                        this.fetchVideoData("fullhd");
+                        viewbinding={this.props.viewbinding}
-                    }}>FullHd
+                        contentbinding={this.setPage}>LowQuality</Tag>
-                    </Tag>
+                    <Tag
-                    <Tag onClick={() => {
+                        viewbinding={this.props.viewbinding}
-                        this.setState({tag: "Low Quality"});
+                        contentbinding={this.setPage}>HD</Tag>
-                        this.fetchVideoData("lowquality");
-                    }}>LowQuality
-                    </Tag>
-                    <Tag onClick={() => {
-                        this.setState({tag: "HD"});
-                        this.fetchVideoData("hd");
-                    }}>HD
-                    </Tag>
                 </SideBar>
                 {this.state.data.length !== 0 ?
                     <VideoContainer

src/pages/Player/Player.js

@@ -149,7 +149,7 @@ class Player extends React.Component {
     }
 
     closebtn() {
-        this.props.viewbinding.hideVideo();
+        this.props.viewbinding.returnToLastElement();
     }
 }