💄 Added profile image

💄 Added profile image next to user name in navbar. Using
gravatar for images
🎨 Added email to user model (may break tests)
💄 Added mixing to square image to a specific side length
🎨 Moved username component to separate component
🎨 Added email to redux reducer
🎨 Don't use lerna

app/models/User.js

@@ -9,7 +9,8 @@ const mongoose = require('mongoose');
 const User = new mongoose.Schema({
   name: String,
   username: { type: String, required: true },
-  password: { type: String, required: true }
+  password: { type: String, required: true },
+  email: { type: String, require: true }
 });
 
 // Compile & export

app/routes/api.js

@@ -3,10 +3,12 @@
  * Module dependencies
  */
 const express = require('express');
+const path = require('path');
 
 // Init
 const app = express();
 
+// GET /session/user
 app.get('/session/user', (req, res) => {
   res.json(req.user);
 });

client/sass/navbar.scss

@@ -17,6 +17,11 @@
   font-size: 19px;
   a {
     color: $navbar-text !important;
+    img {
+      @include square-img(25px);
+      border-radius: 50px;
+      margin-left: 5px;
+    }
   }
   a:hover {
     color: $navbar-text-hover !important;

client/sass/util/mixins.scss

@@ -25,3 +25,9 @@
     color: $colour;
   }
 }
+
+// Square image with one side $width
+@mixin square-img($width) {
+  height: $width;
+  width: $width;
+}

client/shared/components/navbar.jsx

@@ -1,11 +1,13 @@
-// JSX file for navbar
+ // JSX file for navbar
 import React, { Component, PropTypes } from 'react';
 import { Navbar, Nav, NavDropdown, MenuItem } from 'react-bootstrap';
 import FontAwesome from 'react-fontawesome';
 import { isMobile } from '../util/mobile';
 import { Sidebar, SidebarItem } from './sidebar';
 import { Hamburger } from './hamburger';
 import { ItemIcon as NavItemIcon } from './navbar/item';
+import { Username } from './username';
+import Gravatar from 'react-gravatar';
 // import { Hero } from './sidebar/hero';
 // Css (sass)
 import '../../sass/navbar.scss';
@@ -76,7 +78,7 @@ export class Navigater extends Component {
         <Navbar.Collapse>
           <Nav pullRight>
             <NavItemIcon href="/notifications" icon="bell" />
-            <NavDropdown title={`Hello, ${this.props.user.name}`} className="navbar-dropdown">
+            <NavDropdown title={<Username prefix="Hello," user={this.props.user} suffix={<Gravatar email={this.props.user.email} />} />} className="navbar-dropdown">
               <MenuItem><NavItemIcon href="/settings/profile" icon="user" text="Profile" /></MenuItem>
             </NavDropdown>
             <NavItemIcon href="/signout" icon="sign-out" normal />

client/shared/components/username.jsx

@@ -0,0 +1,18 @@
+// Username component
+import React, { Component, PropTypes } from 'react';
+
+// Export
+export class Username extends Component {
+  render() {
+    return (
+      <span>{this.props.prefix} {this.props.user.name} {this.props.suffix}</span>
+    );
+  }
+}
+
+// PropTypes
+Username.propTypes = {
+  prefix: PropTypes.string,
+  suffix: PropTypes.string,
+  user: PropTypes.object.isRequired
+};

client/shared/reducers/User.js

@@ -15,7 +15,8 @@ export const user = (state = intial, action) => {
       return {
         id: action.user._id,
         username: action.user.username,
-        name: action.user.name || action.user.username
+        name: action.user.name || action.user.username,
+        email: action.user.email
       };
     case LOG_OUT:
       return intial;

package.json

@@ -8,7 +8,6 @@
     "compile": "gulp compile",
     "compile:sass": "gulp compile:sass",
     "install": "npm run mkdirs",
-    "bootstrap": "lerna bootstrap",
     "build": "webpack --config ./webpack.config.js",
     "lint": "eslint .",
     "mkdirs": "node script/mkdirs",
@@ -62,6 +61,7 @@
     "react-bootstrap": "^0.29.4",
     "react-dom": "^15.1.0",
     "react-fontawesome": "^1.1.0",
+    "react-gravatar": "^2.4.3",
     "react-redux": "^4.4.5",
     "react-router": "^2.4.1",
     "redux": "^3.5.2",
@@ -95,7 +95,6 @@
     "gulp-ruby-sass": "^2.0.6",
     "image-webpack-loader": "^1.8.0",
     "istanbul": "^0.4.3",
-    "lerna": "2.0.0-beta.20",
     "mocha": "^2.5.3",
     "mocha-lcov-reporter": "^1.2.0",
     "nodemon": "^1.9.2",