🎨 Autoformat code

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

@@ -1,3 +1,6 @@
+/**
+ * @prettier
+ */
 import React from 'react';
 
 import { DocumentListEntry } from './DocumentListEntry';
@@ -5,13 +8,11 @@ import { ImageThumbnail } from './ImageThumbnail';
 import { Message } from './propTypes/Message';
 import { missingCaseError } from '../../../missingCaseError';
 
-
 const styles = {
   container: {
     width: '100%',
   },
-  header: {
-  },
+  header: {},
   itemContainer: {
     display: 'flex',
     flexDirection: 'row',
@@ -32,18 +33,14 @@ export class AttachmentListSection extends React.Component<Props, {}> {
   public renderItems() {
     const { i18n, messages, type } = this.props;
 
-    return messages.map((message) => {
+    return messages.map(message => {
       const { attachments } = message;
       const firstAttachment = attachments[0];
 
       switch (type) {
         case 'media':
           return (
-            <ImageThumbnail
-              key={message.id}
-              i18n={i18n}
-              message={message}
-            />
+            <ImageThumbnail key={message.id} i18n={i18n} message={message} />
           );
         case 'documents':
           return (
@@ -67,9 +64,7 @@ export class AttachmentListSection extends React.Component<Props, {}> {
     return (
       <div style={styles.container}>
         <div style={styles.header}>{header}</div>
-        <div style={styles.itemContainer}>
-          {this.renderItems()}
-        </div>
+        <div style={styles.itemContainer}>{this.renderItems()}</div>
       </div>
     );
   }

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

@@ -1,3 +1,6 @@
+/**
+ * @prettier
+ */
 import React from 'react';
 
 import moment from 'moment';
@@ -5,7 +8,6 @@ import formatFileSize from 'filesize';
 
 // import { LoadingIndicator } from './LoadingIndicator';
 
-
 interface Props {
   fileName?: string;
   fileSize?: number;
@@ -59,28 +61,20 @@ export class DocumentListEntry extends React.Component<Props, {}> {
     // }
 
     return (
-      <div
-        style={styles.itemContainer}
-      >
+      <div style={styles.itemContainer}>
         <img
           src="images/file.svg"
           width="48"
           height="48"
           style={styles.itemIcon}
         />
-        <div
-          style={styles.itemMetadata}
-        >
+        <div style={styles.itemMetadata}>
           <strong>{fileName}</strong>
-          <span
-            style={styles.itemFileSize}
-          >
+          <span style={styles.itemFileSize}>
             {typeof fileSize === 'number' ? formatFileSize(fileSize) : ''}
           </span>
         </div>
-        <div
-          style={styles.itemDate}
-        >
+        <div style={styles.itemDate}>
           {moment(timestamp).format('ddd, MMM D, Y')}
         </div>
       </div>
@@ -88,10 +82,6 @@ export class DocumentListEntry extends React.Component<Props, {}> {
   }
 
   public render() {
-    return (
-      <div style={styles.container}>
-        {this.renderContent()}
-      </div>
-    );
+    return <div style={styles.container}>{this.renderContent()}</div>;
   }
 }

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

@@ -1,3 +1,6 @@
+/**
+ * @prettier
+ */
 import React from 'react';
 
 import { LoadingIndicator } from './LoadingIndicator';
@@ -27,7 +30,7 @@ const styles = {
 
 export class ImageThumbnail extends React.Component<Props, {}> {
   public renderContent() {
-    const {/* i18n, */message } = this.props;
+    const { /* i18n, */ message } = this.props;
 
     if (!message.objectURL) {
       return <LoadingIndicator />;
@@ -45,10 +48,6 @@ export class ImageThumbnail extends React.Component<Props, {}> {
   }
 
   public render() {
-    return (
-      <div style={styles.container}>
-        {this.renderContent()}
-      </div>
-    );
+    return <div style={styles.container}>{this.renderContent()}</div>;
   }
 }

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

@@ -1,3 +1,6 @@
+/**
+ * @prettier
+ */
 import React from 'react';
 
 export const LoadingIndicator = () => {

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

@@ -1,3 +1,6 @@
+/**
+ * @prettier
+ */
 import React from 'react';
 
 import moment from 'moment';
@@ -7,7 +10,6 @@ import { AttachmentListSection } from './AttachmentListSection';
 import { groupMessagesByDate } from './groupMessagesByDate';
 import { Message } from './propTypes/Message';
 
-
 type AttachmentType = 'media' | 'documents';
 
 interface Props {
@@ -58,13 +60,12 @@ const Tab = ({
   onSelect,
   type,
 }: {
-  isSelected: boolean,
-  label: string,
-  onSelect?: (event: TabSelectEvent) => void,
-  type: AttachmentType,
+  isSelected: boolean;
+  label: string;
+  onSelect?: (event: TabSelectEvent) => void;
+  type: AttachmentType;
 }) => {
-  const handleClick = onSelect ?
-    () => onSelect({ type }) : undefined;
+  const handleClick = onSelect ? () => onSelect({ type }) : undefined;
 
   return (
     <div
@@ -76,7 +77,6 @@ const Tab = ({
   );
 };
 
-
 export class MediaGallery extends React.Component<Props, State> {
   public state: State = {
     selectedTab: 'media',
@@ -101,16 +101,14 @@ export class MediaGallery extends React.Component<Props, State> {
             onSelect={this.handleTabSelect}
           />
         </div>
-        <div style={styles.attachmentsContainer}>
-          {this.renderSections()}
-        </div>
+        <div style={styles.attachmentsContainer}>{this.renderSections()}</div>
       </div>
     );
   }
 
   private handleTabSelect = (event: TabSelectEvent): void => {
-    this.setState({selectedTab: event.type});
-  }
+    this.setState({ selectedTab: event.type });
+  };
 
   private renderSections() {
     const { i18n, media, documents } = this.props;

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

@@ -1,18 +1,25 @@
+/**
+ * @prettier
+ */
 import moment from 'moment';
-import { groupBy, sortBy } from 'lodash';
+import { compact, groupBy, sortBy } from 'lodash';
 
 import { Message } from './propTypes/Message';
 
-
-export const groupMessagesByDate = (timestamp: number, messages: Array<Message>): any => {
+export const groupMessagesByDate = (
+  timestamp: number,
+  messages: Array<Message>
+): any => {
   const referenceDateTime = moment.utc(timestamp);
   const today = moment(referenceDateTime).startOf('day');
-  const yesterday = moment(referenceDateTime).subtract(1, 'day').startOf('day');
+  const yesterday = moment(referenceDateTime)
+    .subtract(1, 'day')
+    .startOf('day');
   const thisWeek = moment(referenceDateTime).startOf('isoWeek');
   const thisMonth = moment(referenceDateTime).startOf('month');
 
-  const sorted = sortBy(messages, (message) => -message.received_at);
-  const annotations = sorted.map((message) => {
+  const sorted = sortBy(messages, message => -message.received_at);
+  const annotations = sorted.map(message => {
     const date = moment.utc(message.received_at);
 
     if (date.isAfter(today)) {
@@ -42,7 +49,7 @@ export const groupMessagesByDate = (timestamp: number, messages: Array<Message>)
     }
 
     return {
-      order: (date.year() * 100) + date.month(),
+      order: date.year() * 100 + date.month(),
       label: 'yearMonth',
       message,
     };

ts/components/conversation/media-gallery/propTypes/Message.tsx

@@ -1,3 +1,6 @@
+/**
+ * @prettier
+ */
 export interface Message {
   id: string;
   body?: string;