first commit of header seeking feedback on what to implement

artifacts/assorted-jaeger.md

@@ -3,8 +3,8 @@
 Working on UI and a few pieces of functionality.
 
 ## Project Specs
-- [ ] [Issue #90:](https://github.com/GuildCrafts/noob/issues/90) Tasks should be sorted according to title
-- [ ] [Issue #86:](https://github.com/GuildCrafts/noob/issues/86) Add a link to file an issue in the footer
+- [x] [Issue #90:](https://github.com/GuildCrafts/noob/issues/90) Tasks should be sorted according to title
+- [x] [Issue #86:](https://github.com/GuildCrafts/noob/issues/86) Add a link to file an issue in the footer
 - [ ] [Issue #85:](https://github.com/GuildCrafts/noob/issues/85) Add an estimated completion time to template tasks and tasks
 - [ ] [Issue #78:](https://github.com/GuildCrafts/noob/issues/78) Create a header for Newbie
 

package.json

@@ -37,6 +37,7 @@
     "json-loader": "^0.5.4",
     "knex": "^0.12.6",
     "lodash": "^4.17.4",
+    "md5": "^2.2.1",
     "mocha": "^3.2.0",
     "moment": "^2.17.1",
     "morgan": "~1.7.0",

src/browser/components/atoms/Userimage/userImage.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react'
+import styles from './userimage.css'
+import md5 from 'md5'
+
+export default class UserImage extends Component {
+  emailHash(){
+
+    if(this.props.user !== undefined) {
+      return md5(this.props.user.email)
+    } else {
+      return ''
+    }
+  }
+
+  render() {
+    return (
+      <img className='user-image' src={`https://gravatar.com/avatar/${this.emailHash()}`} />
+    )
+  }
+}

src/browser/components/atoms/Userimage/userimage.css

@@ -0,0 +1,4 @@
+.user-image {
+    width: 50px;
+    height: 50px;
+}

src/browser/components/molecules/Navbar/index.css

@@ -1,4 +1,6 @@
 .Navbar {
+    font-family: inherit;
+    font-size: 30px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;

src/browser/components/molecules/Navbar/index.js

@@ -1,10 +1,14 @@
 import React, { Component } from 'react'
 import styles from './index.css'
+import UserImage from '../../atoms/Userimage/userimage'
 
 export default class Navbar extends Component {
   render() {
-    return (<div className={styles.Navbar}>
-              This is the navbar
-            </div>)
+    const {user} = this.props
+
+    return <div className={styles.Navbar}>
+             Newbie
+             <UserImage user={user} />
+            </div>
   }
 }

src/browser/components/pages/Dashboard/index.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import Layout from '../../molecules/Layout/index'
 import styles from './index.css'
+import Navbar from '../../molecules/Navbar/index'
 import GenericDashboard from '../GenericDashboard/index'
 import MentorDashboard from '../MentorDashboard/index'
 import NewbieDashboard from '../NewbieDashboard/index'
@@ -23,13 +24,14 @@ export default class Dashboard extends Component {
       }),
       credentials: 'same-origin'
     }
+
     fetch('/api/users/current_user', options)
       .then( response => {
         return response.json()
       })
       .then( user => {
-        this.setState({user: user})
-      });
+        this.setState({ user })
+      })
   }
 
   chooseDashboardJSX(user){
@@ -55,6 +57,7 @@ export default class Dashboard extends Component {
     console.log('state:', this.state)
     return (
         <Layout>
+        <Navbar user={this.state.user} />
           {this.chooseDashboardJSX(this.state.user)}
         </Layout>
     )