Implement click to save for document list

js/views/conversation_view.js

@@ -588,29 +588,44 @@
         WhisperMessageCollection,
       });
 
-      const loadMessages = Signal.Components.PropTypes.Message
+      const loadMessages = Signal.Components.Types.Message
         .loadWithObjectURL(Signal.Migrations.loadMessage);
       const media = await loadMessages(rawMedia);
 
-      const mediaGalleryProps = {
-        media,
-        documents,
-        onItemClick: ({ message }) => {
-          const lightboxProps = {
-            imageURL: message.objectURL,
-          };
-          this.lightboxView = new Whisper.ReactWrapperView({
-            Component: Signal.Components.Lightbox,
-            props: lightboxProps,
-            onClose: () => Signal.Backbone.Views.Lightbox.hide(),
-          });
-          Signal.Backbone.Views.Lightbox.show(this.lightboxView.el);
-        },
+      const onItemClick = async ({ message, type }) => {
+        switch (type) {
+          case 'documents': {
+            const loadedMessage = await Signal.Migrations.loadMessage(message);
+            const attachment = loadedMessage.attachments[0];
+            const timestamp = loadedMessage.received_at;
+            Signal.Types.AttachmentTS.save({ attachment, timestamp });
+            break;
+          }
+
+          case 'media': {
+            this.lightboxView = new Whisper.ReactWrapperView({
+              Component: Signal.Components.Lightbox,
+              props: {
+                imageURL: message.objectURL,
+              },
+              onClose: () => Signal.Backbone.Views.Lightbox.hide(),
+            });
+            Signal.Backbone.Views.Lightbox.show(this.lightboxView.el);
+            break;
+          }
+
+          default:
+            throw new TypeError(`Unknown attachment type: '${type}'`);
+        }
       };
 
       const view = new Whisper.ReactWrapperView({
         Component: Signal.Components.MediaGallery,
-        props: mediaGalleryProps,
+        props: {
+          documents,
+          media,
+          onItemClick,
+        },
         onClose: () => this.resetPanel(),
       });
 

preload.js

@@ -169,14 +169,14 @@ const { MediaGallery } =
   require('./ts/components/conversation/media-gallery/MediaGallery');
 const { Quote } = require('./ts/components/conversation/Quote');
 
-const PropTypesMessage =
-  require('./ts/components/conversation/media-gallery/propTypes/Message');
+const MediaGalleryMessage =
+  require('./ts/components/conversation/media-gallery/types/Message');
 
 window.Signal.Components = {
   Lightbox,
   MediaGallery,
-  PropTypes: {
-    Message: PropTypesMessage,
+  Types: {
+    Message: MediaGalleryMessage,
   },
   Quote,
 };

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

@@ -3,10 +3,11 @@
  */
 import React from 'react';
 
+import { AttachmentType } from './types/AttachmentType';
 import { DocumentListItem } from './DocumentListItem';
-import { ItemClickEvent } from './events/ItemClickEvent';
+import { ItemClickEvent } from './types/ItemClickEvent';
 import { MediaGridItem } from './MediaGridItem';
-import { Message } from './propTypes/Message';
+import { Message } from './types/Message';
 import { missingCaseError } from '../../../util/missingCaseError';
 
 const styles = {
@@ -30,7 +31,7 @@ const styles = {
 interface Props {
   i18n: (value: string) => string;
   header?: string;
-  type: 'media' | 'documents';
+  type: AttachmentType;
   messages: Array<Message>;
   onItemClick?: (event: ItemClickEvent) => void;
 }
@@ -82,11 +83,11 @@ export class AttachmentSection extends React.Component<Props, {}> {
   }
 
   private createClickHandler = (message: Message) => () => {
-    const { onItemClick } = this.props;
+    const { onItemClick, type } = this.props;
     if (!onItemClick) {
       return;
     }
 
-    onItemClick({ message });
+    onItemClick({ type, message });
   };
 }

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

@@ -6,11 +6,10 @@ import React from 'react';
 import moment from 'moment';
 
 import { AttachmentSection } from './AttachmentSection';
+import { AttachmentType } from './types/AttachmentType';
 import { groupMessagesByDate } from './groupMessagesByDate';
-import { ItemClickEvent } from './events/ItemClickEvent';
-import { Message } from './propTypes/Message';
-
-type AttachmentType = 'media' | 'documents';
+import { ItemClickEvent } from './types/ItemClickEvent';
+import { Message } from './types/Message';
 
 interface Props {
   documents: Array<Message>;

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

@@ -3,7 +3,7 @@
  */
 import React from 'react';
 
-import { Message } from './propTypes/Message';
+import { Message } from './types/Message';
 
 interface Props {
   message: Message;

ts/components/conversation/media-gallery/events/ItemClickEvent.tsx

@@ -1,8 +0,0 @@
-/**
- * @prettier
- */
-import { Message } from '../propTypes/Message';
-
-export interface ItemClickEvent {
-  message: Message;
-}

ts/components/conversation/media-gallery/groupMessagesByDate.ts

@@ -4,7 +4,7 @@
 import moment from 'moment';
 import { compact, groupBy, sortBy } from 'lodash';
 
-import { Message } from './propTypes/Message';
+import { Message } from './types/Message';
 // import { missingCaseError } from '../../../util/missingCaseError';
 
 type StaticSectionType = 'today' | 'yesterday' | 'thisWeek' | 'thisMonth';

ts/components/conversation/media-gallery/types/AttachmentType.ts

@@ -0,0 +1,4 @@
+/**
+ * @prettier
+ */
+export type AttachmentType = 'media' | 'documents';

ts/components/conversation/media-gallery/types/ItemClickEvent.tsx

@@ -0,0 +1,10 @@
+/**
+ * @prettier
+ */
+import { AttachmentType } from './AttachmentType';
+import { Message } from './Message';
+
+export interface ItemClickEvent {
+  message: Message;
+  type: AttachmentType;
+}

ts/test/components/media-gallery/groupMessagesByDate.ts

@@ -10,7 +10,7 @@ import {
   groupMessagesByDate,
   Section,
 } from '../../../components/conversation/media-gallery/groupMessagesByDate';
-import { Message } from '../../../components/conversation/media-gallery/propTypes/Message';
+import { Message } from '../../../components/conversation/media-gallery/types/Message';
 
 const toMessage = (date: Date): Message => ({
   id: date.toUTCString(),