working with sensor styling

client/js/components/Sidebar.js

@@ -17,6 +17,7 @@ export default class Sidebar extends React.Component {
     };
 
     this.onToggle = this.onToggle.bind(this);
+    this.toggleOff = this.toggleOff.bind(this);
   }
 
   onToggle() {
@@ -27,7 +28,15 @@ export default class Sidebar extends React.Component {
       toggler: temp
     });
   }
-
+  
+  toggleOff(){
+    if(this.state.toggler !== ""){
+      this.setState({
+        toggler : ""
+      });
+    }
+  }
+  
   render() {
     return (
       <div class={"Sidebar " + this.state.toggler}>
@@ -37,7 +46,7 @@ export default class Sidebar extends React.Component {
             aria-hidden="true" />
         </a>
         <AboutMe/>
-        {this.props.sensor.fetchedList ? <SensorList list={this.props.sensor.list}/> : null}
+        {this.props.sensor.fetchedList ? <SensorList list={this.props.sensor.list} toggleOff={this.toggleOff}/> : null}
       </div>
     );
   }

client/js/components/sensors/SensorList.js

@@ -1,30 +1,52 @@
 import React from 'react';
+import {browserHistory} from 'react-router';
 import 'whatwg-fetch';
 
 import './SensorList.scss';
 
-export default class SensorList extends React.Component {
+const options = {
+  month: 'numeric',
+  day: 'numeric',
+  year: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric',
+  hour12: true
+};
 
+export default class SensorList extends React.Component {
+  
+  constructor(){
+    super();
+    this.openLink = this.openLink.bind(this);
+  }
+  
+  openLink(){
+    browserHistory.push("/");
+    this.props.toggleOff();
+  }
+  
   insertSensorData = (sensor, index) => {
     const date = new Date(sensor.updated);
 
     return (
-      <div key={index} class="row">
-        <div class="item"><h1>{sensor.temperature}</h1><p>Connected</p></div>
+      <div key={index} class="row" onClick={this.openLink}>
+        <div class="item">
+          <h1>{sensor.temperature}°f</h1>
+        </div>
         <div class="item">
           <h3>{sensor.location}</h3>
-          <p>{date.toString()}</p>
+          <span class="date">Updated: {date.toLocaleString('en-us', options)}</span>
         </div>
       </div>
     );
   }
+  
   render() {
     const list = this.props.list;
     
     return (
       <div class="SensorList">
         <h2>Sensors</h2>
-        <hr/>
         {list.map(this.insertSensorData)}
       </div>
     )

client/js/components/sensors/SensorList.scss

@@ -3,9 +3,26 @@
         display: flex;
         flex-direction: row;
         align-items: center;
+        cursor: pointer;
+        margin-left: -1em;
+        margin-right: -1em;
+        padding: 1em;
+        
+        &:hover{
+            background-color: gray;
+        }
         
         .item + .item{
             margin-left: 1em;
         }
+        
+        h2{
+            margin-bottom: 0;
+        }
+        
+        .date{
+            font-size: .8em;
+        }
     }
+    
 }