From ffd8ef84d6a73b0f1b7660dc59e5317ab7ffb2ac Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Tue, 28 Mar 2017 09:30:41 +0100
Subject: [PATCH] Fix VOIP bar hidden on first render of RoomStatusBar

componentDidUpdate is not called for the initial render of a React component (https://facebook.github.io/react/docs/react-component.html#componentdidupdate)

componentWillMount is used so that the initial state and props of RoomStatusBar can also trigger props.isVisible.

This fixes https://github.com/vector-im/riot-web/issues/3181
---
 src/components/structures/RoomStatusBar.js | 54 ++++++++--------------
 1 file changed, 20 insertions(+), 34 deletions(-)

diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js
index 626c376d9fb..0389b606aa1 100644
--- a/src/components/structures/RoomStatusBar.js
+++ b/src/components/structures/RoomStatusBar.js
@@ -96,26 +96,12 @@ module.exports = React.createClass({
     componentWillMount: function() {
         MatrixClientPeg.get().on("sync", this.onSyncStateChange);
         MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
-    },
 
-    componentDidUpdate: function(prevProps, prevState) {
-        if(this.props.onResize && this._checkForResize(prevProps, prevState)) {
-            this.props.onResize();
-        }
+        this._checkSize();
+    },
 
-        const size = this._getSize(this.props, this.state);
-        if (size > 0) {
-            this.props.onVisible();
-        } else {
-            if (this.hideDebouncer) {
-                clearTimeout(this.hideDebouncer);
-            }
-            this.hideDebouncer = setTimeout(() => {
-                // temporarily stop hiding the statusbar as per
-                // https://github.com/vector-im/riot-web/issues/1991#issuecomment-276953915
-                // this.props.onHidden();
-            }, HIDE_DEBOUNCE_MS);
-        }
+    componentDidUpdate: function() {
+        this._checkSize();
     },
 
     componentWillUnmount: function() {
@@ -142,33 +128,33 @@ module.exports = React.createClass({
         });
     },
 
+    // Check whether current size is greater than 0, if yes call props.onVisible
+    _checkSize: function () {
+        if (this.props.onVisible && this._getSize()) {
+            this.props.onVisible();
+        }
+    },
+
     // We don't need the actual height - just whether it is likely to have
     // changed - so we use '0' to indicate normal size, and other values to
     // indicate other sizes.
-    _getSize: function(props, state) {
-        if (state.syncState === "ERROR" ||
-            (state.usersTyping.length > 0) ||
-            props.numUnreadMessages ||
-            !props.atEndOfLiveTimeline ||
-            props.hasActiveCall ||
-            props.tabComplete.isTabCompleting()
+    _getSize: function() {
+        if (this.state.syncState === "ERROR" ||
+            (this.state.usersTyping.length > 0) ||
+            this.props.numUnreadMessages ||
+            !this.props.atEndOfLiveTimeline ||
+            this.props.hasActiveCall ||
+            this.props.tabComplete.isTabCompleting()
         ) {
             return STATUS_BAR_EXPANDED;
-        } else if (props.tabCompleteEntries) {
+        } else if (this.props.tabCompleteEntries) {
             return STATUS_BAR_HIDDEN;
-        } else if (props.unsentMessageError) {
+        } else if (this.props.unsentMessageError) {
             return STATUS_BAR_EXPANDED_LARGE;
         }
         return STATUS_BAR_HIDDEN;
     },
 
-    // determine if we need to call onResize
-    _checkForResize: function(prevProps, prevState) {
-        // figure out the old height and the new height of the status bar.
-        return this._getSize(prevProps, prevState)
-            !== this._getSize(this.props, this.state);
-    },
-
     // return suitable content for the image on the left of the status bar.
     //
     // if wantPlaceholder is true, we include a "..." placeholder if