Get user avatars for conversation list #217

BeagleLab · Jul 15, 2015 · 66443e9 · 66443e9
1 parent f8fe3bd
commit 66443e9
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 54 deletions.
diff --git a/build/main.min.js b/build/main.min.js
@@ -328,12 +328,9 @@ var Conversation = require('./components/conversation.jsx');
 var Conversations = require('./components/conversations.jsx');
 // Dummy Data
 var conversationData = require('./data/schema.js').conversation;
-// TODO: Create this programmatically from account data
-conversationData.avatars = ['http://upload.wikimedia.org/wikipedia/en/4/42/Richard_Feynman_Nobel.jpg', 'http://upload.wikimedia.org/wikipedia/en/4/42/Richard_Feynman_Nobel.jpg'];
+
 // TODO Add date to the conversation schema
 conversationData.date = '9 minutes';
-// TODO Get programmatically
-conversationData.commentNumber = '234';
 
 var conversationsData = [conversationData, conversationData];
 // var account = require('./data/schema.js').account
@@ -446,9 +443,6 @@ var Conversation = React.createClass({
     conversation: React.PropTypes.object,
     account: React.PropTypes.object
   },
-  // TODO It seems to me that the title should be tied to the first note.
-  // As we have it, a conversation object has a title, but no text, just an array of notes
-  // I'm not sure this is right.
   getInitialState: function getInitialState() {
     return {
       submitted: false,
@@ -459,8 +453,8 @@ var Conversation = React.createClass({
     };
   },
   onClick: function onClick() {
-    // Shim the author ID.
     // TODO Make sure that userId and id should be the same
+    // Shim the author ID.
     var author = {};
     if (this.state.author) {
       author.id = this.state.author.userId;
@@ -544,13 +538,16 @@ module.exports = exports = Conversation;
 'use strict';
 
 var React = require('react');
+var PouchDBUrl = require('../env.js').PouchDBUrl;
+var PouchDB = require('pouchdb');
+PouchDB.plugin(require('pouchdb-authentication'));
+var db = new PouchDB(PouchDBUrl);
+var _ = require('lodash');
 
 // TODO: On Load:
-// Get the conversations needed
+// Get the conversations needed -- Pass these through to the component
 // Get the date of the first (or last?) note in each conversation
 // Sort conversations by date last interacted with
-// Get the account details for each participant in a conversation
-// Make an array of the account avatars
 
 module.exports = exports = React.createClass({
   displayName: 'Conversations',
@@ -562,9 +559,44 @@ module.exports = exports = React.createClass({
       conversations: this.props.conversations
     };
   },
-  render: function render() {
-    console.log('state', this.props.conversations, this.state.conversations);
+  componentWillMount: function componentWillMount() {
+    var dummyImage = 'http://upload.wikimedia.org/wikipedia/en/4/42/Richard_Feynman_Nobel.jpg';
+    var userPromises = [];
+    var clone = _.each(this.state.conversations.slice(), function (conversation) {
+      conversation.avatars = [];
+      _.each(_.keys(conversation.participants), function (key) {
+        if (conversation.participants.hasOwnProperty(key)) {
+          // Suggestion: Only show avatars for participants who have actively contributed to conversation
+          var getAvatar = db.getUser(key).then(function (err, res) {
+            // TODO Add in popovers with the user name if they have one, and link to a profile section
+            if (res.avatar) {
+              conversation.avatars.push(res.avatar);
+              return;
+            } else if (err) {
+              console.log(err);
+            }
+          })['catch'](function (err) {
+            if (err.status === 404) {
+              if (conversation.avatars.indexOf(dummyImage) === -1) {
+                conversation.avatars.push(dummyImage);
+              }
+              return;
+            } else {
+              console.log(err);
+            }
+          });
+          userPromises.push(getAvatar);
+        }
+      });
+    });
 
+    Promise.all(userPromises).then((function () {
+      this.setState({ conversations: clone });
+    }).bind(this))['catch'](function (err) {
+      console.log('Catch promise err', err);
+    });
+  },
+  render: function render() {
     var listingStyle = {},
         titleStyle = {
       fontWeight: '600',
@@ -589,17 +621,15 @@ module.exports = exports = React.createClass({
     };
 
     return React.createElement('div', null, this.state.conversations.map(function (conversation) {
-      var avatars = conversation.avatars;
-
-      return React.createElement('div', { style: listingStyle }, React.createElement('p', { style: titleStyle }, conversation.title), React.createElement('div', { style: imageWrapperStyle }, conversation.avatars.slice(0, 5).map(function (avatar) {
-        return React.createElement('img', { style: imgStyle, key: avatars.indexOf(avatar), src: avatar });
-      })), React.createElement('span', { style: dateStyle }, 'Updated ', conversation.date, ' ago'), React.createElement('div', { style: commentStyle }, React.createElement('i', { className: 'fa fa-comment' }), ' ', conversation.notes.length));
+      return React.createElement('div', { style: listingStyle }, React.createElement('p', { style: titleStyle }, conversation.title), React.createElement('div', { style: imageWrapperStyle }, conversation.avatars ? conversation.avatars.slice(0, 5).map(function (avatar) {
+        return React.createElement('img', { style: imgStyle, key: conversation.avatars.indexOf(avatar), src: avatar });
+      }) : null), React.createElement('span', { style: dateStyle }, 'Updated ', conversation.date, ' ago'), React.createElement('div', { style: commentStyle }, React.createElement('i', { className: 'fa fa-comment' }), ' ', conversation.notes ? conversation.notes.length : 0));
     }));
   }
 
 });
 
-},{"react":"/Users/richard/src/beagle/node_modules/react/react.js"}],"/Users/richard/src/beagle/js/components/emailForm.jsx":[function(require,module,exports){
+},{"../env.js":"/Users/richard/src/beagle/js/env.js","lodash":"/Users/richard/src/beagle/node_modules/lodash/index.js","pouchdb":"/Users/richard/src/beagle/node_modules/pouchdb/lib/index.js","pouchdb-authentication":"/Users/richard/src/beagle/node_modules/pouchdb-authentication/lib/index.js","react":"/Users/richard/src/beagle/node_modules/react/react.js"}],"/Users/richard/src/beagle/js/components/emailForm.jsx":[function(require,module,exports){
 'use strict';
 
 var React = require('react');

diff --git a/js/app.jsx b/js/app.jsx
@@ -35,15 +35,9 @@ var Conversation = require('./components/conversation.jsx')
 var Conversations = require('./components/conversations.jsx')
 // Dummy Data
 var conversationData = require('./data/schema.js').conversation
-// TODO: Create this programmatically from account data
-conversationData.avatars = [
-  'http://upload.wikimedia.org/wikipedia/en/4/42/Richard_Feynman_Nobel.jpg',
-  'http://upload.wikimedia.org/wikipedia/en/4/42/Richard_Feynman_Nobel.jpg'
-]
+
 // TODO Add date to the conversation schema
 conversationData.date = '9 minutes'
-// TODO Get programmatically
-conversationData.commentNumber = '234'
 
 var conversationsData = [conversationData, conversationData]
 // var account = require('./data/schema.js').account

diff --git a/js/components/conversation.jsx b/js/components/conversation.jsx
@@ -8,9 +8,6 @@ var Conversation = React.createClass({
     conversation: React.PropTypes.object,
     account: React.PropTypes.object
   },
-  // TODO It seems to me that the title should be tied to the first note.
-  // As we have it, a conversation object has a title, but no text, just an array of notes
-  // I'm not sure this is right.
   getInitialState: function () {
     return {
       submitted: false,
@@ -21,8 +18,8 @@ var Conversation = React.createClass({
     }
   },
   onClick: function () {
-    // Shim the author ID.
     // TODO Make sure that userId and id should be the same
+    // Shim the author ID.
     var author = {}
     if (this.state.author) {
       author.id = this.state.author.userId

diff --git a/js/components/conversations.jsx b/js/components/conversations.jsx
@@ -1,11 +1,14 @@
 var React = require('react')
+var PouchDBUrl = require('../env.js').PouchDBUrl
+var PouchDB = require('pouchdb')
+PouchDB.plugin(require('pouchdb-authentication'))
+var db = new PouchDB(PouchDBUrl)
+var _ = require('lodash')
 
 // TODO: On Load:
-// Get the conversations needed
+// Get the conversations needed -- Pass these through to the component
 // Get the date of the first (or last?) note in each conversation
 // Sort conversations by date last interacted with
-// Get the account details for each participant in a conversation
-// Make an array of the account avatars
 
 module.exports = exports = React.createClass({
   displayName: 'Conversations',
@@ -17,9 +20,44 @@ module.exports = exports = React.createClass({
       conversations: this.props.conversations
     }
   },
-  render: function () {
-    console.log('state', this.props.conversations, this.state.conversations)
+  componentWillMount: function () {
+    let dummyImage = 'http://upload.wikimedia.org/wikipedia/en/4/42/Richard_Feynman_Nobel.jpg'
+    let userPromises = []
+    let clone = _.each(this.state.conversations.slice(), function (conversation) {
+      conversation.avatars = []
+      _.each(_.keys(conversation.participants), function (key) {
+        if (conversation.participants.hasOwnProperty(key)) {
+          // Suggestion: Only show avatars for participants who have actively contributed to conversation
+          let getAvatar = db.getUser(key).then(function (err, res) {
+            // TODO Add in popovers with the user name if they have one, and link to a profile section
+            if (res.avatar) {
+              conversation.avatars.push(res.avatar)
+              return
+            } else if (err) {
+              console.log(err)
+            }
+          }).catch(function (err) {
+            if (err.status === 404) {
+              if (conversation.avatars.indexOf(dummyImage) === -1) {
+                conversation.avatars.push(dummyImage)
+              }
+              return
+            } else {
+              console.log(err)
+            }
+          })
+          userPromises.push(getAvatar)
+        }
+      })
+    })
 
+    Promise.all(userPromises).then(function () {
+      this.setState({conversations: clone})
+    }.bind(this)).catch(function (err) {
+      console.log('Catch promise err', err)
+    })
+  },
+  render: function () {
     var listingStyle = {},
     titleStyle = {
       fontWeight: '600',
@@ -45,26 +83,24 @@ module.exports = exports = React.createClass({
 
     return (
       <div>
-        {
-          this.state.conversations.map(function (conversation) {
-            var avatars = conversation.avatars
-
-            return (
-              <div style={listingStyle}>
-                <p style={titleStyle}>{conversation.title}</p>
-                <div style={imageWrapperStyle}>
-                  {conversation.avatars.slice(0, 5).map(function (avatar) {
-                    return <img style={imgStyle} key={avatars.indexOf(avatar)} src={avatar} />
-                  })}
-                </div>
-                <span style={dateStyle}>Updated {conversation.date} ago</span>
-                <div style={commentStyle}>
-                  <i className='fa fa-comment'></i> {conversation.notes.length}
-                </div>
+        {this.state.conversations.map(function (conversation) {
+          return (
+            <div style={listingStyle}>
+              <p style={titleStyle}>{conversation.title}</p>
+              <div style={imageWrapperStyle}>
+                { (conversation.avatars) ?
+                  conversation.avatars.slice(0, 5).map(function (avatar) {
+                    return <img style={imgStyle} key={conversation.avatars.indexOf(avatar)} src={avatar} />
+                  }) : null
+                }
               </div>
-            )
-          })
-        }
+              <span style={dateStyle}>Updated {conversation.date} ago</span>
+              <div style={commentStyle}>
+                <i className='fa fa-comment'></i> {(conversation.notes) ? conversation.notes.length : 0}
+              </div>
+            </div>
+          )
+        })}
       </div>
     )
   }