From a5fdfb31fdc556b6c163749216e070fdb5abf3b0 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 30 May 2022 13:11:44 -0500
Subject: [PATCH 01/12] Warning: convert to TSX

---
 .../features/compose/components/warning.js    | 27 -------------------
 .../features/compose/components/warning.tsx   | 21 +++++++++++++++
 2 files changed, 21 insertions(+), 27 deletions(-)
 delete mode 100644 app/soapbox/features/compose/components/warning.js
 create mode 100644 app/soapbox/features/compose/components/warning.tsx

diff --git a/app/soapbox/features/compose/components/warning.js b/app/soapbox/features/compose/components/warning.js
deleted file mode 100644
index a819b33ec..000000000
--- a/app/soapbox/features/compose/components/warning.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import spring from 'react-motion/lib/spring';
-
-import Motion from '../../ui/util/optional_motion';
-
-export default class Warning extends React.PureComponent {
-
-  static propTypes = {
-    message: PropTypes.node.isRequired,
-  };
-
-  render() {
-    const { message } = this.props;
-
-    return (
-      <Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
-        {({ opacity, scaleX, scaleY }) => (
-          <div className='compose-form__warning' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}>
-            {message}
-          </div>
-        )}
-      </Motion>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/compose/components/warning.tsx b/app/soapbox/features/compose/components/warning.tsx
new file mode 100644
index 000000000..b8ec90e09
--- /dev/null
+++ b/app/soapbox/features/compose/components/warning.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { spring } from 'react-motion';
+
+import Motion from '../../ui/util/optional_motion';
+
+interface IWarning {
+  message: React.ReactNode,
+}
+
+/** Warning message displayed in ComposeForm. */
+const Warning: React.FC<IWarning> = ({ message }) => (
+  <Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
+    {({ opacity, scaleX, scaleY }) => (
+      <div className='compose-form__warning' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}>
+        {message}
+      </div>
+    )}
+  </Motion>
+);
+
+export default Warning;

From 1beaccd3acdb4a7a26a67504e7c67a50a6f86700 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 30 May 2022 13:15:35 -0500
Subject: [PATCH 02/12] TextIconButton: convert to TSX

---
 .../compose/components/text_icon_button.js    | 34 ------------------
 .../compose/components/text_icon_button.tsx   | 36 +++++++++++++++++++
 2 files changed, 36 insertions(+), 34 deletions(-)
 delete mode 100644 app/soapbox/features/compose/components/text_icon_button.js
 create mode 100644 app/soapbox/features/compose/components/text_icon_button.tsx

diff --git a/app/soapbox/features/compose/components/text_icon_button.js b/app/soapbox/features/compose/components/text_icon_button.js
deleted file mode 100644
index 1ca71fe6f..000000000
--- a/app/soapbox/features/compose/components/text_icon_button.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-export default class TextIconButton extends React.PureComponent {
-
-  static propTypes = {
-    label: PropTypes.string.isRequired,
-    title: PropTypes.string,
-    active: PropTypes.bool,
-    onClick: PropTypes.func.isRequired,
-    ariaControls: PropTypes.string,
-    unavailable: PropTypes.bool,
-  };
-
-  handleClick = (e) => {
-    e.preventDefault();
-    this.props.onClick();
-  }
-
-  render() {
-    const { label, title, active, ariaControls, unavailable } = this.props;
-
-    if (unavailable) {
-      return null;
-    }
-
-    return (
-      <button title={title} aria-label={title} className={`text-icon-button ${active ? 'active' : ''}`} aria-expanded={active} onClick={this.handleClick} aria-controls={ariaControls}>
-        {label}
-      </button>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/compose/components/text_icon_button.tsx b/app/soapbox/features/compose/components/text_icon_button.tsx
new file mode 100644
index 000000000..fd49d4ed0
--- /dev/null
+++ b/app/soapbox/features/compose/components/text_icon_button.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+
+interface ITextIconButton {
+  label: string,
+  title: string,
+  active: boolean,
+  onClick: () => void,
+  ariaControls: string,
+  unavailable: boolean,
+}
+
+const TextIconButton: React.FC<ITextIconButton> = ({
+  label,
+  title,
+  active,
+  ariaControls,
+  unavailable,
+  onClick,
+}) => {
+  const handleClick: React.MouseEventHandler = (e) => {
+    e.preventDefault();
+    onClick();
+  };
+
+  if (unavailable) {
+    return null;
+  }
+
+  return (
+    <button title={title} aria-label={title} className={`text-icon-button ${active ? 'active' : ''}`} aria-expanded={active} onClick={handleClick} aria-controls={ariaControls}>
+      {label}
+    </button>
+  );
+};
+
+export default TextIconButton;

From 4821703edb59cd1a81e84f4e907540e1bf455374 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 30 May 2022 13:26:24 -0500
Subject: [PATCH 03/12] UploadButton: convert to TSX

---
 .../compose/components/upload_button.js       | 92 -------------------
 .../compose/components/upload_button.tsx      | 81 ++++++++++++++++
 2 files changed, 81 insertions(+), 92 deletions(-)
 delete mode 100644 app/soapbox/features/compose/components/upload_button.js
 create mode 100644 app/soapbox/features/compose/components/upload_button.tsx

diff --git a/app/soapbox/features/compose/components/upload_button.js b/app/soapbox/features/compose/components/upload_button.js
deleted file mode 100644
index a42e3be1f..000000000
--- a/app/soapbox/features/compose/components/upload_button.js
+++ /dev/null
@@ -1,92 +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 { defineMessages, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-
-import { IconButton } from '../../../components/ui';
-
-const messages = defineMessages({
-  upload: { id: 'upload_button.label', defaultMessage: 'Add media attachment' },
-});
-
-const onlyImages = types => {
-  return Boolean(types && types.every(type => type.startsWith('image/')));
-};
-
-const makeMapStateToProps = () => {
-  const mapStateToProps = state => ({
-    attachmentTypes: state.getIn(['instance', 'configuration', 'media_attachments', 'supported_mime_types']),
-  });
-
-  return mapStateToProps;
-};
-
-export default @connect(makeMapStateToProps)
-@injectIntl
-class UploadButton extends ImmutablePureComponent {
-
-  static propTypes = {
-    disabled: PropTypes.bool,
-    unavailable: PropTypes.bool,
-    onSelectFile: PropTypes.func.isRequired,
-    style: PropTypes.object,
-    resetFileKey: PropTypes.number,
-    attachmentTypes: ImmutablePropTypes.listOf(PropTypes.string),
-    intl: PropTypes.object.isRequired,
-  };
-
-  handleChange = (e) => {
-    if (e.target.files.length > 0) {
-      this.props.onSelectFile(e.target.files);
-    }
-  }
-
-  handleClick = () => {
-    this.fileElement.click();
-  }
-
-  setRef = (c) => {
-    this.fileElement = c;
-  }
-
-  render() {
-    const { intl, resetFileKey, attachmentTypes, unavailable, disabled } = this.props;
-
-    if (unavailable) {
-      return null;
-    }
-
-    const src = onlyImages(attachmentTypes)
-      ? require('@tabler/icons/icons/photo.svg')
-      : require('@tabler/icons/icons/paperclip.svg');
-
-    return (
-      <div>
-        <IconButton
-          src={src}
-          className='text-gray-400 hover:text-gray-600'
-          title={intl.formatMessage(messages.upload)}
-          disabled={disabled}
-          onClick={this.handleClick}
-        />
-
-        <label>
-          <span className='sr-only'>{intl.formatMessage(messages.upload)}</span>
-          <input
-            key={resetFileKey}
-            ref={this.setRef}
-            type='file'
-            multiple
-            accept={attachmentTypes && attachmentTypes.toArray().join(',')}
-            onChange={this.handleChange}
-            disabled={disabled}
-            className='hidden'
-          />
-        </label>
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/compose/components/upload_button.tsx b/app/soapbox/features/compose/components/upload_button.tsx
new file mode 100644
index 000000000..a34e2b4ad
--- /dev/null
+++ b/app/soapbox/features/compose/components/upload_button.tsx
@@ -0,0 +1,81 @@
+import React, { useRef } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { IconButton } from 'soapbox/components/ui';
+import { useAppSelector } from 'soapbox/hooks';
+
+import type { List as ImmutableList } from 'immutable';
+
+const messages = defineMessages({
+  upload: { id: 'upload_button.label', defaultMessage: 'Add media attachment' },
+});
+
+const onlyImages = (types: ImmutableList<string>) => {
+  return Boolean(types && types.every(type => type.startsWith('image/')));
+};
+
+interface IUploadButton {
+  disabled: boolean,
+  unavailable: boolean,
+  onSelectFile: (files: FileList) => void,
+  style: React.CSSProperties,
+  resetFileKey: number,
+}
+
+const UploadButton: React.FC<IUploadButton> = ({
+  disabled,
+  unavailable,
+  onSelectFile,
+  resetFileKey,
+}) => {
+  const intl = useIntl();
+
+  const fileElement = useRef<HTMLInputElement>(null);
+  const attachmentTypes = useAppSelector(state => state.instance.configuration.getIn(['media_attachments', 'supported_mime_types']) as ImmutableList<string>);
+
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    if (e.target.files?.length) {
+      onSelectFile(e.target.files);
+    }
+  };
+
+  const handleClick = () => {
+    fileElement.current?.click();
+  };
+
+  if (unavailable) {
+    return null;
+  }
+
+  const src = onlyImages(attachmentTypes)
+    ? require('@tabler/icons/icons/photo.svg')
+    : require('@tabler/icons/icons/paperclip.svg');
+
+  return (
+    <div>
+      <IconButton
+        src={src}
+        className='text-gray-400 hover:text-gray-600'
+        title={intl.formatMessage(messages.upload)}
+        disabled={disabled}
+        onClick={handleClick}
+      />
+
+      <label>
+        <span className='sr-only'>{intl.formatMessage(messages.upload)}</span>
+        <input
+          key={resetFileKey}
+          ref={fileElement}
+          type='file'
+          multiple
+          accept={attachmentTypes && attachmentTypes.toArray().join(',')}
+          onChange={handleChange}
+          disabled={disabled}
+          className='hidden'
+        />
+      </label>
+    </div>
+  );
+};
+
+export default UploadButton;

From e813eecacbf45d20460dd50d49df1e0d09209e5e Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 30 May 2022 13:53:14 -0500
Subject: [PATCH 04/12] Upload: convert to TSX

---
 .../features/compose/components/upload.js     | 212 ------------------
 .../features/compose/components/upload.tsx    | 205 +++++++++++++++++
 2 files changed, 205 insertions(+), 212 deletions(-)
 delete mode 100644 app/soapbox/features/compose/components/upload.js
 create mode 100644 app/soapbox/features/compose/components/upload.tsx

diff --git a/app/soapbox/features/compose/components/upload.js b/app/soapbox/features/compose/components/upload.js
deleted file mode 100644
index a293509f9..000000000
--- a/app/soapbox/features/compose/components/upload.js
+++ /dev/null
@@ -1,212 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import spring from 'react-motion/lib/spring';
-import { withRouter } from 'react-router-dom';
-
-import Blurhash from 'soapbox/components/blurhash';
-import Icon from 'soapbox/components/icon';
-import IconButton from 'soapbox/components/icon_button';
-
-import Motion from '../../ui/util/optional_motion';
-
-const bookIcon = require('@tabler/icons/icons/book.svg');
-const fileAnalyticsIcon = require('@tabler/icons/icons/file-analytics.svg');
-const fileCodeIcon = require('@tabler/icons/icons/file-code.svg');
-const fileTextIcon = require('@tabler/icons/icons/file-text.svg');
-const fileZipIcon = require('@tabler/icons/icons/file-zip.svg');
-const presentationIcon = require('@tabler/icons/icons/presentation.svg');
-
-export const MIMETYPE_ICONS = {
-  'application/x-freearc': fileZipIcon,
-  'application/x-bzip': fileZipIcon,
-  'application/x-bzip2': fileZipIcon,
-  'application/gzip': fileZipIcon,
-  'application/vnd.rar': fileZipIcon,
-  'application/x-tar': fileZipIcon,
-  'application/zip': fileZipIcon,
-  'application/x-7z-compressed': fileZipIcon,
-  'application/x-csh': fileCodeIcon,
-  'application/html': fileCodeIcon,
-  'text/javascript': fileCodeIcon,
-  'application/json': fileCodeIcon,
-  'application/ld+json': fileCodeIcon,
-  'application/x-httpd-php': fileCodeIcon,
-  'application/x-sh': fileCodeIcon,
-  'application/xhtml+xml': fileCodeIcon,
-  'application/xml': fileCodeIcon,
-  'application/epub+zip': bookIcon,
-  'application/vnd.oasis.opendocument.spreadsheet': fileAnalyticsIcon,
-  'application/vnd.ms-excel': fileAnalyticsIcon,
-  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': fileAnalyticsIcon,
-  'application/pdf': fileTextIcon,
-  'application/vnd.oasis.opendocument.presentation': presentationIcon,
-  'application/vnd.ms-powerpoint': presentationIcon,
-  'application/vnd.openxmlformats-officedocument.presentationml.presentation': presentationIcon,
-  'text/plain': fileTextIcon,
-  'application/rtf': fileTextIcon,
-  'application/msword': fileTextIcon,
-  'application/x-abiword': fileTextIcon,
-  'application/vnd.openxmlformats-officedocument.wordprocessingml.document': fileTextIcon,
-  'application/vnd.oasis.opendocument.text': fileTextIcon,
-};
-
-const messages = defineMessages({
-  description: { id: 'upload_form.description', defaultMessage: 'Describe for the visually impaired' },
-  delete: { id: 'upload_form.undo', defaultMessage: 'Delete' },
-});
-
-export default @injectIntl @withRouter
-class Upload extends ImmutablePureComponent {
-
-  static propTypes = {
-    media: ImmutablePropTypes.map.isRequired,
-    intl: PropTypes.object.isRequired,
-    onUndo: PropTypes.func.isRequired,
-    onDescriptionChange: PropTypes.func.isRequired,
-    onOpenFocalPoint: PropTypes.func.isRequired,
-    onSubmit: PropTypes.func.isRequired,
-    history: PropTypes.object.isRequired,
-  };
-
-  state = {
-    hovered: false,
-    focused: false,
-    dirtyDescription: null,
-  };
-
-  handleKeyDown = (e) => {
-    if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) {
-      this.handleSubmit();
-    }
-  }
-
-  handleSubmit = () => {
-    this.handleInputBlur();
-    this.props.onSubmit(this.props.history);
-  }
-
-  handleUndoClick = e => {
-    e.stopPropagation();
-    this.props.onUndo(this.props.media.get('id'));
-  }
-
-  handleFocalPointClick = e => {
-    e.stopPropagation();
-    this.props.onOpenFocalPoint(this.props.media.get('id'));
-  }
-
-  handleInputChange = e => {
-    this.setState({ dirtyDescription: e.target.value });
-  }
-
-  handleMouseEnter = () => {
-    this.setState({ hovered: true });
-  }
-
-  handleMouseLeave = () => {
-    this.setState({ hovered: false });
-  }
-
-  handleInputFocus = () => {
-    this.setState({ focused: true });
-  }
-
-  handleClick = () => {
-    this.setState({ focused: true });
-  }
-
-  handleInputBlur = () => {
-    const { dirtyDescription } = this.state;
-
-    this.setState({ focused: false, dirtyDescription: null });
-
-    if (dirtyDescription !== null) {
-      this.props.onDescriptionChange(this.props.media.get('id'), dirtyDescription);
-    }
-  }
-
-  handleOpenModal = () => {
-    this.props.onOpenModal(this.props.media);
-  }
-
-  render() {
-    const { intl, media, descriptionLimit } = this.props;
-    const active          = this.state.hovered || this.state.focused;
-    const description     = this.state.dirtyDescription || (this.state.dirtyDescription !== '' && media.get('description')) || '';
-    const focusX = media.getIn(['meta', 'focus', 'x']);
-    const focusY = media.getIn(['meta', 'focus', 'y']);
-    const x = ((focusX /  2) + .5) * 100;
-    const y = ((focusY / -2) + .5) * 100;
-    const mediaType = media.get('type');
-    const uploadIcon = mediaType === 'unknown' && (
-      <Icon
-        className='h-16 w-16 mx-auto my-12 text-gray-800 dark:text-gray-200'
-        src={MIMETYPE_ICONS[media.getIn(['pleroma', 'mime_type'])] || require('@tabler/icons/icons/paperclip.svg')}
-      />
-    );
-
-    return (
-      <div className='compose-form__upload' tabIndex='0' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} onClick={this.handleClick} role='button'>
-        <Blurhash hash={media.get('blurhash')} className='media-gallery__preview' />
-        <Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}>
-          {({ scale }) => (
-            <div
-              className={classNames('compose-form__upload-thumbnail',  `${mediaType}`)}
-              style={{
-                transform: `scale(${scale})`,
-                backgroundImage: mediaType === 'image' ? `url(${media.get('preview_url')})` : null,
-                backgroundPosition: `${x}% ${y}%` }}
-            >
-              <div className={classNames('compose-form__upload__actions', { active })}>
-                <IconButton
-                  onClick={this.handleUndoClick}
-                  src={require('@tabler/icons/icons/x.svg')}
-                  text={<FormattedMessage id='upload_form.undo' defaultMessage='Delete' />}
-                />
-
-                {/* Only display the "Preview" button for a valid attachment with a URL */}
-                {(mediaType !== 'unknown' && Boolean(media.get('url'))) && (
-                  <IconButton
-                    onClick={this.handleOpenModal}
-                    src={require('@tabler/icons/icons/zoom-in.svg')}
-                    text={<FormattedMessage id='upload_form.preview' defaultMessage='Preview' />}
-                  />
-                )}
-              </div>
-
-              <div className={classNames('compose-form__upload-description', { active })}>
-                <label>
-                  <span style={{ display: 'none' }}>{intl.formatMessage(messages.description)}</span>
-
-                  <textarea
-                    placeholder={intl.formatMessage(messages.description)}
-                    value={description}
-                    maxLength={descriptionLimit}
-                    onFocus={this.handleInputFocus}
-                    onChange={this.handleInputChange}
-                    onBlur={this.handleInputBlur}
-                    onKeyDown={this.handleKeyDown}
-                  />
-                </label>
-              </div>
-
-              <div className='compose-form__upload-preview'>
-                {mediaType === 'video' && (
-                  <video autoPlay playsInline muted loop>
-                    <source src={media.get('preview_url')} />
-                  </video>
-                )}
-                {uploadIcon}
-              </div>
-            </div>
-          )}
-        </Motion>
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/compose/components/upload.tsx b/app/soapbox/features/compose/components/upload.tsx
new file mode 100644
index 000000000..b60079dca
--- /dev/null
+++ b/app/soapbox/features/compose/components/upload.tsx
@@ -0,0 +1,205 @@
+import classNames from 'classnames';
+import React, { useState } from 'react';
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
+import { spring } from 'react-motion';
+import { useHistory } from 'react-router-dom';
+
+import Blurhash from 'soapbox/components/blurhash';
+import Icon from 'soapbox/components/icon';
+import IconButton from 'soapbox/components/icon_button';
+
+import Motion from '../../ui/util/optional_motion';
+
+import type { Map as ImmutableMap } from 'immutable';
+
+const bookIcon = require('@tabler/icons/icons/book.svg');
+const fileAnalyticsIcon = require('@tabler/icons/icons/file-analytics.svg');
+const fileCodeIcon = require('@tabler/icons/icons/file-code.svg');
+const fileTextIcon = require('@tabler/icons/icons/file-text.svg');
+const fileZipIcon = require('@tabler/icons/icons/file-zip.svg');
+const defaultIcon = require('@tabler/icons/icons/paperclip.svg');
+const presentationIcon = require('@tabler/icons/icons/presentation.svg');
+
+export const MIMETYPE_ICONS: Record<string, string> = {
+  'application/x-freearc': fileZipIcon,
+  'application/x-bzip': fileZipIcon,
+  'application/x-bzip2': fileZipIcon,
+  'application/gzip': fileZipIcon,
+  'application/vnd.rar': fileZipIcon,
+  'application/x-tar': fileZipIcon,
+  'application/zip': fileZipIcon,
+  'application/x-7z-compressed': fileZipIcon,
+  'application/x-csh': fileCodeIcon,
+  'application/html': fileCodeIcon,
+  'text/javascript': fileCodeIcon,
+  'application/json': fileCodeIcon,
+  'application/ld+json': fileCodeIcon,
+  'application/x-httpd-php': fileCodeIcon,
+  'application/x-sh': fileCodeIcon,
+  'application/xhtml+xml': fileCodeIcon,
+  'application/xml': fileCodeIcon,
+  'application/epub+zip': bookIcon,
+  'application/vnd.oasis.opendocument.spreadsheet': fileAnalyticsIcon,
+  'application/vnd.ms-excel': fileAnalyticsIcon,
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': fileAnalyticsIcon,
+  'application/pdf': fileTextIcon,
+  'application/vnd.oasis.opendocument.presentation': presentationIcon,
+  'application/vnd.ms-powerpoint': presentationIcon,
+  'application/vnd.openxmlformats-officedocument.presentationml.presentation': presentationIcon,
+  'text/plain': fileTextIcon,
+  'application/rtf': fileTextIcon,
+  'application/msword': fileTextIcon,
+  'application/x-abiword': fileTextIcon,
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document': fileTextIcon,
+  'application/vnd.oasis.opendocument.text': fileTextIcon,
+};
+
+const messages = defineMessages({
+  description: { id: 'upload_form.description', defaultMessage: 'Describe for the visually impaired' },
+  delete: { id: 'upload_form.undo', defaultMessage: 'Delete' },
+});
+
+interface IUpload {
+  media: ImmutableMap<string, any>,
+  descriptionLimit: number,
+  onUndo: (attachmentId: string) => void,
+  onDescriptionChange: (attachmentId: string, description: string) => void,
+  onOpenFocalPoint: (attachmentId: string) => void,
+  onOpenModal: (attachments: ImmutableMap<string, any>) => void,
+  onSubmit: (history: ReturnType<typeof useHistory>) => void,
+}
+
+const Upload: React.FC<IUpload> = (props) => {
+  const intl = useIntl();
+  const history = useHistory();
+
+  const [hovered, setHovered] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const [dirtyDescription, setDirtyDescription] = useState<string | null>(null);
+
+  const handleKeyDown: React.KeyboardEventHandler = (e) => {
+    if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) {
+      handleSubmit();
+    }
+  };
+
+  const handleSubmit = () => {
+    handleInputBlur();
+    props.onSubmit(history);
+  };
+
+  const handleUndoClick: React.MouseEventHandler = e => {
+    e.stopPropagation();
+    props.onUndo(props.media.get('id'));
+  };
+
+  const handleInputChange: React.ChangeEventHandler<HTMLTextAreaElement> = e => {
+    setDirtyDescription(e.target.value);
+  };
+
+  const handleMouseEnter = () => {
+    setHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setHovered(false);
+  };
+
+  const handleInputFocus = () => {
+    setFocused(true);
+  };
+
+  const handleClick = () => {
+    setFocused(true);
+  };
+
+  const handleInputBlur = () => {
+    setFocused(false);
+    setDirtyDescription(null);
+
+    if (dirtyDescription !== null) {
+      props.onDescriptionChange(props.media.get('id'), dirtyDescription);
+    }
+  };
+
+  const handleOpenModal = () => {
+    props.onOpenModal(props.media);
+  };
+
+  const active = hovered || focused;
+  const description = dirtyDescription || (dirtyDescription !== '' && props.media.get('description')) || '';
+  const focusX = props.media.getIn(['meta', 'focus', 'x']) as number | undefined;
+  const focusY = props.media.getIn(['meta', 'focus', 'y']) as number | undefined;
+  const x = focusX ? ((focusX /  2) + .5) * 100 : 0;
+  const y = focusY ? ((focusY / -2) + .5) * 100 : 0;
+  const mediaType = props.media.get('type');
+  const mimeType = props.media.getIn(['pleroma', 'mime_type']) as string | undefined;
+
+  const uploadIcon = mediaType === 'unknown' && (
+    <Icon
+      className='h-16 w-16 mx-auto my-12 text-gray-800 dark:text-gray-200'
+      src={MIMETYPE_ICONS[mimeType || ''] || defaultIcon}
+    />
+  );
+
+  return (
+    <div className='compose-form__upload' tabIndex={0} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} onClick={handleClick} role='button'>
+      <Blurhash hash={props.media.get('blurhash')} className='media-gallery__preview' />
+      <Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}>
+        {({ scale }) => (
+          <div
+            className={classNames('compose-form__upload-thumbnail',  `${mediaType}`)}
+            style={{
+              transform: `scale(${scale})`,
+              backgroundImage: mediaType === 'image' ? `url(${props.media.get('preview_url')})` : undefined,
+              backgroundPosition: `${x}% ${y}%` }}
+          >
+            <div className={classNames('compose-form__upload__actions', { active })}>
+              <IconButton
+                onClick={handleUndoClick}
+                src={require('@tabler/icons/icons/x.svg')}
+                text={<FormattedMessage id='upload_form.undo' defaultMessage='Delete' />}
+              />
+
+              {/* Only display the "Preview" button for a valid attachment with a URL */}
+              {(mediaType !== 'unknown' && Boolean(props.media.get('url'))) && (
+                <IconButton
+                  onClick={handleOpenModal}
+                  src={require('@tabler/icons/icons/zoom-in.svg')}
+                  text={<FormattedMessage id='upload_form.preview' defaultMessage='Preview' />}
+                />
+              )}
+            </div>
+
+            <div className={classNames('compose-form__upload-description', { active })}>
+              <label>
+                <span style={{ display: 'none' }}>{intl.formatMessage(messages.description)}</span>
+
+                <textarea
+                  placeholder={intl.formatMessage(messages.description)}
+                  value={description}
+                  maxLength={props.descriptionLimit}
+                  onFocus={handleInputFocus}
+                  onChange={handleInputChange}
+                  onBlur={handleInputBlur}
+                  onKeyDown={handleKeyDown}
+                />
+              </label>
+            </div>
+
+            <div className='compose-form__upload-preview'>
+              {mediaType === 'video' && (
+                <video autoPlay playsInline muted loop>
+                  <source src={props.media.get('preview_url')} />
+                </video>
+              )}
+              {uploadIcon}
+            </div>
+          </div>
+        )}
+      </Motion>
+    </div>
+  );
+};
+
+export default Upload;

From 6e2cc63b7d1c615715b2aa73a5732ccb1f379e22 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 30 May 2022 13:55:46 -0500
Subject: [PATCH 05/12] ScheduleButton: convert to TSX

---
 .../compose/components/schedule_button.js     | 46 -------------------
 .../compose/components/schedule_button.tsx    | 40 ++++++++++++++++
 2 files changed, 40 insertions(+), 46 deletions(-)
 delete mode 100644 app/soapbox/features/compose/components/schedule_button.js
 create mode 100644 app/soapbox/features/compose/components/schedule_button.tsx

diff --git a/app/soapbox/features/compose/components/schedule_button.js b/app/soapbox/features/compose/components/schedule_button.js
deleted file mode 100644
index 484174355..000000000
--- a/app/soapbox/features/compose/components/schedule_button.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
-
-import ComposeFormButton from './compose_form_button';
-
-const messages = defineMessages({
-  add_schedule: { id: 'schedule_button.add_schedule', defaultMessage: 'Schedule post for later' },
-  remove_schedule: { id: 'schedule_button.remove_schedule', defaultMessage: 'Post immediately' },
-});
-
-export default
-@injectIntl
-class ScheduleButton extends React.PureComponent {
-
-  static propTypes = {
-    disabled: PropTypes.bool,
-    active: PropTypes.bool,
-    unavailable: PropTypes.bool,
-    onClick: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  handleClick = () => {
-    this.props.onClick();
-  }
-
-  render() {
-    const { intl, active, unavailable, disabled } = this.props;
-
-    if (unavailable) {
-      return null;
-    }
-
-    return (
-      <ComposeFormButton
-        icon={require('@tabler/icons/icons/calendar-stats.svg')}
-        title={intl.formatMessage(active ? messages.remove_schedule : messages.add_schedule)}
-        active={active}
-        disabled={disabled}
-        onClick={this.handleClick}
-      />
-    );
-  }
-
-}
diff --git a/app/soapbox/features/compose/components/schedule_button.tsx b/app/soapbox/features/compose/components/schedule_button.tsx
new file mode 100644
index 000000000..8d1509884
--- /dev/null
+++ b/app/soapbox/features/compose/components/schedule_button.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import ComposeFormButton from './compose_form_button';
+
+const messages = defineMessages({
+  add_schedule: { id: 'schedule_button.add_schedule', defaultMessage: 'Schedule post for later' },
+  remove_schedule: { id: 'schedule_button.remove_schedule', defaultMessage: 'Post immediately' },
+});
+
+interface IScheduleButton {
+  disabled: boolean,
+  active: boolean,
+  unavailable: boolean,
+  onClick: () => void,
+}
+
+const ScheduleButton: React.FC<IScheduleButton> = ({ active, unavailable, disabled, onClick }) => {
+  const intl = useIntl();
+
+  const handleClick = () => {
+    onClick();
+  };
+
+  if (unavailable) {
+    return null;
+  }
+
+  return (
+    <ComposeFormButton
+      icon={require('@tabler/icons/icons/calendar-stats.svg')}
+      title={intl.formatMessage(active ? messages.remove_schedule : messages.add_schedule)}
+      active={active}
+      disabled={disabled}
+      onClick={handleClick}
+    />
+  );
+};
+
+export default ScheduleButton;

From b02c80341b106a00f89a673d7d2d13dd8204dd64 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 30 May 2022 14:05:15 -0500
Subject: [PATCH 06/12] ReplyIndicator: convert to TSX

---
 app/soapbox/components/ui/text/text.tsx       |  9 ++-
 .../compose/components/reply_indicator.js     | 70 -------------------
 .../compose/components/reply_indicator.tsx    | 62 ++++++++++++++++
 3 files changed, 70 insertions(+), 71 deletions(-)
 delete mode 100644 app/soapbox/features/compose/components/reply_indicator.js
 create mode 100644 app/soapbox/features/compose/components/reply_indicator.tsx

diff --git a/app/soapbox/components/ui/text/text.tsx b/app/soapbox/components/ui/text/text.tsx
index 072491109..f7513595f 100644
--- a/app/soapbox/components/ui/text/text.tsx
+++ b/app/soapbox/components/ui/text/text.tsx
@@ -9,6 +9,7 @@ type TrackingSizes = 'normal' | 'wide'
 type TransformProperties = 'uppercase' | 'normal'
 type Families = 'sans' | 'mono'
 type Tags = 'abbr' | 'p' | 'span' | 'pre' | 'time' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label'
+type Directions = 'ltr' | 'rtl'
 
 const themes = {
   default: 'text-gray-900 dark:text-gray-100',
@@ -64,6 +65,8 @@ interface IText extends Pick<React.HTMLAttributes<HTMLParagraphElement>, 'danger
   align?: Alignments,
   /** Extra class names for the outer element. */
   className?: string,
+  /** Text direction. */
+  direction?: Directions,
   /** Typeface of the text. */
   family?: Families,
   /** The "for" attribute specifies which form element a label is bound to. */
@@ -90,6 +93,7 @@ const Text: React.FC<IText> = React.forwardRef(
     const {
       align,
       className,
+      direction,
       family = 'sans',
       size = 'md',
       tag = 'p',
@@ -109,7 +113,10 @@ const Text: React.FC<IText> = React.forwardRef(
       <Comp
         {...filteredProps}
         ref={ref}
-        style={tag === 'abbr' ? { textDecoration: 'underline dotted' } : undefined}
+        style={{
+          textDecoration: tag === 'abbr' ? 'underline dotted' : undefined,
+          direction,
+        }}
         className={classNames({
           'cursor-default': tag === 'abbr',
           truncate: truncate,
diff --git a/app/soapbox/features/compose/components/reply_indicator.js b/app/soapbox/features/compose/components/reply_indicator.js
deleted file mode 100644
index faa86ea9a..000000000
--- a/app/soapbox/features/compose/components/reply_indicator.js
+++ /dev/null
@@ -1,70 +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 AttachmentThumbs from 'soapbox/components/attachment-thumbs';
-import { Stack, Text } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account_container';
-
-import { isRtl } from '../../../rtl';
-
-export default class ReplyIndicator extends ImmutablePureComponent {
-
-  static propTypes = {
-    status: ImmutablePropTypes.record,
-    onCancel: PropTypes.func.isRequired,
-    hideActions: PropTypes.bool,
-  };
-
-  handleClick = () => {
-    this.props.onCancel();
-  }
-
-  render() {
-    const { status, hideActions } = this.props;
-
-    if (!status) {
-      return null;
-    }
-
-    const style = {
-      direction: isRtl(status.get('search_index')) ? 'rtl' : 'ltr',
-    };
-
-    let actions = {};
-    if (!hideActions) {
-      actions = {
-        onActionClick: this.handleClick,
-        actionIcon: require('@tabler/icons/icons/x.svg'),
-        actionAlignment: 'top',
-        actionTitle: 'Dismiss',
-      };
-    }
-
-    return (
-      <Stack space={2} className='p-4 rounded-lg bg-gray-100 dark:bg-slate-700'>
-        <AccountContainer
-          {...actions}
-          id={status.getIn(['account', 'id'])}
-          timestamp={status.get('created_at')}
-          showProfileHoverCard={false}
-        />
-
-        <Text
-          size='sm'
-          dangerouslySetInnerHTML={{ __html: status.get('contentHtml') }}
-          style={style}
-        />
-
-        {status.get('media_attachments').size > 0 && (
-          <AttachmentThumbs
-            media={status.get('media_attachments')}
-            sensitive={status.get('sensitive')}
-          />
-        )}
-      </Stack>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/compose/components/reply_indicator.tsx b/app/soapbox/features/compose/components/reply_indicator.tsx
new file mode 100644
index 000000000..ebe7c8637
--- /dev/null
+++ b/app/soapbox/features/compose/components/reply_indicator.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+
+import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
+import { Stack, Text } from 'soapbox/components/ui';
+import AccountContainer from 'soapbox/containers/account_container';
+
+import { isRtl } from '../../../rtl';
+
+import type { Status } from 'soapbox/types/entities';
+
+interface IReplyIndicator {
+  status?: Status,
+  onCancel: () => void,
+  hideActions: boolean,
+}
+
+const ReplyIndicator: React.FC<IReplyIndicator> = ({ status, hideActions, onCancel }) => {
+  const handleClick = () => {
+    onCancel();
+  };
+
+
+  if (!status) {
+    return null;
+  }
+
+  let actions = {};
+  if (!hideActions) {
+    actions = {
+      onActionClick: handleClick,
+      actionIcon: require('@tabler/icons/icons/x.svg'),
+      actionAlignment: 'top',
+      actionTitle: 'Dismiss',
+    };
+  }
+
+  return (
+    <Stack space={2} className='p-4 rounded-lg bg-gray-100 dark:bg-slate-700'>
+      <AccountContainer
+        {...actions}
+        id={status.getIn(['account', 'id']) as string}
+        timestamp={status.created_at}
+        showProfileHoverCard={false}
+      />
+
+      <Text
+        size='sm'
+        dangerouslySetInnerHTML={{ __html: status.contentHtml }}
+        direction={isRtl(status.search_index) ? 'rtl' : 'ltr'}
+      />
+
+      {status.media_attachments.size > 0 && (
+        <AttachmentThumbs
+          media={status.media_attachments}
+          sensitive={status.sensitive}
+        />
+      )}
+    </Stack>
+  );
+};
+
+export default ReplyIndicator;

From faf48d17b95be3d40904f4ea85533720b7feff48 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 30 May 2022 14:43:35 -0500
Subject: [PATCH 07/12] PrivacyDropdown: convert to TSX

---
 .../compose/components/privacy_dropdown.js    | 284 ------------------
 .../compose/components/privacy_dropdown.tsx   | 263 ++++++++++++++++
 2 files changed, 263 insertions(+), 284 deletions(-)
 delete mode 100644 app/soapbox/features/compose/components/privacy_dropdown.js
 create mode 100644 app/soapbox/features/compose/components/privacy_dropdown.tsx

diff --git a/app/soapbox/features/compose/components/privacy_dropdown.js b/app/soapbox/features/compose/components/privacy_dropdown.js
deleted file mode 100644
index d6ddf771c..000000000
--- a/app/soapbox/features/compose/components/privacy_dropdown.js
+++ /dev/null
@@ -1,284 +0,0 @@
-import classNames from 'classnames';
-import { supportsPassiveEvents } from 'detect-passive-events';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { injectIntl, defineMessages } from 'react-intl';
-import spring from 'react-motion/lib/spring';
-import Overlay from 'react-overlays/lib/Overlay';
-
-import Icon from 'soapbox/components/icon';
-
-import { IconButton } from '../../../components/ui';
-import Motion from '../../ui/util/optional_motion';
-
-const messages = defineMessages({
-  public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
-  public_long: { id: 'privacy.public.long', defaultMessage: 'Post to public timelines' },
-  unlisted_short: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
-  unlisted_long: { id: 'privacy.unlisted.long', defaultMessage: 'Do not post to public timelines' },
-  private_short: { id: 'privacy.private.short', defaultMessage: 'Followers-only' },
-  private_long: { id: 'privacy.private.long', defaultMessage: 'Post to followers only' },
-  direct_short: { id: 'privacy.direct.short', defaultMessage: 'Direct' },
-  direct_long: { id: 'privacy.direct.long', defaultMessage: 'Post to mentioned users only' },
-  change_privacy: { id: 'privacy.change', defaultMessage: 'Adjust post privacy' },
-});
-
-const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
-
-class PrivacyDropdownMenu extends React.PureComponent {
-
-  static propTypes = {
-    style: PropTypes.object,
-    items: PropTypes.array.isRequired,
-    value: PropTypes.string.isRequired,
-    placement: PropTypes.string.isRequired,
-    onClose: PropTypes.func.isRequired,
-    onChange: PropTypes.func.isRequired,
-    unavailable: PropTypes.bool,
-  };
-
-  state = {
-    mounted: false,
-  };
-
-  handleDocumentClick = e => {
-    if (this.node && !this.node.contains(e.target)) {
-      this.props.onClose();
-    }
-  }
-
-  handleKeyDown = e => {
-    const { items } = this.props;
-    const value = e.currentTarget.getAttribute('data-index');
-    const index = items.findIndex(item => {
-      return (item.value === value);
-    });
-    let element = null;
-
-    switch (e.key) {
-      case 'Escape':
-        this.props.onClose();
-        break;
-      case 'Enter':
-        this.handleClick(e);
-        break;
-      case 'ArrowDown':
-        element = this.node.childNodes[index + 1] || this.node.firstChild;
-        break;
-      case 'ArrowUp':
-        element = this.node.childNodes[index - 1] || this.node.lastChild;
-        break;
-      case 'Tab':
-        if (e.shiftKey) {
-          element = this.node.childNodes[index - 1] || this.node.lastChild;
-        } else {
-          element = this.node.childNodes[index + 1] || this.node.firstChild;
-        }
-        break;
-      case 'Home':
-        element = this.node.firstChild;
-        break;
-      case 'End':
-        element = this.node.lastChild;
-        break;
-    }
-
-    if (element) {
-      element.focus();
-      this.props.onChange(element.getAttribute('data-index'));
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  }
-
-  handleClick = e => {
-    const value = e.currentTarget.getAttribute('data-index');
-
-    e.preventDefault();
-
-    this.props.onClose();
-    this.props.onChange(value);
-  }
-
-  componentDidMount() {
-    document.addEventListener('click', this.handleDocumentClick, false);
-    document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
-    if (this.focusedItem) this.focusedItem.focus({ preventScroll: true });
-    this.setState({ mounted: true });
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('click', this.handleDocumentClick, false);
-    document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
-  }
-
-  setRef = c => {
-    this.node = c;
-  }
-
-  setFocusRef = c => {
-    this.focusedItem = c;
-  }
-
-  render() {
-    const { mounted } = this.state;
-    const { style, items, placement, value } = this.props;
-
-    return (
-      <Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
-        {({ opacity, scaleX, scaleY }) => (
-          // It should not be transformed when mounting because the resulting
-          // size will be used to determine the coordinate of the menu by
-          // react-overlays
-          <div className={`privacy-dropdown__dropdown ${placement}`} style={{ ...style, opacity: opacity, transform: mounted ? `scale(${scaleX}, ${scaleY})` : null }} role='listbox' ref={this.setRef}>
-            {items.map(item => (
-              <div role='option' tabIndex='0' key={item.value} data-index={item.value} onKeyDown={this.handleKeyDown} onClick={this.handleClick} className={classNames('privacy-dropdown__option', { active: item.value === value })} aria-selected={item.value === value} ref={item.value === value ? this.setFocusRef : null}>
-                <div className='privacy-dropdown__option__icon'>
-                  <Icon src={item.icon} />
-                </div>
-
-                <div className='privacy-dropdown__option__content'>
-                  <strong>{item.text}</strong>
-                  {item.meta}
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </Motion>
-    );
-  }
-
-}
-
-export default @injectIntl
-class PrivacyDropdown extends React.PureComponent {
-
-  static propTypes = {
-    isUserTouching: PropTypes.func,
-    isModalOpen: PropTypes.bool.isRequired,
-    onModalOpen: PropTypes.func,
-    onModalClose: PropTypes.func,
-    value: PropTypes.string.isRequired,
-    onChange: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  state = {
-    open: false,
-    placement: 'bottom',
-  };
-
-  constructor(props) {
-    super(props);
-    const { intl: { formatMessage } } = props;
-
-    this.options = [
-      { icon: require('@tabler/icons/icons/world.svg'), value: 'public', text: formatMessage(messages.public_short), meta: formatMessage(messages.public_long) },
-      { icon: require('@tabler/icons/icons/lock-open.svg'), value: 'unlisted', text: formatMessage(messages.unlisted_short), meta: formatMessage(messages.unlisted_long) },
-      { icon: require('@tabler/icons/icons/lock.svg'), value: 'private', text: formatMessage(messages.private_short), meta: formatMessage(messages.private_long) },
-      { icon: require('@tabler/icons/icons/mail.svg'), value: 'direct', text: formatMessage(messages.direct_short), meta: formatMessage(messages.direct_long) },
-    ];
-  }
-
-  handleToggle = (e) => {
-    if (this.props.isUserTouching()) {
-      if (this.state.open) {
-        this.props.onModalClose();
-      } else {
-        this.props.onModalOpen({
-          actions: this.options.map(option => ({ ...option, active: option.value === this.props.value })),
-          onClick: this.handleModalActionClick,
-        });
-      }
-    } else {
-      const { top } = e.target.getBoundingClientRect();
-      if (this.state.open && this.activeElement) {
-        this.activeElement.focus();
-      }
-      this.setState({ placement: top * 2 < innerHeight ? 'bottom' : 'top' });
-      this.setState({ open: !this.state.open });
-    }
-    e.stopPropagation();
-  }
-
-  handleModalActionClick = (e) => {
-    e.preventDefault();
-
-    const { value } = this.options[e.currentTarget.getAttribute('data-index')];
-
-    this.props.onModalClose();
-    this.props.onChange(value);
-  }
-
-  handleKeyDown = e => {
-    switch (e.key) {
-      case 'Escape':
-        this.handleClose();
-        break;
-    }
-  }
-
-  handleMouseDown = () => {
-    if (!this.state.open) {
-      this.activeElement = document.activeElement;
-    }
-  }
-
-  handleButtonKeyDown = (e) => {
-    switch (e.key) {
-      case ' ':
-      case 'Enter':
-        this.handleMouseDown();
-        break;
-    }
-  }
-
-  handleClose = () => {
-    if (this.state.open && this.activeElement) {
-      this.activeElement.focus();
-    }
-    this.setState({ open: false });
-  }
-
-  handleChange = value => {
-    this.props.onChange(value);
-  }
-
-  render() {
-    const { value, intl, unavailable } = this.props;
-    const { open, placement } = this.state;
-
-    if (unavailable) {
-      return null;
-    }
-
-    const valueOption = this.options.find(item => item.value === value);
-
-    return (
-      <div className={classNames('privacy-dropdown', placement, { active: open })} onKeyDown={this.handleKeyDown}>
-        <div className={classNames('privacy-dropdown__value', { active: this.options.indexOf(valueOption) === 0 })}>
-          <IconButton
-            className='text-gray-400 hover:text-gray-600'
-            src={valueOption.icon}
-            title={intl.formatMessage(messages.change_privacy)}
-            onClick={this.handleToggle}
-            onMouseDown={this.handleMouseDown}
-            onKeyDown={this.handleButtonKeyDown}
-          />
-        </div>
-
-        <Overlay show={open} placement={placement} target={this}>
-          <PrivacyDropdownMenu
-            items={this.options}
-            value={value}
-            onClose={this.handleClose}
-            onChange={this.handleChange}
-            placement={placement}
-          />
-        </Overlay>
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/compose/components/privacy_dropdown.tsx b/app/soapbox/features/compose/components/privacy_dropdown.tsx
new file mode 100644
index 000000000..3e3440ae4
--- /dev/null
+++ b/app/soapbox/features/compose/components/privacy_dropdown.tsx
@@ -0,0 +1,263 @@
+import classNames from 'classnames';
+import { supportsPassiveEvents } from 'detect-passive-events';
+import React, { useState, useRef, useEffect } from 'react';
+import { useIntl, defineMessages } from 'react-intl';
+import { spring } from 'react-motion';
+// @ts-ignore
+import Overlay from 'react-overlays/lib/Overlay';
+
+import Icon from 'soapbox/components/icon';
+
+import { IconButton } from '../../../components/ui';
+import Motion from '../../ui/util/optional_motion';
+
+const messages = defineMessages({
+  public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
+  public_long: { id: 'privacy.public.long', defaultMessage: 'Post to public timelines' },
+  unlisted_short: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
+  unlisted_long: { id: 'privacy.unlisted.long', defaultMessage: 'Do not post to public timelines' },
+  private_short: { id: 'privacy.private.short', defaultMessage: 'Followers-only' },
+  private_long: { id: 'privacy.private.long', defaultMessage: 'Post to followers only' },
+  direct_short: { id: 'privacy.direct.short', defaultMessage: 'Direct' },
+  direct_long: { id: 'privacy.direct.long', defaultMessage: 'Post to mentioned users only' },
+  change_privacy: { id: 'privacy.change', defaultMessage: 'Adjust post privacy' },
+});
+
+const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
+
+interface IPrivacyDropdownMenu {
+  style?: React.CSSProperties,
+  items: any[],
+  value: string,
+  placement: string,
+  onClose: () => void,
+  onChange: (value: string | null) => void,
+  unavailable?: boolean,
+}
+
+const PrivacyDropdownMenu: React.FC<IPrivacyDropdownMenu> = ({ style, items, placement, value, onClose, onChange }) => {
+  const node = useRef<HTMLDivElement>(null);
+  const focusedItem = useRef<HTMLDivElement>(null);
+
+  const [mounted, setMounted] = useState(false);
+
+  const handleDocumentClick = (e: MouseEvent | TouchEvent) => {
+    if (node.current && !node.current.contains(e.target as HTMLElement)) {
+      onClose();
+    }
+  };
+
+  const handleKeyDown: React.KeyboardEventHandler = e => {
+    const value = e.currentTarget.getAttribute('data-index');
+    const index = items.findIndex(item => {
+      return (item.value === value);
+    });
+    let element = null;
+
+    switch (e.key) {
+      case 'Escape':
+        onClose();
+        break;
+      case 'Enter':
+        handleClick(e);
+        break;
+      case 'ArrowDown':
+        element = node.current?.childNodes[index + 1] || node.current?.firstChild;
+        break;
+      case 'ArrowUp':
+        element = node.current?.childNodes[index - 1] || node.current?.lastChild;
+        break;
+      case 'Tab':
+        if (e.shiftKey) {
+          element = node.current?.childNodes[index - 1] || node.current?.lastChild;
+        } else {
+          element = node.current?.childNodes[index + 1] || node.current?.firstChild;
+        }
+        break;
+      case 'Home':
+        element = node.current?.firstChild;
+        break;
+      case 'End':
+        element = node.current?.lastChild;
+        break;
+    }
+
+    if (element) {
+      (element as HTMLElement).focus();
+      onChange((element as HTMLElement).getAttribute('data-index'));
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+
+  const handleClick: React.EventHandler<any> = (e: MouseEvent | KeyboardEvent) => {
+    const value = (e.currentTarget as HTMLElement)?.getAttribute('data-index');
+
+    e.preventDefault();
+
+    onClose();
+    onChange(value);
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleDocumentClick, false);
+    document.addEventListener('touchend', handleDocumentClick, listenerOptions);
+
+    focusedItem.current?.focus({ preventScroll: true });
+    setMounted(true);
+
+    return () => {
+      document.removeEventListener('click', handleDocumentClick, false);
+      document.removeEventListener('touchend', handleDocumentClick);
+    };
+  });
+
+  return (
+    <Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
+      {({ opacity, scaleX, scaleY }) => (
+        // It should not be transformed when mounting because the resulting
+        // size will be used to determine the coordinate of the menu by
+        // react-overlays
+        <div className={`privacy-dropdown__dropdown ${placement}`} style={{ ...style, opacity: opacity, transform: mounted ? `scale(${scaleX}, ${scaleY})` : undefined }} role='listbox' ref={node}>
+          {items.map(item => (
+            <div role='option' tabIndex={0} key={item.value} data-index={item.value} onKeyDown={handleKeyDown} onClick={handleClick} className={classNames('privacy-dropdown__option', { active: item.value === value })} aria-selected={item.value === value} ref={item.value === value ? focusedItem : null}>
+              <div className='privacy-dropdown__option__icon'>
+                <Icon src={item.icon} />
+              </div>
+
+              <div className='privacy-dropdown__option__content'>
+                <strong>{item.text}</strong>
+                {item.meta}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </Motion>
+  );
+};
+
+interface IPrivacyDropdown {
+  isUserTouching: () => boolean,
+  isModalOpen: boolean,
+  onModalOpen: (opts: any) => void,
+  onModalClose: () => void,
+  value: string,
+  onChange: (value: string | null) => void,
+  unavailable: boolean,
+}
+
+const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
+  isUserTouching,
+  onChange,
+  onModalClose,
+  onModalOpen,
+  value,
+  unavailable,
+}) => {
+  const intl = useIntl();
+  const activeElement = useRef<HTMLElement | null>(null);
+
+  const [open, setOpen] = useState(false);
+  const [placement, setPlacement] = useState('bottom');
+
+  const options = [
+    { icon: require('@tabler/icons/icons/world.svg'), value: 'public', text: intl.formatMessage(messages.public_short), meta: intl.formatMessage(messages.public_long) },
+    { icon: require('@tabler/icons/icons/lock-open.svg'), value: 'unlisted', text: intl.formatMessage(messages.unlisted_short), meta: intl.formatMessage(messages.unlisted_long) },
+    { icon: require('@tabler/icons/icons/lock.svg'), value: 'private', text: intl.formatMessage(messages.private_short), meta: intl.formatMessage(messages.private_long) },
+    { icon: require('@tabler/icons/icons/mail.svg'), value: 'direct', text: intl.formatMessage(messages.direct_short), meta: intl.formatMessage(messages.direct_long) },
+  ];
+
+  const handleToggle: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    if (isUserTouching()) {
+      if (open) {
+        onModalClose();
+      } else {
+        onModalOpen({
+          actions: options.map(option => ({ ...option, active: option.value === value })),
+          onClick: handleModalActionClick,
+        });
+      }
+    } else {
+      const { top } = e.currentTarget.getBoundingClientRect();
+      if (open) {
+        activeElement.current?.focus();
+      }
+      setPlacement(top * 2 < innerHeight ? 'bottom' : 'top');
+      setOpen(!open);
+    }
+    e.stopPropagation();
+  };
+
+  const handleModalActionClick: React.MouseEventHandler = (e) => {
+    e.preventDefault();
+
+    const { value } = options[e.currentTarget.getAttribute('data-index') as any];
+
+    onModalClose();
+    onChange(value);
+  };
+
+  const handleKeyDown: React.KeyboardEventHandler = e => {
+    switch (e.key) {
+      case 'Escape':
+        handleClose();
+        break;
+    }
+  };
+
+  const handleMouseDown = () => {
+    if (!open) {
+      activeElement.current = document.activeElement as HTMLElement | null;
+    }
+  };
+
+  const handleButtonKeyDown: React.KeyboardEventHandler = (e) => {
+    switch (e.key) {
+      case ' ':
+      case 'Enter':
+        handleMouseDown();
+        break;
+    }
+  };
+
+  const handleClose = () => {
+    if (open) {
+      activeElement.current?.focus();
+    }
+    setOpen(false);
+  };
+
+  if (unavailable) {
+    return null;
+  }
+
+  const valueOption = options.find(item => item.value === value);
+
+  return (
+    <div className={classNames('privacy-dropdown', placement, { active: open })} onKeyDown={handleKeyDown}>
+      <div className={classNames('privacy-dropdown__value', { active: valueOption && options.indexOf(valueOption) === 0 })}>
+        <IconButton
+          className='text-gray-400 hover:text-gray-600'
+          src={valueOption?.icon}
+          title={intl.formatMessage(messages.change_privacy)}
+          onClick={handleToggle}
+          onMouseDown={handleMouseDown}
+          onKeyDown={handleButtonKeyDown}
+        />
+      </div>
+
+      <Overlay show={open} placement={placement} target={this}>
+        <PrivacyDropdownMenu
+          items={options}
+          value={value}
+          onClose={handleClose}
+          onChange={onChange}
+          placement={placement}
+        />
+      </Overlay>
+    </div>
+  );
+};
+
+export default PrivacyDropdown;

From 0051fd8eec7bb3b620b02e7a09f62626dcb4b5d7 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 30 May 2022 14:50:10 -0500
Subject: [PATCH 08/12] PrivacyDropdown: fix Overlay target

---
 app/soapbox/features/compose/components/privacy_dropdown.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/compose/components/privacy_dropdown.tsx b/app/soapbox/features/compose/components/privacy_dropdown.tsx
index 3e3440ae4..a155484b4 100644
--- a/app/soapbox/features/compose/components/privacy_dropdown.tsx
+++ b/app/soapbox/features/compose/components/privacy_dropdown.tsx
@@ -156,6 +156,7 @@ const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
   unavailable,
 }) => {
   const intl = useIntl();
+  const node = useRef<HTMLDivElement>(null);
   const activeElement = useRef<HTMLElement | null>(null);
 
   const [open, setOpen] = useState(false);
@@ -235,7 +236,7 @@ const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
   const valueOption = options.find(item => item.value === value);
 
   return (
-    <div className={classNames('privacy-dropdown', placement, { active: open })} onKeyDown={handleKeyDown}>
+    <div className={classNames('privacy-dropdown', placement, { active: open })} onKeyDown={handleKeyDown} ref={node}>
       <div className={classNames('privacy-dropdown__value', { active: valueOption && options.indexOf(valueOption) === 0 })}>
         <IconButton
           className='text-gray-400 hover:text-gray-600'
@@ -247,7 +248,7 @@ const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
         />
       </div>
 
-      <Overlay show={open} placement={placement} target={this}>
+      <Overlay show={open} placement={placement} target={node.current}>
         <PrivacyDropdownMenu
           items={options}
           value={value}

From 887302d642bb62ae3800f16fdaba9c11e928ce2f Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 30 May 2022 14:53:50 -0500
Subject: [PATCH 09/12] Upload: fix backgroundPosition

---
 app/soapbox/features/compose/components/upload.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/features/compose/components/upload.tsx b/app/soapbox/features/compose/components/upload.tsx
index b60079dca..b637e262f 100644
--- a/app/soapbox/features/compose/components/upload.tsx
+++ b/app/soapbox/features/compose/components/upload.tsx
@@ -130,8 +130,8 @@ const Upload: React.FC<IUpload> = (props) => {
   const description = dirtyDescription || (dirtyDescription !== '' && props.media.get('description')) || '';
   const focusX = props.media.getIn(['meta', 'focus', 'x']) as number | undefined;
   const focusY = props.media.getIn(['meta', 'focus', 'y']) as number | undefined;
-  const x = focusX ? ((focusX /  2) + .5) * 100 : 0;
-  const y = focusY ? ((focusY / -2) + .5) * 100 : 0;
+  const x = focusX ? ((focusX /  2) + .5) * 100 : undefined;
+  const y = focusY ? ((focusY / -2) + .5) * 100 : undefined;
   const mediaType = props.media.get('type');
   const mimeType = props.media.getIn(['pleroma', 'mime_type']) as string | undefined;
 
@@ -152,7 +152,7 @@ const Upload: React.FC<IUpload> = (props) => {
             style={{
               transform: `scale(${scale})`,
               backgroundImage: mediaType === 'image' ? `url(${props.media.get('preview_url')})` : undefined,
-              backgroundPosition: `${x}% ${y}%` }}
+              backgroundPosition: typeof x === 'number' && typeof y === 'number' ? `${x}% ${y}%` : undefined }}
           >
             <div className={classNames('compose-form__upload__actions', { active })}>
               <IconButton

From 07ce1b4873dd34ec25a60fe424814899e2cb9e52 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Tue, 31 May 2022 15:03:41 +0000
Subject: [PATCH 10/12] Apply 2 suggestion(s) to 1 file(s)

---
 .../features/compose/components/privacy_dropdown.tsx        | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/features/compose/components/privacy_dropdown.tsx b/app/soapbox/features/compose/components/privacy_dropdown.tsx
index 1042320f2..660207959 100644
--- a/app/soapbox/features/compose/components/privacy_dropdown.tsx
+++ b/app/soapbox/features/compose/components/privacy_dropdown.tsx
@@ -39,7 +39,7 @@ const PrivacyDropdownMenu: React.FC<IPrivacyDropdownMenu> = ({ style, items, pla
   const node = useRef<HTMLDivElement>(null);
   const focusedItem = useRef<HTMLDivElement>(null);
 
-  const [mounted, setMounted] = useState(false);
+  const [mounted, setMounted] = useState<boolean>(false);
 
   const handleDocumentClick = (e: MouseEvent | TouchEvent) => {
     if (node.current && !node.current.contains(e.target as HTMLElement)) {
@@ -49,9 +49,7 @@ const PrivacyDropdownMenu: React.FC<IPrivacyDropdownMenu> = ({ style, items, pla
 
   const handleKeyDown: React.KeyboardEventHandler = e => {
     const value = e.currentTarget.getAttribute('data-index');
-    const index = items.findIndex(item => {
-      return (item.value === value);
-    });
+    const index = items.findIndex(item => item.value === value);
     let element = null;
 
     switch (e.key) {

From bd13cba65bf3037b40823c61df250914868f1cd4 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Tue, 31 May 2022 15:04:57 +0000
Subject: [PATCH 11/12] Apply 1 suggestion(s) to 1 file(s)

---
 app/soapbox/features/compose/components/reply_indicator.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/soapbox/features/compose/components/reply_indicator.tsx b/app/soapbox/features/compose/components/reply_indicator.tsx
index 4a355c66d..d135bfdeb 100644
--- a/app/soapbox/features/compose/components/reply_indicator.tsx
+++ b/app/soapbox/features/compose/components/reply_indicator.tsx
@@ -18,7 +18,6 @@ const ReplyIndicator: React.FC<IReplyIndicator> = ({ status, hideActions, onCanc
     onCancel();
   };
 
-
   if (!status) {
     return null;
   }

From edcbf1f84914f99eb89f15654fc9ce348c8708e5 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 31 May 2022 10:20:03 -0500
Subject: [PATCH 12/12] PrivacyDropdownMenu: pass useEffect dependency array

---
 app/soapbox/features/compose/components/privacy_dropdown.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/features/compose/components/privacy_dropdown.tsx b/app/soapbox/features/compose/components/privacy_dropdown.tsx
index 660207959..94ebfcc09 100644
--- a/app/soapbox/features/compose/components/privacy_dropdown.tsx
+++ b/app/soapbox/features/compose/components/privacy_dropdown.tsx
@@ -108,7 +108,7 @@ const PrivacyDropdownMenu: React.FC<IPrivacyDropdownMenu> = ({ style, items, pla
       document.removeEventListener('click', handleDocumentClick, false);
       document.removeEventListener('touchend', handleDocumentClick);
     };
-  });
+  }, []);
 
   return (
     <Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>