実装：Profile Imageとしてgravatar Icon使用

Author: Rokt33r

browser/main/Components/PersonalSettingModal.jsx

@@ -4,6 +4,8 @@ var request = require('superagent')
 
 var Catalyst = require('../Mixins/Catalyst')
 
+var ProfileImage = require('./ProfileImage')
+
 var AuthActions = require('../Actions/AuthActions')
 
 var AuthStore = require('../Stores/AuthStore')
@@ -243,7 +245,8 @@ module.exports = React.createClass({
       content = (
         <div className='logout'>
           <p className='logoutLabel'>Are you sure to logout?</p>
-          <img className='userPhoto' width='150' height='150' src='../vendor/dummy.jpg'/><br/>
+
+          <ProfileImage className='userPhoto' size='150' email={this.props.currentUser.email}/><br/>
           <button onClick={this.logOut} className='logoutButton btn-default'>Logout</button>
         </div>
       )

browser/main/Components/PlanetNavigator.jsx

@@ -1,5 +1,7 @@
 var React = require('react/addons')
 
+var ProfileImage = require('./ProfileImage')
+
 var PlanetNavigator = React.createClass({
   propTypes: {
     currentPlanet: React.PropTypes.shape({
@@ -25,7 +27,7 @@ var PlanetNavigator = React.createClass({
     var users = this.props.currentPlanet.Users.map(function (user) {
       return (
         <li key={'user-' + user.id}>
-          <img width='44' height='44' src='../vendor/dummy.jpg'/>
+          <ProfileImage size='44' email={user.email}/>
           <div className='userTooltip'>{user.profileName}</div>
         </li>
       )

browser/main/Components/PlanetSettingModal.jsx

@@ -4,6 +4,8 @@ var Select = require('react-select')
 
 var Catalyst = require('../Mixins/Catalyst')
 
+var ProfileImage = require('./ProfileImage')
+
 var PlanetActions = require('../Actions/PlanetActions')
 
 var apiUrl = require('../../../config').apiUrl
@@ -106,7 +108,7 @@ module.exports = React.createClass({
       var members = this.props.currentPlanet.Users.map(function (user) {
         return (
           <li key={'user-' + user.id}>
-            <img className='userPhoto' width='44' height='44' src='../vendor/dummy.jpg'/>
+            <ProfileImage className='userPhoto' size='44' email={user.email}/>
             <div className='userName'>{user.name}</div>
             <div className='userControl'>
               {this.props.currentPlanet.OwnerId !== user.id ? <button onClick={this.removeUser(user.name)} className='btn-default'>Delete</button> : <span className='ownerLabel'>Owner</span>}

browser/main/Components/ProfileImage.jsx

@@ -0,0 +1,15 @@
+var React = require('react/addons')
+var md5 = require('md5')
+
+module.exports = React.createClass({
+  propTypes: {
+    email: React.PropTypes.string,
+    size: React.PropTypes.string,
+    className: React.PropTypes.string
+  },
+  render: function () {
+    return (
+      <img className={this.props.className} width={this.props.size} height={this.props.size} src={'http://www.gravatar.com/avatar/' + md5(this.props.email.trim().toLowerCase()) + '?s=' + this.props.size}/>
+    )
+  }
+})

browser/main/Components/UserNavigator.jsx

@@ -5,6 +5,7 @@ var Link = ReactRouter.Link
 var ModalBase = require('./ModalBase')
 var PersonalSettingModal = require('./PersonalSettingModal')
 var PlanetCreateModal = require('./PlanetCreateModal')
+var ProfileImage = require('./ProfileImage')
 
 var AuthStore = require('../Stores/AuthStore')
 
@@ -52,8 +53,6 @@ module.exports = React.createClass({
     }
   },
   render: function () {
-    console.log(this.props.currentUser)
-    console.log(this.props.currentPlanet)
     var planets = this.props.currentUser.Planets.map(function (planet, index) {
       return (
         <li key={planet.id} className={this.props.currentPlanet != null && this.props.currentPlanet.userName === planet.userName && this.props.currentPlanet.name === planet.name ? 'active' : ''}>
@@ -75,7 +74,7 @@ module.exports = React.createClass({
     return (
       <div tabIndex='2' className='UserNavigator'>
         <button onClick={this.openPersonalSettingModal} className='userButton'>
-          <img width='50' height='50' src='../vendor/dummy.jpg'/>
+          <ProfileImage size='50' email={this.props.currentUser.email}/>
         </button>
         <ul className='planetList'>
           {planets}

package.json

@@ -35,13 +35,14 @@
     "electron-stylus": "^0.1.0",
     "font-awesome": "^4.3.0",
     "markdown-it": "^4.3.1",
+    "md5": "^2.0.0",
     "moment": "^2.10.3",
+    "nib": "^1.1.0",
     "node-jsx": "^0.13.3",
     "react": "^0.13.3",
     "react-router": "^0.13.3",
     "react-select": "^0.5.4",
     "reflux": "^0.2.8",
-    "nib": "^1.1.0",
     "superagent": "^1.2.0"
   },
   "devDependencies": {