From 89153b5da90e8fc800c94d11756c46cb39b18c29 Mon Sep 17 00:00:00 2001 From: lukas Date: Sun, 21 Jun 2020 23:08:46 +0200 Subject: [PATCH 1/5] improved tag clicking events --- src/App.js | 30 ++++++++++++------- src/App.test.js | 10 +++---- src/elements/PageTitle/PageTitle.test.js | 2 +- src/elements/Preview/Preview.js | 7 +++-- src/elements/Tag/Tag.js | 26 ++++++++++++++-- src/pages/CategoryPage/CategoryPage.js | 10 +++---- src/pages/HomePage/HomePage.js | 38 +++++++++++------------- src/pages/Player/Player.js | 2 +- 8 files changed, 77 insertions(+), 48 deletions(-) diff --git a/src/App.js b/src/App.js index 646e589..4beed12 100644 --- a/src/App.js +++ b/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.hideVideo = this.hideVideo.bind(this); + this.changeRootElement = this.changeRootElement.bind(this); + this.returnToLastElement = this.returnToLastElement.bind(this); } - videoelement = null; + newElement = null; MainBody() { let page; if (this.state.page === "default") { - page = ; + page = ; this.mypage = page; } else if (this.state.page === "random") { - page = ; + page = ; this.mypage = page; } else if (this.state.page === "settings") { page = ; this.mypage = page; } else if (this.state.page === "categories") { - page = ; + page = ; 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) { - this.videoelement = element; + changeRootElement(element) { + this.newElement = element; this.setState({ page: "video" }); } - hideVideo() { + returnToLastElement() { this.setState({ page: "lastpage" }); - this.element = null; } } diff --git a/src/App.test.js b/src/App.test.js index e2a7b33..a4bbdb1 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -21,7 +21,7 @@ describe('', function () { it('simulate video view change ', function () { const wrapper = shallow(); - wrapper.instance().showVideo(
); + wrapper.instance().changeRootElement(
); expect(wrapper.find("#testit")).toHaveLength(1); }); @@ -29,11 +29,11 @@ describe('', function () { it('test hide video again', function () { const wrapper = shallow(); - wrapper.instance().showVideo(
); + wrapper.instance().changeRootElement(
); expect(wrapper.find("#testit")).toHaveLength(1); - wrapper.instance().hideVideo(); + wrapper.instance().returnToLastElement(); expect(wrapper.find("HomePage")).toHaveLength(1); }); @@ -43,11 +43,11 @@ describe('', function () { wrapper.find(".nav-link").findWhere(t => t.text() === "Random Video" && t.type() === "div").simulate("click"); - wrapper.instance().showVideo(
); + wrapper.instance().changeRootElement(
); expect(wrapper.find("#testit")).toHaveLength(1); - wrapper.instance().hideVideo(); + wrapper.instance().returnToLastElement(); expect(wrapper.find("RandomPage")).toHaveLength(1); }); diff --git a/src/elements/PageTitle/PageTitle.test.js b/src/elements/PageTitle/PageTitle.test.js index 47b0a80..5d57908 100644 --- a/src/elements/PageTitle/PageTitle.test.js +++ b/src/elements/PageTitle/PageTitle.test.js @@ -13,7 +13,7 @@ describe('', function () { const wrapper = shallow(heyimachild); 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 () { diff --git a/src/elements/Preview/Preview.js b/src/elements/Preview/Preview.js index 77cbf4e..ea016db 100644 --- a/src/elements/Preview/Preview.js +++ b/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(); + this.props.viewbinding.changeRootElement( + ); } } diff --git a/src/elements/Tag/Tag.js b/src/elements/Tag/Tag.js index 40e3ffb..b853838 100644 --- a/src/elements/Tag/Tag.js +++ b/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 ( - ); } + + 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( + , tag + ); + })) + .catch(() => { + console.log("no connection to backend"); + }); + } } export default Tag; diff --git a/src/pages/CategoryPage/CategoryPage.js b/src/pages/CategoryPage/CategoryPage.js index c584295..ef6c2da 100644 --- a/src/pages/CategoryPage/CategoryPage.js +++ b/src/pages/CategoryPage/CategoryPage.js @@ -31,10 +31,10 @@ class CategoryPage extends React.Component {
Default Tags:
- All - FullHd - LowQuality - HD + All + FullHd + LowQuality + HD
@@ -76,12 +80,35 @@ 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}); + loadTag = (tagname) => { + // this.selectionelements = element; + // this.setState({selected: null}); // todo save this change trigger better + this.fetchVideoData(tagname); }; + fetchVideoData(tag) { + console.log(tag); + const updateRequest = new FormData(); + updateRequest.append('action', 'getMovies'); + updateRequest.append('tag', tag); + + console.log("fetching data"); + + // fetch all videos available + fetch('/api/videoload.php', {method: 'POST', body: updateRequest}) + .then((response) => response.json() + .then((result) => { + this.selectionelements = + ; + this.setState({selected: tag}); + })) + .catch(() => { + console.log("no connection to backend"); + }); + } + loadCategoryPageDefault = () => { this.setState({selected: null}); }; diff --git a/src/pages/HomePage/HomePage.test.js b/src/pages/HomePage/HomePage.test.js index c963cd9..ebfac6b 100644 --- a/src/pages/HomePage/HomePage.test.js +++ b/src/pages/HomePage/HomePage.test.js @@ -1,4 +1,4 @@ -import {shallow, mount} from "enzyme"; +import {shallow} from "enzyme"; import React from "react"; import HomePage from "./HomePage"; import VideoContainer from "../../elements/VideoContainer/VideoContainer"; @@ -22,19 +22,6 @@ describe('', function () { wrapper.unmount(); }); - it('ckeck default tag click events', function () { - // todo mount bad here maybe delete this test - const wrapper = mount(); - global.fetch = prepareFetchApi({}); - - expect(global.fetch).toBeCalledTimes(0); - // click every tag button - wrapper.find("Tag").map((i) => { - i.simulate("click"); - }); - expect(global.fetch).toBeCalledTimes(4); - }); - it('test data insertion', function () { const wrapper = shallow(); diff --git a/src/pages/Player/Player.js b/src/pages/Player/Player.js index c8d5b3f..1883160 100644 --- a/src/pages/Player/Player.js +++ b/src/pages/Player/Player.js @@ -21,8 +21,6 @@ class Player extends React.Component { tags: [], popupvisible: false }; - - this.props = props; } options = { @@ -66,7 +64,9 @@ class Player extends React.Component {
Tags:
{this.state.tags.map((m) => ( - {m.tag_name} + {m.tag_name} ))} diff --git a/src/pages/RandomPage/RandomPage.js b/src/pages/RandomPage/RandomPage.js index 27eaa0c..3261aa5 100644 --- a/src/pages/RandomPage/RandomPage.js +++ b/src/pages/RandomPage/RandomPage.js @@ -29,7 +29,9 @@ class RandomPage extends React.Component {
Visible Tags:
{this.state.tags.map((m) => ( - {m.tag_name} + {m.tag_name} ))} From a6f6b2d96fe497660f7d1d0dacb0f8400c8df770 Mon Sep 17 00:00:00 2001 From: Lukas Heiligenbrunner Date: Wed, 24 Jun 2020 22:47:46 +0200 Subject: [PATCH 5/5] correct behaviour on category page on tag click --- src/pages/CategoryPage/CategoryPage.js | 54 +++++++++++++-------- src/pages/CategoryPage/CategoryPage.test.js | 11 ++++- src/pages/HomePage/HomePage.js | 22 ++------- src/pages/HomePage/HomePage.test.js | 7 --- 4 files changed, 48 insertions(+), 46 deletions(-) diff --git a/src/pages/CategoryPage/CategoryPage.js b/src/pages/CategoryPage/CategoryPage.js index d6568d1..59d37f8 100644 --- a/src/pages/CategoryPage/CategoryPage.js +++ b/src/pages/CategoryPage/CategoryPage.js @@ -35,10 +35,26 @@ class CategoryPage extends React.Component {
Default Tags:
- All - FullHd - LowQuality - HD + { + this.loadTag(e.props.category) + } + }}>All + { + this.loadTag(e.props.category) + } + }}>FullHd + { + this.loadTag(e.props.category) + } + }}>LowQuality + { + this.loadTag(e.props.category) + } + }}>HD
- {!this.state.selected ? - (
+ {this.state.selected ? + <> + {this.videodata ? + : null} + + : +
{this.state.loadedtags ? this.state.loadedtags.map((m) => ( )) : "loading"} -
) : - <> - {this.selectionelements ? this.selectionelements : null} - - +
} {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 = - ; + 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(); }; /** diff --git a/src/pages/CategoryPage/CategoryPage.test.js b/src/pages/CategoryPage/CategoryPage.test.js index 9a50b09..1821c1e 100644 --- a/src/pages/CategoryPage/CategoryPage.test.js +++ b/src/pages/CategoryPage/CategoryPage.test.js @@ -86,8 +86,6 @@ describe('', 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(); global.fetch.mockClear(); done(); @@ -104,4 +102,13 @@ describe('', 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(); + + expect(func).toBeCalledTimes(1); + }); }); diff --git a/src/pages/HomePage/HomePage.js b/src/pages/HomePage/HomePage.js index 727ca81..d95a511 100644 --- a/src/pages/HomePage/HomePage.js +++ b/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 (
@@ -152,18 +146,10 @@ class HomePage extends React.Component {
{this.state.sideinfo.tagnr} different Tags!
Default Tags:
- All - FullHd - LowQuality - HD + All + FullHd + LowQuality + HD {this.state.data.length !== 0 ? ', function () { done(); }); }); - - it.skip('test setcontent of homepage', function () { - const wrapper = shallow(); - - wrapper.instance().setPage(); - // todo finish test - }); });