set header values throughout application

src/components/auth/signin.js

@@ -7,6 +7,10 @@ import SigninForm from './signinForm';
 
 class Signin extends Component {
 
+    componentDidMount() {
+        this.props.updateHeader('Welcome to HOA Manager!', 'Please login to continue', false);
+    }
+
     onSubmit = (fields) => {
         this.props.signIn(fields, () => {
             this.props.history.push('/dashboard');

src/components/auth/signup.js

@@ -13,6 +13,10 @@ class Signup extends Component {
         })
     }
 
+    componentDidMount() {
+        this.props.updateHeader('Welcome to HOA Manager!', 'Please login to continue', false);
+    }
+
     render() {
         return (
             <div className='sign-up'>

src/components/dashboard.js

@@ -1,11 +1,18 @@
 import React, { Component } from "react";
 
+import { connect } from 'react-redux';
+import * as actions from '../actions';
+
 import TabNav from './tabnav';
 import NewsletterGrid from "./newsletter/newsletterGrid";
 import RequestsGrid from "./requests/requestsGrid";
 
 class Dashboard extends Component {
 
+    componentDidMount() {
+        this.props.updateHeader(`Welcome ${this.props.name}`, 'HOA Management', true);
+    }
+
     constructor(props) {
         super(props);
 
@@ -49,4 +56,10 @@ class Dashboard extends Component {
 
 }
 
-export default Dashboard;
+function mapStateToProps(state) {
+    return {
+        name: state.auth.user.fullname
+    }
+}
+
+export default connect(mapStateToProps, actions)(Dashboard);

src/components/header.js

@@ -9,8 +9,10 @@ export function Header({ title, subtitle }) {
     )
 }
 
-export function HeaderBar() {
-    return (
-        <div className='bar'></div>
-    )
+export function HeaderBar({hideBar}) {
+    if(hideBar) {
+        return <div></div>
+    } else {
+        return <div className='bar'></div>
+    }
 }

src/components/layout.js

@@ -5,21 +5,25 @@ import { Header, HeaderBar } from './header';
 
 class Layout extends Component {
     render() {
+        const { title, subtitle, hideBar } = this.props;
         return (
             <div className='layout-grid'>
                 <Header
-                    title='Welcome to HOA Manager!'
-                    subtitle='Please login to continue'
+                    title={title}
+                    subtitle={subtitle}
                 />
-                <HeaderBar/>
+                {this.props.hideBar ? '' : <HeaderBar/>}
                 {this.props.children}
             </div>
         )
     }
 }
 
 function mapStateToProps(state) {
-    return state;
+    const header = state.header;
+    return {
+        ...header
+    }
 }
 
 Layout = connect(mapStateToProps)(Layout);

src/reducers/headerReducer.js

@@ -7,7 +7,7 @@ const INITIAL_STATE = {
 }
 
 export default function(state = INITIAL_STATE, action) {
-    switch (key) {
+    switch (action.type) {
         case UPDATE_HEADER:
             const { title, subtitle, hideBar } = action.payload;
             return {

src/reducers/index.js

@@ -5,12 +5,14 @@ import { reducer as form } from 'redux-form';
 import auth from './authReducer';
 import newsletters from './newsletterReducer';
 import requests from './requestsReducer';
+import header from './headerReducer';
 
 const rootReducer = combineReducers({
   form,
   auth,
   newsletters,
-  requests
+  requests,
+  header
 });
 
 export default rootReducer;

src/style/base.scss

@@ -22,7 +22,7 @@ body {
     height: 100vh;
 
     display: grid;
-    grid-template-rows: [page-s header-s] 13.6rem [header-e bar-s] 4rem [bar-e content-s] 1fr [content-e page-e];
+    grid-template-rows: [page-s header-s] 13.6rem [header-e bar-s] auto [bar-e content-s] 1fr [content-e page-e];
     grid-template-columns: [page-s] 14rem [content-s] 1fr [content-e] 14rem [page-e]
 }