lukas/OpenMediaCenter
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'SeperateTitleComponent' into 'master'

Browse Source 
Seperate title component

See merge request lukas/openmediacenter!4
This commit is contained in:
Lukas Heiligenbrunner 2020-06-19 14:28:43 +00:00
commit 18ce670836
9 changed files with 83 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/css/DefaultPage.css → src/elements/PageTitle/PageTitle.css
View File

@ -15,4 +15,3 @@
font-size: 23pt;
opacity: 0.6;
}

26
src/elements/PageTitle/PageTitle.js Normal file
View File

@ -0,0 +1,26 @@
import React from "react";
import "./PageTitle.css"
class PageTitle extends React.Component {
constructor(props) {
super(props);
this.props = props;
}
render() {
return (
<div className='pageheader'>
<span className='pageheadertitle'>{this.props.title}</span>
<span className='pageheadersubtitle'>{this.props.subtitle}</span>
<>
{this.props.children}
</>
<hr/>
</div>
);
}
}
export default PageTitle;

31
src/elements/PageTitle/PageTitle.test.js Normal file
View File

@ -0,0 +1,31 @@
import React from 'react';
import {shallow} from 'enzyme'
import PageTitle from "./PageTitle";
describe('<Preview/>', function () {
it('renders without crashing ', function () {
const wrapper = shallow(<PageTitle/>);
wrapper.unmount();
});
it('renders childs correctly', function () {
const wrapper = shallow(<PageTitle>heyimachild</PageTitle>);
const children = wrapper.children();
expect(children.at(children.length-2).text()).toBe("heyimachild");
});
it('renders pagetitle prop', function () {
const wrapper = shallow(<PageTitle title='testtitle'/>);
expect(wrapper.find(".pageheader").text()).toBe("testtitle");
});
it('renders subtitle prop', function () {
const wrapper = shallow(<PageTitle subtitle='testsubtitle'/>);
expect(wrapper.find(".pageheadersubtitle").text()).toBe("testsubtitle");
});
});

11
src/pages/CategoryPage/CategoryPage.js
View File

@ -4,6 +4,7 @@ import Tag from "../../elements/Tag/Tag";
import {TagPreview} from "../../elements/Preview/Preview";
import NewTagPopup from "../../elements/NewTagPopup/NewTagPopup";
import PageTitle from "../../elements/PageTitle/PageTitle";
class CategoryPage extends React.Component {
constructor(props, context) {
@ -24,12 +25,10 @@ class CategoryPage extends React.Component {
render() {
return (
<>
<div className='pageheader'>
<span className='pageheadertitle'>Categories</span>
<span
className='pageheadersubtitle'>{!this.state.selected ? this.state.loadedtags.length + " different Tags" : this.state.selected}</span>
<hr/>
</div>
<PageTitle
title='Categories'
subtitle={!this.state.selected ? this.state.loadedtags.length + " different Tags" : this.state.selected}/>
<SideBar>
<div className='sidebartitle'>Default Tags:</div>
<Tag>All</Tag>

11
src/pages/HomePage/HomePage.js
View File

@ -4,7 +4,7 @@ import Tag from "../../elements/Tag/Tag";
import VideoContainer from "../../elements/VideoContainer/VideoContainer";
import "./HomePage.css"
import "../../css/DefaultPage.css"
import PageTitle from "../../elements/PageTitle/PageTitle";
class HomePage extends React.Component {
constructor(props, context) {
@ -121,9 +121,9 @@ class HomePage extends React.Component {
render() {
return (
<div>
<div className='pageheader'>
<span className='pageheadertitle'>Home Page</span>
<span className='pageheadersubtitle'>{this.state.tag} Videos - {this.state.selectionnr}</span>
<PageTitle
title='Home Page'
subtitle={this.state.tag + " Videos - " + this.state.selectionnr}>
<form className="form-inline searchform" onSubmit={(e) => {
e.preventDefault();
this.searchVideos(this.keyword);
@ -135,8 +135,7 @@ class HomePage extends React.Component {
}}/>
<button data-testid='searchbtnsubmit' className="btn btn-success" type="submit">Search</button>
</form>
<hr/>
</div>
</PageTitle>
<SideBar>
<div className='sidebartitle'>Infos:</div>
<hr/>

4
src/pages/HomePage/HomePage.test.js
View File

@ -52,14 +52,14 @@ describe('<HomePage/>', function () {
it('test title and nr insertions', function () {
const wrapper = shallow(<HomePage/>);
expect(wrapper.find(".pageheadersubtitle").text()).toBe("All Videos - 0");
expect(wrapper.find("PageTitle").props().subtitle).toBe("All Videos - 0");
wrapper.setState({
tag: "testtag",
selectionnr: 42
});
expect(wrapper.find(".pageheadersubtitle").text()).toBe("testtag Videos - 42");
expect(wrapper.find("PageTitle").props().subtitle).toBe("testtag Videos - 42");
});
it('test search field', done => {

10
src/pages/Player/Player.js
View File

@ -4,6 +4,7 @@ import {PlyrComponent} from 'plyr-react';
import SideBar from "../../elements/SideBar/SideBar";
import Tag from "../../elements/Tag/Tag";
import AddTagPopup from "../../elements/AddTagPopup/AddTagPopup";
import PageTitle from "../../elements/PageTitle/PageTitle";
class Player extends React.Component {
@ -48,11 +49,10 @@ class Player extends React.Component {
render() {
return (
<div id='videocontainer'>
<div className='pageheader'>
<span className='pageheadertitle'>Watch</span>
<span className='pageheadersubtitle'>{this.state.movie_name}</span>
<hr/>
</div>
<PageTitle
title='Watch'
subtitle={this.state.movie_name}/>
<SideBar>
<div className='sidebartitle'>Infos:</div>
<hr/>

10
src/pages/RandomPage/RandomPage.js
View File

@ -3,6 +3,7 @@ import Preview from "../../elements/Preview/Preview";
import "./RandomPage.css"
import SideBar from "../../elements/SideBar/SideBar";
import Tag from "../../elements/Tag/Tag";
import PageTitle from "../../elements/PageTitle/PageTitle";
class RandomPage extends React.Component {
constructor(props, context) {
@ -21,11 +22,10 @@ class RandomPage extends React.Component {
render() {
return (
<div>
<div className='pageheader'>
<span className='pageheadertitle'>Random Videos</span>
<span className='pageheadersubtitle'>4pc</span>
<hr/>
</div>
<PageTitle
title='Random Videos'
subtitle='4pc'/>
<SideBar>
<div className='sidebartitle'>Visible Tags:</div>
{this.state.tags.map((m) => (

10
src/pages/SettingsPage/SettingsPage.js
View File

@ -1,5 +1,5 @@
import React from "react";
import "../../css/DefaultPage.css"
import PageTitle from "../../elements/PageTitle/PageTitle";
class SettingsPage extends React.Component {
@ -44,11 +44,9 @@ class SettingsPage extends React.Component {
render() {
return (
<div>
<div className='pageheader'>
<span className='pageheadertitle'>Settings Page</span>
<span className='pageheadersubtitle'>todo</span>
<hr/>
</div>
<PageTitle
title='Settings Page'
subtitle='todo'/>
<button className='reindexbtn btn btn-success' onClick={() => {
this.startReindex()