Make query parameters generic.

src/components/views/rooms/AppsDrawer.js

@@ -63,33 +63,65 @@ module.exports = React.createClass({
         }
     },
 
+    /**
+     * Encodes a URI according to a set of template variables. Variables will be
+     * passed through encodeURIComponent.
+     * @param {string} pathTemplate The path with template variables e.g. '/foo/$bar'.
+     * @param {Object} variables The key/value pairs to replace the template
+     * variables with. E.g. { "$bar": "baz" }.
+     * @return {string} The result of replacing all template variables e.g. '/foo/baz'.
+     */
+    encodeUri: function(pathTemplate, variables) {
+        for (const key in variables) {
+            if (!variables.hasOwnProperty(key)) {
+                continue;
+            }
+            pathTemplate = pathTemplate.replace(
+                key, encodeURIComponent(variables[key]),
+            );
+        }
+        return pathTemplate;
+    },
+
     _initAppConfig: function(appId, app) {
-        console.log("App props: ", this.props);
-        app.id = appId;
-        app.name = app.type;
-
-        switch(app.type) {
-            case 'etherpad':
-                app.queryParams = '?userName=' + this.props.userId +
-                    '&padId=' + this.props.room.roomId;
-                break;
-            case 'jitsi': {
         const user = MatrixClientPeg.get().getUser(this.props.userId);
-                app.queryParams = '?confId=' + app.data.confId +
+        const params = {
-                    '&displayName=' + encodeURIComponent(user.displayName) +
+            '$matrix_user_id': this.props.userId,
-                    '&avatarUrl=' + encodeURIComponent(MatrixClientPeg.get().mxcUrlToHttp(user.avatarUrl)) +
+            '$matrix_room_id': this.props.room.roomId,
-                    '&email=' + encodeURIComponent(this.props.userId) +
+            '$matrix_display_name': user ? user.displayName : this.props.userId,
-                    '&isAudioConf=' + app.data.isAudioConf;
+            '$matrix_avatar_url': user ? MatrixClientPeg.get().mxcUrlToHttp(user.avatarUrl) : '',
+        };
 
-                app.name += ' - ' + app.data.confId;
+        if(app.data) {
-                break;
+            Object.keys(app.data).forEach((key) => {
-            }
+                params['$' + key] = app.data[key];
-            case 'vrdemo':
+            });
-                app.name = 'Matrix VR Demo - ' + app.data.roomAlias;
-                app.queryParams = '?roomAlias=' + encodeURIComponent(app.data.roomAlias);
-                break;
         }
 
+        app.id = appId;
+        app.name = app.name || app.type;
+        app.url = this.encodeUri(app.url, params);
+
+        // switch(app.type) {
+        //     case 'etherpad':
+        //         app.queryParams = '?userName=' + this.props.userId +
+        //             '&padId=' + this.props.room.roomId;
+        //         break;
+        //     case 'jitsi': {
+        //
+        //         app.queryParams = '?confId=' + app.data.confId +
+        //             '&displayName=' + encodeURIComponent(user.displayName) +
+        //             '&avatarUrl=' + encodeURIComponent(MatrixClientPeg.get().mxcUrlToHttp(user.avatarUrl)) +
+        //             '&email=' + encodeURIComponent(this.props.userId) +
+        //             '&isAudioConf=' + app.data.isAudioConf;
+        //
+        //         break;
+        //     }
+        //     case 'vrdemo':
+        //         app.queryParams = '?roomAlias=' + encodeURIComponent(app.data.roomAlias);
+        //         break;
+        // }
+
         return app;
     },
 
@@ -156,14 +188,10 @@ module.exports = React.createClass({
     render: function() {
         const apps = this.state.apps.map(
             (app, index, arr) => {
-                let appUrl = app.url;
-                if (app.queryParams) {
-                    appUrl += app.queryParams;
-                }
                 return <AppTile
                     key={app.name}
                     id={app.id}
-                    url={appUrl}
+                    url={app.url}
                     name={app.name}
                     fullWidth={arr.length<2 ? true : false}
                     room={this.props.room}