Application header and push states dev server properly implemented

Author: Webdesignwill

public/assets/css/styles.css

@@ -13,6 +13,7 @@ var server = new WebpackDevServer(compiler, {
   filename: 'app.bundle.js',
   hot: true,
   quiet: true,
+  historyApiFallback: true,
   stats: {
     colors: true
   }

public/assets/img/baas-logo.png

@@ -14,6 +14,7 @@ body {
 }
 
 .table-container {
+  padding-top:15px;
   position:relative;
   padding-left: $sidebarWidth;
 }
@@ -23,3 +24,10 @@ body {
   width: 100%;
   margin: 0;
 }
+
+.empty-message {
+  font-size: 5rem;
+  color: lightgrey;
+  margin-top: 40%;
+  text-align: center;
+}

server.js

@@ -1,6 +1,5 @@
 
 .campaign-list {
-  padding-top: 15px;
   margin: 0;
   p.lead {
     padding-bottom:20px;

src/sass/_base.scss

@@ -15,6 +15,11 @@
     margin-bottom: 0;
   }
 
+  .sidebar-logo {
+    padding: 5px 0 5px;
+    background-color: #1c2a41;
+  }
+
   .sidebar-header {
     padding: 10px 0 0 15px;
     margin-bottom:10px;

src/sass/components/_campaigns.scss

@@ -0,0 +1,14 @@
+import React, { Component, PropTypes } from 'react'
+
+export default class ApplicationHeader extends Component {
+
+  static propTypes = {}
+
+  render () {
+    return (
+      <div className="primary-header">
+        <img src="/assets/img/baas-logo.png" />
+      </div>
+    )
+  }
+}

src/sass/components/_sidebar.scss

@@ -56,6 +56,9 @@ export default class Sidebar extends Component {
 
     return (
       <aside className="sidebar">
+        <div className="sidebar-logo">
+          <img src="/assets/img/baas-logo.png" />
+        </div>
         <CustomerDropdown params={this.props.params} />
         <div className="sidebar-group">
           <div className="sidebar-header">

src/scripts/components/ApplicationHeader.js

@@ -24,8 +24,6 @@ function mapStateToProps(store, props) {
           return campaign
         }
       })
-    } else {
-      campaigns = customer.campaigns
     }
   }
 

src/scripts/components/Sidebar.js

@@ -10,10 +10,10 @@ export default class Campaign extends Component {
       <div className="row campaign-list">
         {this.props.campaigns.length ? this.props.campaigns.map(campaign =>
           <div className="col-sm-12 clearfix" key={campaign.id}>
-            <p className="lead">{campaign.meta.name} <a className="pull-right text-size-sm" href="#"><i className="fa fa-link" aria-hidden="true"></i> Campaign Highlights</a></p>
+            <p className="lead">{campaign.meta.name} <a className="pull-right text-size-sm" href="#"><i className="fa fa-link" aria-hidden="true"></i> Campaign Insights</a></p>
             <MediaChannels campaignid={campaign.id} mediachannels={campaign.media_channels} />
           </div>
-        ) : null}
+        ) : <div className="empty-message"><p>Select a campaign</p></div>}
       </div>
     )
   }

src/scripts/containers/dashboards/mediaspecialist/Campaign.js

@@ -34,8 +34,8 @@ export default class CustomerDropdown extends Component {
     return (
       <div className="sidebar-group">
         <div className="sidebar-header">Customers</div>
-        <div className={`list-group sidebar-dropdown ${expandedClass}`}>
-          <div className="list-group-item clearfix" onClick={this.clickHandler}>
+        <div className={`list-group sidebar-dropdown ${expandedClass}`} onClick={this.clickHandler}>
+          <div className="list-group-item clearfix">
             <p className="lead select selected">{selectedText} <i className={`fa fa-caret-${caret}`} aria-hidden="true"></i></p>
           </div>
           {this.props.customers ? this.props.customers.map(customer =>

src/scripts/dashboards/mediaspecialist/Campaign.js

@@ -1,6 +1,7 @@
 import React, { Component, PropTypes } from 'react'
 import { fetchData } from '../actions/dashboards/mediaspecialist'
 import Sidebar from '../containers/Sidebar'
+import ApplicationHeader from '../components/ApplicationHeader'
 
 export default class Mediaspecialist extends Component {
 
@@ -14,9 +15,15 @@ export default class Mediaspecialist extends Component {
     return (
       <div className="container">
         <Sidebar params={this.props.params} campaignids={this.props.location.query.campaignid}/>
-        <main role="main" className="table-container">
+        <main role="main">
           <a name="top"></a>
-          {this.props.children}
+          <div className="table-container">
+            {this.props.children}
+            {this.props.params.customerid === undefined ?
+              <div className="empty-message">
+                <p>Select a customer</p>
+              </div> : null}
+          </div>
         </main>
       </div>
     )