Update avatar thumbnailUrl per discussion

server/index.js

@@ -33,7 +33,11 @@ if ( process.env.NODE_ENV != 'production' ) {
         var proxyRoute = proxies[proxyId];
         app.use(proxyRoute.root, proxy(proxyRoute.proxy || proxyHost, {
             filter: function (req) {
-                return proxyRoute.paths.indexOf(url.parse(req.url).path) > -1;
+                for (var pathId in proxyRoute.paths) {
+                    var path = proxyRoute.paths[pathId];
+                    if (url.parse(req.url).path.indexOf(path) == 0) return true;
+                }
+                return false;
             },
             forwardPath: function (req) {
                 return url.parse(req.url).path;

server/proxies.json

@@ -4,7 +4,8 @@
         "paths": [
             "/session/",
             "/accounts/login/",
-            "/accounts/logout/"
+            "/accounts/logout/",
+            "/get_image/"
         ]
     }
 ]

src/components/avatar/avatar.jsx

@@ -1,31 +1,20 @@
 var React = require('react');
+var classNames = require('classnames');
 
 module.exports = React.createClass({
     propTypes: {
-        path: React.PropTypes.string,
-        userId: React.PropTypes.number,
-        size: React.PropTypes.number,
-        extension: React.PropTypes.string,
-        version: React.PropTypes.number
+        src: React.PropTypes.string
     },
     getDefaultProps: function () {
         return {
-            path: '//cdn2.scratch.mit.edu/get_image/user/',
-            userId: 2584924,
-            size: 32,
-            extension: 'png',
-            version: 1438702210.96
+            src: '//cdn2.scratch.mit.edu/get_image/user/2584924_24x24.png?v=1438702210.96'
         };
     },
-    getImageUrl: function () {
-        return (
-            this.props.path + this.props.userId + '_' +
-            this.props.size + 'x' + this.props.size + '.' +
-            this.props.extension + '?v=' + this.props.version);
-    },
     render: function () {
-        var url = this.getImageUrl();
-        return (
-            <img className="avatar" src={url} />);
+        var classes = classNames(
+            'avatar',
+            this.props.className
+        );
+        return <img {... this.props} className={classes} />;
     }
 });

src/components/navigation/navigation.jsx

@@ -95,10 +95,7 @@ module.exports = React.createClass({
                         </li>,
                         <li className="link right account-nav" key="account-nav">
                             <a className="userInfo" href="#" onClick={this.handleClickAccountNav}>
-                                <Avatar
-                                    userId={this.state.session.user.id}
-                                    version={this.state.session.user.avatarVersion}
-                                    size={24} />
+                                <Avatar src={this.state.session.user.thumbnailUrl} />
                                 {this.state.session.user.username}
                             </a>
                             <Dropdown

src/session.json

@@ -3,7 +3,7 @@
     "user": {
         "id": 1709047,
         "username": "thisandagain",
-        "avatarVersion": 1438702210.96
+        "thumbnailUrl": "//cdn2.scratch.mit.edu/get_image/user/1709047_32x32.png?v=1427980331.0"
     },
     "permissions": {
         "admin": true,