diff --git a/app/soapbox/components/attachment_list.js b/app/soapbox/components/attachment_list.js
deleted file mode 100644
index 52d4e6d77..000000000
--- a/app/soapbox/components/attachment_list.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-
-import Icon from 'soapbox/components/icon';
-
-const filename = url => url.split('/').pop().split('#')[0].split('?')[0];
-
-export default class AttachmentList extends ImmutablePureComponent {
-
-  static propTypes = {
-    media: ImmutablePropTypes.list.isRequired,
-    compact: PropTypes.bool,
-  };
-
-  render() {
-    const { media, compact } = this.props;
-
-    if (compact) {
-      return (
-        <div className='attachment-list compact'>
-          <ul className='attachment-list__list'>
-            {media.map(attachment => {
-              const displayUrl = attachment.get('remote_url') || attachment.get('url');
-
-              return (
-                <li key={attachment.get('id')}>
-                  <a href={displayUrl} target='_blank' rel='noopener'><Icon id='link' /> {filename(displayUrl)}</a>
-                </li>
-              );
-            })}
-          </ul>
-        </div>
-      );
-    }
-
-    return (
-      <div className='attachment-list'>
-        <div className='attachment-list__icon'>
-          <Icon id='link' />
-        </div>
-
-        <ul className='attachment-list__list'>
-          {media.map(attachment => {
-            const displayUrl = attachment.get('remote_url') || attachment.get('url');
-
-            return (
-              <li key={attachment.get('id')}>
-                <a href={displayUrl} target='_blank' rel='noopener'>{filename(displayUrl)}</a>
-              </li>
-            );
-          })}
-        </ul>
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/components/attachment_list.tsx b/app/soapbox/components/attachment_list.tsx
new file mode 100644
index 000000000..94c496819
--- /dev/null
+++ b/app/soapbox/components/attachment_list.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+
+import Icon from 'soapbox/components/icon';
+
+import type { Attachment as AttachmentEntity } from 'soapbox/types/entities';
+
+const filename = (url: string) => url.split('/').pop()!.split('#')[0].split('?')[0];
+
+interface IAttachmentList {
+  media: AttachmentEntity[],
+  compact?: boolean,
+}
+
+const AttachmentList: React.FC<IAttachmentList> = ({ media, compact }) => {
+  if (compact) {
+    return (
+      <div className='attachment-list compact'>
+        <ul className='attachment-list__list'>
+          {media.map(attachment => {
+            const displayUrl = attachment.get('remote_url') || attachment.get('url');
+
+            return (
+              <li key={attachment.get('id')}>
+                <a href={displayUrl} target='_blank' rel='noopener'><Icon id='link' /> {filename(displayUrl)}</a>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    );
+  }
+
+  return (
+    <div className='attachment-list'>
+      <div className='attachment-list__icon'>
+        <Icon id='link' />
+      </div>
+
+      <ul className='attachment-list__list'>
+        {media.map(attachment => {
+          const displayUrl = attachment.get('remote_url') || attachment.get('url');
+
+          return (
+            <li key={attachment.get('id')}>
+              <a href={displayUrl} target='_blank' rel='noopener'>{filename(displayUrl)}</a>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
+export default AttachmentList;