Merge pull request #1433 from matrix-org/luke/fix-groups-summary-rooms-with-no-avatar

Fix GroupView summary rooms displaying without avatars

src/components/structures/GroupView.js

@@ -179,20 +179,26 @@ const FeaturedRoom = React.createClass({
     render: function() {
         const RoomAvatar = sdk.getComponent("avatars.RoomAvatar");
 
+        const roomName = this.props.summaryInfo.profile.name ||
+            this.props.summaryInfo.profile.canonical_alias ||
+            _t("Unnamed Room");
+
         const oobData = {
             roomId: this.props.summaryInfo.room_id,
             avatarUrl: this.props.summaryInfo.profile.avatar_url,
-            name: this.props.summaryInfo.profile.name,
+            name: roomName,
         };
+
         let permalink = null;
         if (this.props.summaryInfo.profile && this.props.summaryInfo.profile.canonical_alias) {
             permalink = 'https://matrix.to/#/' + this.props.summaryInfo.profile.canonical_alias;
         }
+
         let roomNameNode = null;
         if (permalink) {
-            roomNameNode = <a href={permalink} onClick={this.onClick} >{this.props.summaryInfo.profile.name}</a>;
+            roomNameNode = <a href={permalink} onClick={this.onClick} >{roomName}</a>;
         } else {
-            roomNameNode = <span>{this.props.summaryInfo.profile.name}</span>;
+            roomNameNode = <span>{roomName}</span>;
         }
 
         const deleteButton = this.props.editing ?

src/components/views/avatars/RoomAvatar.js

@@ -13,11 +13,10 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-var React = require('react');
+import React from "react";
-var ContentRepo = require("matrix-js-sdk").ContentRepo;
+import {ContentRepo} from "matrix-js-sdk";
-var MatrixClientPeg = require('../../../MatrixClientPeg');
+import MatrixClientPeg from "../../../MatrixClientPeg";
-var Avatar = require('../../../Avatar');
+import sdk from "../../../index";
-var sdk = require("../../../index");
 
 module.exports = React.createClass({
     displayName: 'RoomAvatar',
@@ -30,7 +29,7 @@ module.exports = React.createClass({
         oobData: React.PropTypes.object,
         width: React.PropTypes.number,
         height: React.PropTypes.number,
-        resizeMethod: React.PropTypes.string
+        resizeMethod: React.PropTypes.string,
     },
 
     getDefaultProps: function() {
@@ -44,13 +43,13 @@ module.exports = React.createClass({
 
     getInitialState: function() {
         return {
-            urls: this.getImageUrls(this.props)
+            urls: this.getImageUrls(this.props),
         };
     },
 
     componentWillReceiveProps: function(newProps) {
         this.setState({
-            urls: this.getImageUrls(newProps)
+            urls: this.getImageUrls(newProps),
         });
     },
 
@@ -61,11 +60,10 @@ module.exports = React.createClass({
                 props.oobData.avatarUrl,
                 Math.floor(props.width * window.devicePixelRatio),
                 Math.floor(props.height * window.devicePixelRatio),
-                props.resizeMethod
+                props.resizeMethod,
             ), // highest priority
             this.getRoomAvatarUrl(props),
-            this.getOneToOneAvatar(props),
+            this.getOneToOneAvatar(props), // lowest priority
-            this.getFallbackAvatar(props) // lowest priority
         ].filter(function(url) {
             return (url != null && url != "");
         });
@@ -79,17 +77,17 @@ module.exports = React.createClass({
             Math.floor(props.width * window.devicePixelRatio),
             Math.floor(props.height * window.devicePixelRatio),
             props.resizeMethod,
-            false
+            false,
         );
     },
 
     getOneToOneAvatar: function(props) {
         if (!props.room) return null;
 
-        var mlist = props.room.currentState.members;
+        const mlist = props.room.currentState.members;
-        var userIds = [];
+        const userIds = [];
         // for .. in optimisation to return early if there are >2 keys
-        for (var uid in mlist) {
+        for (const uid in mlist) {
             if (mlist.hasOwnProperty(uid)) {
                 userIds.push(uid);
             }
@@ -99,7 +97,7 @@ module.exports = React.createClass({
         }
 
         if (userIds.length == 2) {
-            var theOtherGuy = null;
+            let theOtherGuy = null;
             if (mlist[userIds[0]].userId == MatrixClientPeg.get().credentials.userId) {
                 theOtherGuy = mlist[userIds[1]];
             } else {
@@ -110,7 +108,7 @@ module.exports = React.createClass({
                 Math.floor(props.width * window.devicePixelRatio),
                 Math.floor(props.height * window.devicePixelRatio),
                 props.resizeMethod,
-                false
+                false,
             );
         } else if (userIds.length == 1) {
             return mlist[userIds[0]].getAvatarUrl(
@@ -118,37 +116,24 @@ module.exports = React.createClass({
                 Math.floor(props.width * window.devicePixelRatio),
                 Math.floor(props.height * window.devicePixelRatio),
                 props.resizeMethod,
-                false
+                false,
             );
         } else {
            return null;
         }
     },
 
-    getFallbackAvatar: function(props) {
-        let roomId = null;
-        if (props.oobData && props.oobData.roomId) {
-            roomId = this.props.oobData.roomId;
-        } else if (props.room) {
-            roomId = props.room.roomId;
-        } else {
-            return null;
-        }
-
-        return Avatar.defaultAvatarUrlForString(roomId);
-    },
-
     render: function() {
-        var BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
+        const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
 
-        var {room, oobData, ...otherProps} = this.props;
+        const {room, oobData, ...otherProps} = this.props;
 
-        var roomName = room ? room.name : oobData.name;
+        const roomName = room ? room.name : oobData.name;
 
         return (
             <BaseAvatar {...otherProps} name={roomName}
                 idName={room ? room.roomId : null}
                 urls={this.state.urls} />
         );
-    }
+    },
 });