correct behaviour on category page on tag click

src/pages/CategoryPage/CategoryPage.js

@@ -35,10 +35,26 @@ class CategoryPage extends React.Component {
 
                 <SideBar>
                     <div className='sidebartitle'>Default Tags:</div>
-                    <Tag viewbinding={this.props.viewbinding} contentbinding={this.loadTag}>All</Tag>
-                    <Tag viewbinding={this.props.viewbinding} contentbinding={this.loadTag}>FullHd</Tag>
-                    <Tag viewbinding={this.props.viewbinding} contentbinding={this.loadTag}>LowQuality</Tag>
-                    <Tag viewbinding={this.props.viewbinding} contentbinding={this.loadTag}>HD</Tag>
+                    <Tag viewbinding={{
+                        changeRootElement: (e) => {
+                            this.loadTag(e.props.category)
+                        }
+                    }}>All</Tag>
+                    <Tag viewbinding={{
+                        changeRootElement: (e) => {
+                            this.loadTag(e.props.category)
+                        }
+                    }}>FullHd</Tag>
+                    <Tag viewbinding={{
+                        changeRootElement: (e) => {
+                            this.loadTag(e.props.category)
+                        }
+                    }}>LowQuality</Tag>
+                    <Tag viewbinding={{
+                        changeRootElement: (e) => {
+                            this.loadTag(e.props.category)
+                        }
+                    }}>HD</Tag>
                     <hr/>
                     <button data-testid='btnaddtag' className='btn btn-success' onClick={() => {
                         this.setState({popupvisible: true})
@@ -46,8 +62,17 @@ class CategoryPage extends React.Component {
                     </button>
                 </SideBar>
 
-                {!this.state.selected ?
-                    (<div className='maincontent'>
+                {this.state.selected ?
+                    <>
+                        {this.videodata ?
+                            <VideoContainer
+                                data={this.videodata}
+                                viewbinding={this.props.viewbinding}/> : null}
+                        <button data-testid='backbtn' className="btn btn-success"
+                                onClick={this.loadCategoryPageDefault}>Back
+                        </button>
+                    </> :
+                    <div className='maincontent'>
                         {this.state.loadedtags ?
                             this.state.loadedtags.map((m) => (
                                 <TagPreview
@@ -58,13 +83,7 @@ class CategoryPage extends React.Component {
                                     categorybinding={this.loadTag}/>
                             )) :
                             "loading"}
-                    </div>) :
-                    <>
-                        {this.selectionelements ? this.selectionelements : null}
-                        <button data-testid='backbtn' className="btn btn-success"
-                                onClick={this.loadCategoryPageDefault}>Back
-                        </button>
-                    </>
+                    </div>
                 }
 
                 {this.state.popupvisible ?
@@ -81,8 +100,6 @@ class CategoryPage extends React.Component {
     }
 
     loadTag = (tagname) => {
-        // this.selectionelements = element;
-        // this.setState({selected: null}); // todo save this change trigger better
         this.fetchVideoData(tagname);
     };
 
@@ -98,10 +115,8 @@ class CategoryPage extends React.Component {
         fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
             .then((response) => response.json()
                 .then((result) => {
-                    this.selectionelements =
-                        <VideoContainer
-                            data={result}
-                            viewbinding={this.props.viewbinding}/>;
+                    this.videodata = result;
+                    this.setState({selected: null}); // needed to trigger the state reload correctly
                     this.setState({selected: tag});
                 }))
             .catch(() => {
@@ -111,6 +126,7 @@ class CategoryPage extends React.Component {
 
     loadCategoryPageDefault = () => {
         this.setState({selected: null});
+        this.loadTags();
     };
 
     /**

src/pages/CategoryPage/CategoryPage.test.js

@@ -86,8 +86,6 @@ describe('<CategoryPage/>', function () {
         process.nextTick(() => {
             // expect callback to have loaded correct tag
             expect(wrapper.state().selected).toBe("testname");
-            // expect to receive a videocontainer with simulated data
-            expect(wrapper.instance().selectionelements).toMatchObject(<VideoContainer data={[{}, {}]}/>);
 
             global.fetch.mockClear();
             done();
@@ -104,4 +102,13 @@ describe('<CategoryPage/>', function () {
         wrapper.find('[data-testid="backbtn"]').simulate("click");
         expect(wrapper.state().selected).toBeNull();
     });
+
+    it('load categorypage with predefined tag', function () {
+        const func = jest.fn();
+        CategoryPage.prototype.fetchVideoData = func;
+
+        const wrapper = shallow(<CategoryPage category="fullhd"/>);
+
+        expect(func).toBeCalledTimes(1);
+    });
 });

src/pages/HomePage/HomePage.js

@@ -118,12 +118,6 @@ class HomePage extends React.Component {
             });
     }
 
-    setPage = (element, tagname) => {
-        this.setState({tag: tagname});
-        // todo warning double data download here!
-        this.fetchVideoData(tagname);
-    };
-
     render() {
         return (
             <div>
@@ -152,18 +146,10 @@ 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
-                        viewbinding={this.props.viewbinding}
-                        contentbinding={this.setPage}>All</Tag>
-                    <Tag
-                        viewbinding={this.props.viewbinding}
-                        contentbinding={this.setPage}>FullHd</Tag>
-                    <Tag
-                        viewbinding={this.props.viewbinding}
-                        contentbinding={this.setPage}>LowQuality</Tag>
-                    <Tag
-                        viewbinding={this.props.viewbinding}
-                        contentbinding={this.setPage}>HD</Tag>
+                    <Tag viewbinding={this.props.viewbinding}>All</Tag>
+                    <Tag viewbinding={this.props.viewbinding}>FullHd</Tag>
+                    <Tag viewbinding={this.props.viewbinding}>LowQuality</Tag>
+                    <Tag viewbinding={this.props.viewbinding}>HD</Tag>
                 </SideBar>
                 {this.state.data.length !== 0 ?
                     <VideoContainer

src/pages/HomePage/HomePage.test.js

@@ -105,11 +105,4 @@ describe('<HomePage/>', function () {
             done();
         });
     });
-
-    it.skip('test setcontent of homepage', function () {
-        const wrapper = shallow(<HomePage/>);
-
-        wrapper.instance().setPage();
-        // todo finish test
-    });
 });