From 32a3ef518b3164b7a2e5e6073d1beb6e531a77a1 Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Wed, 11 Apr 2018 11:57:31 -0400
Subject: [PATCH] Render media gallery placeholder panel

---
 js/views/conversation_view.js                 | 55 +++++++++++++++++++
 preload.js                                    |  3 +
 .../media-gallery/MediaGallery.tsx            | 13 +++++
 3 files changed, 71 insertions(+)
 create mode 100644 ts/components/conversation/media-gallery/MediaGallery.tsx

diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js
index 91b09bfb8..62d4c950e 100644
--- a/js/views/conversation_view.js
+++ b/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();
     },
diff --git a/preload.js b/preload.js
index d35da5a88..0bf24c705 100644
--- a/preload.js
+++ b/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,
 };
 
diff --git a/ts/components/conversation/media-gallery/MediaGallery.tsx b/ts/components/conversation/media-gallery/MediaGallery.tsx
new file mode 100644
index 000000000..6134835e4
--- /dev/null
+++ b/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>
+    );
+  }
+}