From 7e1de2ac350e7f2ea5eab9eb11e1f7caf2db63e2 Mon Sep 17 00:00:00 2001
From: Richard Lewis <rick@matrix.org>
Date: Wed, 17 May 2017 21:15:57 +0100
Subject: [PATCH] Show/hide apps panel and misc formatting and lint fixes

---
 src/components/structures/RoomView.js         | 25 ++++++++++----
 src/components/views/rooms/AuxPanel.js        | 34 +++++++++++--------
 src/components/views/rooms/MessageComposer.js | 14 ++++----
 3 files changed, 45 insertions(+), 28 deletions(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index b22d867acf..49aa3a0af5 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -43,7 +43,7 @@ import KeyCode from '../../KeyCode';
 
 import UserProvider from '../../autocomplete/UserProvider';
 
-var DEBUG = false;
+const DEBUG = false;
 
 if (DEBUG) {
     // using bind means that we get to keep useful line numbers in the console
@@ -133,6 +133,7 @@ module.exports = React.createClass({
             callState: null,
             guestsCanJoin: false,
             canPeek: false,
+            showApps: false,
 
             // error object, as from the matrix client/server API
             // If we failed to load information about the room,
@@ -168,7 +169,7 @@ module.exports = React.createClass({
             onClickCompletes: true,
             onStateChange: (isCompleting) => {
                 this.forceUpdate();
-            }
+            },
         });
 
         if (this.props.roomAddress[0] == '#') {
@@ -434,9 +435,14 @@ module.exports = React.createClass({
                 this._updateConfCallNotification();
 
                 this.setState({
-                    callState: callState
+                    callState: callState,
                 });
 
+                break;
+            case 'appsDrawer':
+                this.setState({
+                    showApps: payload.show ? true : false,
+                });
                 break;
         }
     },
@@ -1638,7 +1644,8 @@ module.exports = React.createClass({
               draggingFile={this.state.draggingFile}
               displayConfCallNotification={this.state.displayConfCallNotification}
               maxHeight={this.state.auxPanelMaxHeight}
-              onResize={this.onChildResize} >
+              onResize={this.onChildResize}
+              showApps={this.state.showApps} >
                 { aux }
             </AuxPanel>
         );
@@ -1651,8 +1658,14 @@ module.exports = React.createClass({
         if (canSpeak) {
             messageComposer =
                 <MessageComposer
-                    room={this.state.room} onResize={this.onChildResize} uploadFile={this.uploadFile}
-                    callState={this.state.callState} tabComplete={this.tabComplete} opacity={ this.props.opacity }/>;
+                    room={this.state.room}
+                    onResize={this.onChildResize}
+                    uploadFile={this.uploadFile}
+                    callState={this.state.callState}
+                    tabComplete={this.tabComplete}
+                    opacity={ this.props.opacity }
+                    showApps={ this.state.showApps }
+                />;
         }
 
         // TODO: Why aren't we storing the term/scope/count in this format
diff --git a/src/components/views/rooms/AuxPanel.js b/src/components/views/rooms/AuxPanel.js
index 365cc18f99..31739a890f 100644
--- a/src/components/views/rooms/AuxPanel.js
+++ b/src/components/views/rooms/AuxPanel.js
@@ -14,11 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-var React = require('react');
-var MatrixClientPeg = require("../../../MatrixClientPeg");
-var sdk = require('../../../index');
-var dis = require("../../../dispatcher");
-var ObjectUtils = require('../../../ObjectUtils');
+const React = require('react');
+const MatrixClientPeg = require("../../../MatrixClientPeg");
+const sdk = require('../../../index');
+const dis = require("../../../dispatcher");
+const ObjectUtils = require('../../../ObjectUtils');
+const AppsDrawer = require('./AppsDrawer');
 
 module.exports = React.createClass({
     displayName: 'AuxPanel',
@@ -68,10 +69,10 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        var CallView = sdk.getComponent("voip.CallView");
-        var TintableSvg = sdk.getComponent("elements.TintableSvg");
+        const CallView = sdk.getComponent("voip.CallView");
+        const TintableSvg = sdk.getComponent("elements.TintableSvg");
 
-        var fileDropTarget = null;
+        let fileDropTarget = null;
         if (this.props.draggingFile) {
             fileDropTarget = (
                 <div className="mx_RoomView_fileDropTarget">
@@ -85,19 +86,18 @@ module.exports = React.createClass({
             );
         }
 
-        var conferenceCallNotification = null;
+        let conferenceCallNotification = null;
         if (this.props.displayConfCallNotification) {
-            var supportedText, joinText;
+            let supportedText;
+            let joinText;
             if (!MatrixClientPeg.get().supportsVoip()) {
                 supportedText = " (unsupported)";
-            }
-            else {
+            } else {
                 joinText = (<span>
                     Join as <a onClick={(event)=>{ this.onConferenceNotificationClick(event, 'voice');}}
                                href="#">voice</a> or <a onClick={(event)=>{ this.onConferenceNotificationClick(event, 'video'); }}
                                href="#">video</a>.
                 </span>);
-
             }
             conferenceCallNotification = (
                 <div className="mx_RoomView_ongoingConfCallNotification">
@@ -106,7 +106,7 @@ module.exports = React.createClass({
             );
         }
 
-        var callView = (
+        const callView = (
             <CallView ref="callView" room={this.props.room}
                 ConferenceHandler={this.props.conferenceHandler}
                 onResize={this.props.onResize}
@@ -114,8 +114,14 @@ module.exports = React.createClass({
             />
         );
 
+        let appsDrawer = null;
+        if(this.props.showApps) {
+            appsDrawer = <AppsDrawer ref="appsDrawer" room={this.props.room} />;
+        }
+
         return (
             <div className="mx_RoomView_auxPanel" style={{maxHeight: this.props.maxHeight}} >
+                { appsDrawer }
                 { fileDropTarget }
                 { callView }
                 { conferenceCallNotification }
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 22b84b73cb..a90de8cb5c 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -164,18 +164,16 @@ export default class MessageComposer extends React.Component {
     }
 
     onShowAppsClick(ev) {
-        console.warn("Showing apps");
         dis.dispatch({
-            action: 'showApps',
-            room_id: this.props.room.roomId,
+            action: 'appsDrawer',
+            show: true,
         });
     }
 
     onHideAppsClick(ev) {
-        console.warn("Hiding apps");
         dis.dispatch({
-            action: 'hideApps',
-            room_id: this.props.room.roomId,
+            action: 'appsDrawer',
+            show: false,
         });
     }
 
@@ -278,7 +276,7 @@ export default class MessageComposer extends React.Component {
         }
 
         // Apps
-        if (this.props.showAppsState && this.props.showAppsState == 'visible') {
+        if (this.props.showApps) {
             hideAppsButton =
                 <div key="controls_hide_apps" className="mx_MessageComposer_apps" onClick={this.onHideAppsClick} title="Hide Apps">
                     <TintableSvg src="img/icons-apps-active.svg" width="35" height="35"/>
@@ -431,5 +429,5 @@ MessageComposer.propTypes = {
     opacity: React.PropTypes.number,
 
     // string representing the current room app drawer state
-    showAppsState: React.PropTypes.string,
+    showApps: React.PropTypes.bool,
 };