Render media gallery placeholder panel

js/views/conversation_view.js

@@ -208,6 +208,7 @@
       'click .update-group': 'newGroupUpdate',
       'click .show-identity': 'showSafetyNumber',
       'click .show-members': 'showMembers',
+      'click .view-all-media': 'viewAllMedia',
       'click .conversation-menu .hamburger': 'toggleMenu',
       click: 'onClick',
       'click .bottom-bar': 'focusMessageField',
@@ -630,6 +631,60 @@
       }
     },
 
+    viewAllMedia() {
+      // We have to do this manually, since our React component will not propagate click
+      //   events up to its parent elements in the DOM.
+      this.closeMenu();
+
+      const ReactWrapper = Backbone.View.extend({
+        initialize(options) {
+          const { Component, props, onClose } = options;
+          this.render();
+          this.onClose = onClose;
+
+          const updatedProps = Object.assign({}, props, {
+            close: () => {
+              if (onClose) {
+                onClose();
+                return;
+              }
+              this.remove();
+            },
+          });
+
+          const element = window.React.createElement(Component, updatedProps);
+          window.ReactDOM.render(element, this.el);
+        },
+        remove() {
+          window.ReactDOM.unmountComponentAtNode(this.el);
+          Backbone.View.prototype.remove.call(this);
+        },
+      });
+
+      // Next:
+      //   pull latest media
+      //   need a way for react component to request further data
+
+      //   needed components:
+      //     GalleryPanel
+      //     Section - header, list of thumbnails
+      //     Thumbnail
+      //     Lightbox - or do we use the lightbox already in the app?
+
+      const Component = window.Signal.Components.MediaGallery;
+      const props = {
+        number: 10,
+      };
+
+      const view = new ReactWrapper({
+        Component,
+        props,
+        onClose: this.resetPanel.bind(this),
+      });
+
+      this.listenBack(view);
+    },
+
     focusMessageField() {
       this.$messageField.focus();
     },

preload.js

@@ -161,9 +161,12 @@ window.Signal.Debug = require('./js/modules/debug');
 window.Signal.HTML = require('./ts/html');
 window.Signal.Logs = require('./js/modules/logs');
 
+const { MediaGallery } =
+  require('./ts/components/conversation/media-gallery/MediaGallery');
 const { Quote } = require('./ts/components/conversation/Quote');
 
 window.Signal.Components = {
+  MediaGallery,
   Quote,
 };
 

ts/components/conversation/media-gallery/MediaGallery.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+interface Props {
+  number: number;
+}
+
+export class MediaGallery extends React.Component<Props, {}> {
+  public render() {
+    return (
+      <div>Hello Media Gallery! Number: {this.props.number}</div>
+    );
+  }
+}