From e825a4af3c276c7f293bb3cf561babfbe4f9ce5b Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Fri, 3 Feb 2017 00:40:40 +0000
Subject: [PATCH] show better error msg after UnkDevDialog

should fix https://github.com/vector-im/riot-web/issues/3122
---
 src/components/structures/RoomStatusBar.js | 10 +++++-----
 src/components/structures/RoomView.js      | 21 ++++++++++++++-------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js
index 5632b10c7f8..3fd0a3b751e 100644
--- a/src/components/structures/RoomStatusBar.js
+++ b/src/components/structures/RoomStatusBar.js
@@ -39,8 +39,8 @@ module.exports = React.createClass({
         // the number of messages which have arrived since we've been scrolled up
         numUnreadMessages: React.PropTypes.number,
 
-        // true if there are messages in the room which had errors on send
-        hasUnsentMessages: React.PropTypes.bool,
+        // string to display when there are messages in the room which had errors on send
+        unsentMessageError: React.PropTypes.string,
 
         // this is true if we are fully scrolled-down, and are looking at
         // the end of the live timeline.
@@ -160,7 +160,7 @@ module.exports = React.createClass({
             return STATUS_BAR_EXPANDED;
         } else if (props.tabCompleteEntries) {
             return STATUS_BAR_HIDDEN;
-        } else if (props.hasUnsentMessages) {
+        } else if (props.unsentMessageError) {
             return STATUS_BAR_EXPANDED_LARGE;
         }
         return STATUS_BAR_HIDDEN;
@@ -288,12 +288,12 @@ module.exports = React.createClass({
             );
         }
 
-        if (this.props.hasUnsentMessages) {
+        if (this.props.unsentMessageError) {
             return (
                 <div className="mx_RoomStatusBar_connectionLostBar">
                     <img src="img/warning.svg" width="24" height="23" title="/!\ " alt="/!\ "/>
                     <div className="mx_RoomStatusBar_connectionLostBar_title">
-                        Some of your messages have not been sent.
+                        { this.props.unsentMessageError }
                     </div>
                     <div className="mx_RoomStatusBar_connectionLostBar_desc">
                         <a className="mx_RoomStatusBar_resend_link"
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 38b3346e29b..a7d52019c47 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -128,7 +128,7 @@ module.exports = React.createClass({
             draggingFile: false,
             searching: false,
             searchResults: null,
-            hasUnsentMessages: false,
+            unsentMessageError: '',
             callState: null,
             guestsCanJoin: false,
             canPeek: false,
@@ -182,7 +182,7 @@ module.exports = React.createClass({
                     room: room,
                     roomId: result.room_id,
                     roomLoading: !room,
-                    hasUnsentMessages: this._hasUnsentMessages(room),
+                    unsentMessageError: this._getUnsentMessageError(room),
                 }, this._onHaveRoom);
             }, (err) => {
                 this.setState({
@@ -196,7 +196,7 @@ module.exports = React.createClass({
                 roomId: this.props.roomAddress,
                 room: room,
                 roomLoading: !room,
-                hasUnsentMessages: this._hasUnsentMessages(room),
+                unsentMessageError: this._getUnsentMessageError(room),
             }, this._onHaveRoom);
         }
     },
@@ -397,7 +397,7 @@ module.exports = React.createClass({
             case 'message_sent':
             case 'message_send_cancelled':
                 this.setState({
-                    hasUnsentMessages: this._hasUnsentMessages(this.state.room)
+                    unsentMessageError: this._getUnsentMessageError(this.state.room),
                 });
                 break;
             case 'notifier_enabled':
@@ -636,8 +636,15 @@ module.exports = React.createClass({
         }
     }, 500),
 
-    _hasUnsentMessages: function(room) {
-        return this._getUnsentMessages(room).length > 0;
+    _getUnsentMessageError: function(room) {
+        const unsentMessages = this._getUnsentMessages(room);
+        if (!unsentMessages.length) return "";
+        for (const event of unsentMessages) {
+            if (!event.error || event.error.name !== "UnknownDeviceError") {
+                return "Some of your messages have not been sent.";
+            }
+        }
+        return "Message not sent due to unknown devices being present";
     },
 
     _getUnsentMessages: function(room) {
@@ -1521,7 +1528,7 @@ module.exports = React.createClass({
                 room={this.state.room}
                 tabComplete={this.tabComplete}
                 numUnreadMessages={this.state.numUnreadMessages}
-                hasUnsentMessages={this.state.hasUnsentMessages}
+                unsentMessageError={this.state.unsentMessageError}
                 atEndOfLiveTimeline={this.state.atEndOfLiveTimeline}
                 hasActiveCall={inCall}
                 onResendAllClick={this.onResendAllClick}