From fc6af3cd4e90335cd16a56081409618cdd10cda3 Mon Sep 17 00:00:00 2001
From: mgerb42 <mgerb42@gmail.com>
Date: Tue, 6 Sep 2016 16:59:46 +0000
Subject: [PATCH] working on sidebar/sensors

---
 client/js/components/Sidebar.js              | 30 ++---------------
 client/js/components/sensors/SensorList.js   | 16 ++++++---
 client/js/components/sensors/SensorList.scss | 11 ++++++
 client/js/components/utils/AboutMe.js        | 35 ++++++++++++++++++++
 4 files changed, 59 insertions(+), 33 deletions(-)
 create mode 100644 client/js/components/sensors/SensorList.scss
 create mode 100644 client/js/components/utils/AboutMe.js

diff --git a/client/js/components/Sidebar.js b/client/js/components/Sidebar.js
index ce12e27..de000e5 100644
--- a/client/js/components/Sidebar.js
+++ b/client/js/components/Sidebar.js
@@ -2,9 +2,9 @@ import React from 'react';
 
 //components
 import SensorList from './sensors/SensorList';
+import AboutMe from './utils/AboutMe';
 
 //assets
-import me from '../../assets/images/me.jpg';
 import '../../assets/scss/Sidebar.scss';
 
 export default class Sidebar extends React.Component {
@@ -36,33 +36,7 @@ export default class Sidebar extends React.Component {
             class="fa fa-2x fa-navicon"
             aria-hidden="true" />
         </a>
-        <h2>About Me</h2>
-        <img src={me}/>
-        <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-envelope" aria-hidden="true"></i>
-          <a class="link" href="mailto:mgerb42@gmail.com"> eMail</a>
-        </p>
-        <p>
-          <i class="fa fa-linkedin-square" aria-hidden="true"></i>
-          <a class="link" href="https://www.linkedin.com/in/mitchell-gerber-125391b3" target="_blank"> LinkedIn</a>
-        </p>
-        <p>
-          <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>
-
-        <br/>
-
-        <h2>Sensors</h2>
-        <hr/>
+        <AboutMe/>
         {this.props.sensor.fetchedList ? <SensorList list={this.props.sensor.list}/> : null}
       </div>
     );
diff --git a/client/js/components/sensors/SensorList.js b/client/js/components/sensors/SensorList.js
index d7b79eb..a7e2ddb 100644
--- a/client/js/components/sensors/SensorList.js
+++ b/client/js/components/sensors/SensorList.js
@@ -1,16 +1,20 @@
 import React from 'react';
 import 'whatwg-fetch';
 
+import './SensorList.scss';
+
 export default class SensorList extends React.Component {
 
   insertSensorData = (sensor, index) => {
     const date = new Date(sensor.updated);
 
     return (
-      <div key={index}>
-        <h3>{sensor.location}</h3>
-        <p>{sensor.temperature}</p>
-        <p>{date.toString()}</p>
+      <div key={index} class="row">
+        <div class="item"><h1>{sensor.temperature}</h1><p>Connected</p></div>
+        <div class="item">
+          <h3>{sensor.location}</h3>
+          <p>{date.toString()}</p>
+        </div>
       </div>
     );
   }
@@ -18,7 +22,9 @@ export default class SensorList extends React.Component {
     const list = this.props.list;
     
     return (
-      <div>
+      <div class="SensorList">
+        <h2>Sensors</h2>
+        <hr/>
         {list.map(this.insertSensorData)}
       </div>
     )
diff --git a/client/js/components/sensors/SensorList.scss b/client/js/components/sensors/SensorList.scss
new file mode 100644
index 0000000..111568f
--- /dev/null
+++ b/client/js/components/sensors/SensorList.scss
@@ -0,0 +1,11 @@
+.SensorList{
+    .row{
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        
+        .item + .item{
+            margin-left: 1em;
+        }
+    }
+}
\ No newline at end of file
diff --git a/client/js/components/utils/AboutMe.js b/client/js/components/utils/AboutMe.js
new file mode 100644
index 0000000..f9dd82d
--- /dev/null
+++ b/client/js/components/utils/AboutMe.js
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import me from '../../../assets/images/me.jpg';
+
+export default class AboutMe extends React.Component{
+    
+    render(){
+        return(
+            <div>
+                <h2>About Me</h2>
+                <img src={me}/>
+                <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-envelope" aria-hidden="true"></i>
+                  <a class="link" href="mailto:mgerb42@gmail.com"> eMail</a>
+                </p>
+                <p>
+                  <i class="fa fa-linkedin-square" aria-hidden="true"></i>
+                  <a class="link" href="https://www.linkedin.com/in/mitchell-gerber-125391b3" target="_blank"> LinkedIn</a>
+                </p>
+                <p>
+                  <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>
+            );
+    }
+}
\ No newline at end of file