Merge branch 'SeperateTitleComponent' into 'master'

Seperate title component

See merge request lukas/openmediacenter!4

src/elements/PageTitle/PageTitle.css

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

src/elements/PageTitle/PageTitle.js

@@ -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;

src/elements/PageTitle/PageTitle.test.js

@@ -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");
+    });
+});
+

src/pages/CategoryPage/CategoryPage.js

@@ -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'>
+                <PageTitle
-                    <span className='pageheadertitle'>Categories</span>
+                    title='Categories'
-                    <span
+                    subtitle={!this.state.selected ? this.state.loadedtags.length + " different Tags" : this.state.selected}/>
-                        className='pageheadersubtitle'>{!this.state.selected ? this.state.loadedtags.length + " different Tags" : this.state.selected}</span>
+
-                    <hr/>
-                </div>
                 <SideBar>
                     <div className='sidebartitle'>Default Tags:</div>
                     <Tag>All</Tag>

src/pages/HomePage/HomePage.js

@@ -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'>
+                <PageTitle
-                    <span className='pageheadertitle'>Home Page</span>
+                    title='Home Page'
-                    <span className='pageheadersubtitle'>{this.state.tag} Videos - {this.state.selectionnr}</span>
+                    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/>
+                </PageTitle>
-                </div>
                 <SideBar>
                     <div className='sidebartitle'>Infos:</div>
                     <hr/>

src/pages/HomePage/HomePage.test.js

@@ -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 => {

src/pages/Player/Player.js

@@ -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'>
+                <PageTitle
-                    <span className='pageheadertitle'>Watch</span>
+                    title='Watch'
-                    <span className='pageheadersubtitle'>{this.state.movie_name}</span>
+                    subtitle={this.state.movie_name}/>
-                    <hr/>
+
-                </div>
                 <SideBar>
                     <div className='sidebartitle'>Infos:</div>
                     <hr/>

src/pages/RandomPage/RandomPage.js

@@ -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'>
+                <PageTitle
-                    <span className='pageheadertitle'>Random Videos</span>
+                    title='Random Videos'
-                    <span className='pageheadersubtitle'>4pc</span>
+                    subtitle='4pc'/>
-                    <hr/>
+
-                </div>
                 <SideBar>
                     <div className='sidebartitle'>Visible Tags:</div>
                     {this.state.tags.map((m) => (

src/pages/SettingsPage/SettingsPage.js

@@ -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'>
+                <PageTitle
-                    <span className='pageheadertitle'>Settings Page</span>
+                    title='Settings Page'
-                    <span className='pageheadersubtitle'>todo</span>
+                    subtitle='todo'/>
-                    <hr/>
-                </div>
 
                 <button className='reindexbtn btn btn-success' onClick={() => {
                     this.startReindex()