getting ready to ship

client/assets/scss/Content.scss

@@ -2,6 +2,7 @@
     flex: 1;
     flex-wrap: wrap;
     min-width: 0;
+    min-height: 600px;
     .post+ .post {
         margin-top: 2em;
     }
@@ -14,6 +15,7 @@
             width: 7em;
             text-align: right;
             margin-left: -8em;
+            line-height: 2.5em;
         }
     }
     .intro {

client/assets/scss/Footer.scss

@@ -7,4 +7,13 @@
     border-color: #DADADA;
     font-weight: 300;
     margin-top: 1em;
+    
+    display: flex;
+    padding-right: calc(50% - 997px / 2);
+    padding-left: calc(50% - 997px / 2);
+    &:after,
+    &:before {
+        content: " ";
+        width: 1em;
+    }
 }

client/assets/scss/Header.scss

@@ -0,0 +1,12 @@
+.Header {
+    width: 100%;
+    background: url("../images/header.jpg");
+    background-size: cover;
+    height: 30em;
+    border-bottom: solid;
+    border-width: 1px;
+    border-color: #DADADA;
+    h1 {
+        text-align: center;
+    }
+}

client/assets/scss/main.scss

@@ -67,7 +67,6 @@ select{
     }
 }
 
-.Footer,
 .Main {
     display: flex;
     padding-right: calc(50% - 997px / 2);
@@ -83,19 +82,6 @@ select{
     padding-top: 1em;
 }
 
-.Header {
-    width: 100%;
-    background: url("../images/header.jpg");
-    background-size: cover;
-    height: 30em;
-    border-bottom: solid;
-    border-width: 1px;
-    border-color: #DADADA;
-    h1 {
-        text-align: center;
-    }
-}
-
 .Loading {
     display: flex;
     flex: 1;

client/js/components/Footer.js

@@ -7,7 +7,7 @@ export default class Footer extends React.Component {
   render() {
     return (
       <div class="Footer">
-        Site created and maintained by Mitchell Gerber
+        Site created by Mitchell Gerber
       </div>
     );
   }

client/js/components/Header.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import {bubble} from '../../assets/js/bubble';
 
+import '../../assets/scss/Header.scss';
+
 export default class Header extends React.Component {
   componentDidMount() {
     bubble();

client/js/components/sensors/SensorInfo.js

@@ -14,16 +14,18 @@ const LineChart = Chart.Line;
 
 export default class SensorInfo extends React.Component {
 
-    componentDidMount() {
+    componentWillMount() {
         let location = this.props.params.location;
         this.props.sensorActions.fetchUniqueDates(location);
     }
 
-    componentWillReceiveProps(nextProps) {
+    componentWillUpdate(nextProps) {
         let currentLocation = this.props.params.location,
             nextLocation = nextProps.params.location;
         
-        currentLocation !== nextLocation ? this.props.sensorActions.fetchUniqueDates(nextLocation) : null;
+        if (currentLocation !== nextLocation){
+            this.props.sensorActions.fetchUniqueDates(nextLocation);
+        }
     }
     
     loadYearOptions = (date, index) => {
@@ -64,7 +66,6 @@ export default class SensorInfo extends React.Component {
     filterData(data) {
         let temp = JSON.parse(JSON.stringify(DataTemplate));
         
-        console.log(temp);
         for (let d of data) {
             let label = `${d.month}/${d.day}`;
             temp.labels.push(label);

client/js/components/sensors/SensorInfo.scss

@@ -4,11 +4,12 @@
     flex-direction: column;
     align-items: center;
     min-width: 0;
+    min-height: 600px;
     width: 80%;
     .selector-row{
         display: flex;
         justify-content: center;
-        margin-bottom: 1em;
+        margin-bottom: 2em;
         select{
             margin-left: 5px;
         }

client/js/components/sensors/SensorList.js

@@ -35,7 +35,12 @@ export default class SensorList extends React.Component {
         </div>
         <div class="item">
           <h3>{sensor.location}</h3>
-          <span class="date">Updated: {date.toLocaleString('en-us', options)}</span>
+          <span class="date">Updated: {date.toLocaleString('en-us', options)}
+            {Date.now() - date < 420000
+              ? <span class="connected"> Connected</span>
+              : <span class="disconnected"> Disconnected</span>
+            }
+          </span>
         </div>
       </div>
     );

client/js/components/sensors/SensorList.scss

@@ -25,4 +25,11 @@
         }
     }
     
+    .connected{
+        color: green;
+    }
+    .disconnected{
+        color: red;
+    }
+    
 }

client/js/components/utils/AboutMe.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import {Link} from 'react-router';
 
 import me from '../../../assets/images/me.jpg';
 
@@ -12,7 +13,10 @@ export default class AboutMe extends React.Component{
                 <p>
                   My name is Mitchell and I have a passion for software development. I am currently a software engineer and enjoy working on personal projects in my free time.
                 </p>
-        
+                <p>
+                  <i class="fa fa-home" aria-hidden="true"></i>
+                  <Link to={"/"} class="link"> Home</Link>
+                </p>
                 <p>
                   <i class="fa fa-envelope" aria-hidden="true"></i>
                   <a class="link" href="mailto:mgerb42@gmail.com"> eMail</a>
@@ -25,10 +29,12 @@ export default class AboutMe extends React.Component{
                   <i class="fa fa-github" aria-hidden="true"></i>
                   <a class="link" href="https://github.com/mgerb" target="_blank"> GitHub</a>
                 </p>
+                {/*
                 <p>
                   <i class="fa fa-wpforms" aria-hidden="true"> </i>
                   <a href="/resume" class="link"> Resume</a>
                 </p>
+                */}
             </div>
             );
     }

client/js/redux/actions/sensor.js

@@ -96,9 +96,14 @@ export function fetchSensorInfoMonth(location, year, month){
     }
 }
 
+//this is called to initialize the sensor info page
+//reloads unique dates and resets indexes
+//then fetches new data for chart
 export function fetchUniqueDates(location){
     return (dispatch) => {
         dispatch(fetchingUniqueDates());
+        dispatch(setSelectedMonthIndex(0));
+        dispatch(setSelectedYearIndex(0));
         return fetch(`/api/uniquedates/${location}`)
             .then(response => response.json())
             .then(json => {

client/js/redux/store.js

@@ -6,7 +6,10 @@ import {syncHistoryWithStore} from 'react-router-redux';
 
 import reducers from './reducers/reducers';
 
-const middleware = applyMiddleware(thunk, logger());
+const debug = process.env.NODE_ENV !== "production";
+
+//run redux logger if we are in dev mode
+const middleware = debug ? applyMiddleware(thunk, logger()) : applyMiddleware(thunk);
 
 //create the new store with default state as an empty object
 const store = createStore(reducers, {}, middleware);

package.json

@@ -10,8 +10,8 @@
     "deploy": "npm run get_dependencies && npm run prod && ./mywebsite",
     "dev": "webpack-dev-server --content-base public --inline --hot --history-api-fallback",
     "get_dependencies": "go get ./server && npm install",
-    "prod": "export NODE_ENV=production && webpack -p && babel-node metadata.js && go build ./server/mywebsite.go",
+    "prod": "export NODE_ENV=production && webpack -p --define process.env.NODE_ENV='\"production\"' --progress --colors && babel-node metadata.js && go build ./server/mywebsite.go",
-    "prod-win": "set NODE_ENV=production && webpack -p && babel-node metadata.js && go build ./server/mywebsite.go",
+    "prod-win": "set NODE_ENV=production && webpack -p --define process.env.NODE_ENV='\"production\"' --progress --colors && babel-node metadata.js && go build ./server/mywebsite.go",
     "watch": "webpack --watch --colors --progress"
   },
   "repository": {