Move left pane entirely to React

ts/components/LightboxGallery.tsx

@@ -6,9 +6,9 @@ import React from 'react';
 import * as MIME from '../types/MIME';
 import { Lightbox } from './Lightbox';
 import { Message } from './conversation/media-gallery/types/Message';
-import { AttachmentType } from './conversation/types';
 
-import { Localizer } from '../types/Util';
+import { AttachmentType } from '../types/Attachment';
+import { LocalizerType } from '../types/Util';
 
 export interface MediaItemType {
   objectURL?: string;
@@ -21,7 +21,7 @@ export interface MediaItemType {
 
 interface Props {
   close: () => void;
-  i18n: Localizer;
+  i18n: LocalizerType;
   media: Array<MediaItemType>;
   onSave?: (
     options: { attachment: AttachmentType; message: Message; index: number }
@@ -61,27 +61,30 @@ export class LightboxGallery extends React.Component<Props, State> {
     const objectURL = selectedMedia.objectURL || 'images/alert-outline.svg';
     const { attachment } = selectedMedia;
 
+    const saveCallback = onSave ? this.handleSave : undefined;
+    const captionCallback = attachment ? attachment.caption : undefined;
+
     return (
       <Lightbox
         close={close}
         onPrevious={onPrevious}
         onNext={onNext}
-        onSave={onSave ? this.handleSave : undefined}
+        onSave={saveCallback}
         objectURL={objectURL}
-        caption={attachment ? attachment.caption : undefined}
+        caption={captionCallback}
         contentType={selectedMedia.contentType}
         i18n={i18n}
       />
     );
   }
 
-  private handlePrevious = () => {
+  private readonly handlePrevious = () => {
     this.setState(prevState => ({
       selectedIndex: Math.max(prevState.selectedIndex - 1, 0),
     }));
   };
 
-  private handleNext = () => {
+  private readonly handleNext = () => {
     this.setState((prevState, props) => ({
       selectedIndex: Math.min(
         prevState.selectedIndex + 1,
@@ -90,7 +93,7 @@ export class LightboxGallery extends React.Component<Props, State> {
     }));
   };
 
-  private handleSave = () => {
+  private readonly handleSave = () => {
     const { media, onSave } = this.props;
     if (!onSave) {
       return;