Merge pull request #143 from LD4P/rebase-internal-header

Rebase internal header -- LGTM

__tests__/components/App.test.js

@@ -5,13 +5,17 @@ import { MemoryRouter } from "react-router"
 import App from '../../src/components/App'
 import HomePage from '../../src/components/HomePage'
 import Editor from '../../src/components/editor/Editor'
+import Footer from '../../src/components/Footer'
 
 
 describe('<App />', () =>{
+  const wrapper = shallow(<App />)
   it('selectable by id "#app"', () => {
-    const wrapper = shallow(<App />)
     expect(wrapper.find('div#app').length).toEqual(1)
   })
+  it('renders <Footer />', () => {
+    expect(wrapper.find(Footer).length).toBe(1)
+  })
 })
 
 describe("#routes", () => {

__tests__/components/EditorHeader.test.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import EditorHeader from '../../src/components/EditorHeader'
+
+describe('<EditorHeader />', () => {
+  const wrapper = shallow(<EditorHeader />)
+  it ('displays the Sinopia text', () => {
+    expect(wrapper.find("h1.editor-logo").text()).toBe("SINOPIA")
+  })
+})

__tests__/components/Header.test.js

@@ -15,7 +15,7 @@ describe('<Header />', () => {
 
   it ('mock renders an offcanvas menu', () => {
     const mockCB = jest.fn()
-    const wrapper = shallow(<Header triggerHandleOffsetMenu={mockCB} />)
+    const wrapper = shallow(<Header triggerHomePageMenu={mockCB} />)
     wrapper.find('.help-resources').simulate('click')
     expect(mockCB.mock.calls.length).toEqual(1)
   })

__tests__/components/HomePage.test.js

@@ -4,7 +4,6 @@ import HomePage from '../../src/components/HomePage'
 import Header from '../../src/components/Header'
 import NewsPanel from '../../src/components/NewsPanel'
 import DescPanel from '../../src/components/DescPanel'
-import Footer from '../../src/components/Footer'
 
 describe('<HomePage />', () =>{
   it('selectable by id "home-page"', () => {
@@ -16,6 +15,5 @@ describe('<HomePage />', () =>{
     expect(wrapper.find(Header).length).toBe(1)
     expect(wrapper.find(NewsPanel).length).toBe(1)
     expect(wrapper.find(DescPanel).length).toBe(1)
-    expect(wrapper.find(Footer).length).toBe(1)
   })
 })

__tests__/components/editor/Editor.test.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { shallow } from 'enzyme'
 import Editor from '../../../src/components/editor/Editor'
 import ResourceTemplate from '../../../src/components/editor/ResourceTemplate'
-import Footer from '../../../src/components/Footer'
+import EditorHeader from '../../../src/components/EditorHeader'
 
 describe('<Editor />', () => {
   const wrapper = shallow(<Editor />)
@@ -14,7 +14,7 @@ describe('<Editor />', () => {
     expect(wrapper.find(ResourceTemplate).length).toBe(1)
   })
 
-  it('renders <Footer />', () => {
-    expect(wrapper.find(Footer).length).toBe(1)
+  it('renders <EditorHeader />', () => {
+    expect(wrapper.find(EditorHeader).length).toBe(1)
   })
 })

src/components/App.jsx

@@ -1,22 +1,60 @@
-import React from 'react'
+import React, { Component } from 'react'
 import { hot } from 'react-hot-loader'
 import HomePage from './HomePage'
 import '../styles/main.css'
 import Editor from './editor/Editor'
-
+import Footer from './Footer'
+import CanvasMenu from './CanvasMenu'
+import { OffCanvas, OffCanvasMenu, OffCanvasBody } from 'react-offcanvas'
 import { BrowserRouter, Route, Switch } from 'react-router-dom'
 
 const FourOhFour = () => <h1>404</h1>
-const App = () => (
-  <BrowserRouter>
-    <div id="app">
-      <Switch>
-        <Route exact path='/' component={HomePage} />
-        <Route exact path='/editor' component={Editor} />
-        <Route id="404" component={FourOhFour} />
-      </Switch>
-    </div>
-  </BrowserRouter>
-)
+class App extends Component{
+  constructor(props) {
+    super(props)
+    this.handleOffsetMenu = this.handleOffsetMenu.bind(this)
+    this.closeMenu = this.closeMenu.bind(this)
+    this.state = {
+      isMenuOpened: false
+    }
+  }
+
+  handleOffsetMenu() {
+    console.log('AM I GETTING CLICKED?')
+    this.setState({
+      isMenuOpened: !this.state.isMenuOpened
+    })
+  }
+
+  closeMenu() {
+    this.setState({
+      isMenuOpened: false
+    })
+  }
+  render() {
+    let offcanvas_class = this.state.isMenuOpened? "closeMargin" : null
+    return(
+      <div id="home-page">
+        <OffCanvas width={300} transitionDuration={300} isMenuOpened={this.state.isMenuOpened} position={"right"}>
+          <OffCanvasBody className={offcanvas_class}>
+            <BrowserRouter>
+              <div id="app">
+                <Switch>
+                  <Route exact path='/' render={(props)=><HomePage {...props} triggerHandleOffsetMenu={this.handleOffsetMenu} />} />
+                  <Route exact path='/editor' render={(props)=><Editor {...props} triggerHandleOffsetMenu={this.handleOffsetMenu} />} />
+                  <Route id="404" component={FourOhFour} />
+                </Switch>
+                <Footer />
+              </div>
+            </BrowserRouter>
+          </OffCanvasBody>
+          <OffCanvasMenu className="offcanvas-menu">
+            <CanvasMenu closeHandleMenu={this.closeMenu} />
+          </OffCanvasMenu>
+        </OffCanvas>
+      </div>
+    )
+  }
+}
 
 export default hot(module)(App)

src/components/EditorHeader.jsx

@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+import SinopiaLogo from '../styles/editorsinopialogo.png'
+import { Link } from 'react-router-dom'
+
+class EditorHeader extends Component {
+  render() {
+    return (
+      <div className="navbar editor-navbar">
+        <div>
+          <h1 className="editor-logo"><a className="editor-navbar-brand navbar-brand" href="/">SINOPIA</a></h1>
+        </div>
+        <div>
+          <ul className="nav navbar-nav pull-right">
+            <li>
+              <a className="editor-header-text" href="https://profile-editor.sinopia.io/">Profile Editor</a>
+            </li>
+            <li className="menu">
+              <a href="#" className="editor-help-resources" onClick={this.props.triggerEditorMenu}>Help and Resources</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default EditorHeader

src/components/Header.jsx

@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom'
 class Header extends Component {
   render() {
     return (
-      <div className="navbar">
+      <div className="navbar homepage-navbar">
         <div className="navbar-header">
           <a className="navbar-brand" href="https://google.com">
             <img src={SinopiaLogo} height="55px" />
@@ -19,7 +19,7 @@ class Header extends Component {
             <a className="header-text" href="https://profile-editor.sinopia.io/">Profile Editor</a>
           </li>
           <li className="menu">
-            <a href="#" className="help-resources" onClick={this.props.triggerHandleOffsetMenu}>Help and Resources</a>
+            <a href="#" className="help-resources" onClick={this.props.triggerHomePageMenu}>Help and Resources</a>
           </li>
         </ul>
       </div>

src/components/HomePage.jsx

@@ -2,49 +2,14 @@ import React, { Component } from 'react'
 import Header from './Header'
 import NewsPanel from './NewsPanel'
 import DescPanel from './DescPanel'
-import CanvasMenu from './CanvasMenu'
-import Footer from './Footer'
-import { OffCanvas, OffCanvasMenu, OffCanvasBody } from 'react-offcanvas'
 
 class HomePage extends Component {
-  constructor(props) {
-    super(props)
-    this.handleOffsetMenu = this.handleOffsetMenu.bind(this)
-    this.closeMenu = this.closeMenu.bind(this)
-    this.state = {
-      isMenuOpened: false
-    }
-  }
-
-  handleOffsetMenu() {
-    this.setState({
-      isMenuOpened: !this.state.isMenuOpened
-    })
-  }
-
-  closeMenu() {
-    this.setState({
-      isMenuOpened: false
-    })
-  }
-
   render() {
-    let offcanvas_class = this.state.isMenuOpened? "closeMargin" : null
     return(
       <div id="home-page">
-        <OffCanvas width={300} transitionDuration={300} isMenuOpened={this.state.isMenuOpened} position={"right"}>
-          <OffCanvasBody className={offcanvas_class}>
-            <div>
-              <Header triggerHandleOffsetMenu={this.handleOffsetMenu} />
-              <NewsPanel />
-              <DescPanel />
-              <Footer />
-            </div>
-          </OffCanvasBody>
-          <OffCanvasMenu className="offcanvas-menu">
-            <CanvasMenu closeHandleMenu={this.closeMenu} />
-          </OffCanvasMenu>
-        </OffCanvas>
+        <Header triggerHomePageMenu={this.props.triggerHandleOffsetMenu} />
+        <NewsPanel />
+        <DescPanel />
       </div>   
     )
   }

src/components/editor/Editor.jsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react'
 import ResourceTemplate from './ResourceTemplate'
-import Footer from '../Footer'
+import EditorHeader from '../EditorHeader'
 
 class Editor extends Component {
   constructor(props) {
@@ -120,13 +120,13 @@ class Editor extends Component {
   render() {
     return(
       <div id="editor">
-        <h2>Editor Page</h2>
+        <EditorHeader triggerEditorMenu={this.props.triggerHandleOffsetMenu}/>
+        <h1> Editor Page </h1>
         <p>(will have a "Choose Resource Template" area + editing area)</p>
         <p>The selected resource template is <strong>{this.state.resourceTemplates[0].id}</strong></p>
         <ResourceTemplate
           resourceTemplates = {this.state.resourceTemplates}
           />
-        <Footer />
       </div>
     )
   }

src/styles/main.css

@@ -6,7 +6,7 @@ body {
   background-size: cover;
   background-image: url("home-background.png");
 }
-.navbar {
+.homepage-navbar {
   padding-bottom: 2% ;
   padding-top:2%;
 }
@@ -60,6 +60,22 @@ body {
   color: white;
   font-size: 1.2em;
 }
+.editor-navbar{
+  background-image: url('./editorheaderbg.png');
+  padding-bottom: 1em;
+}
+.editor-header-text{
+  font-size: .85em;
+}
+a.editor-help-resources {
+  font-size: .85em;
+}
 #footer-image{
   padding-right: 10%;
+}
+.editor-logo a{
+  text-decoration: none;
+  font-family: "Copperplate Gothic Light";
+  font-size: 1.3em;
+  color: #2F2424;
 }