Convert UploadProgress to TSX

app/soapbox/features/chats/components/chat_box.js

@@ -12,8 +12,8 @@ import {
 } from 'soapbox/actions/chats';
 import { uploadMedia } from 'soapbox/actions/media';
 import IconButton from 'soapbox/components/icon_button';
+import UploadProgress from 'soapbox/features/compose/components/upload-progress';
 import UploadButton from 'soapbox/features/compose/components/upload_button';
-import UploadProgress from 'soapbox/features/compose/components/upload_progress';
 import { truncateFilename } from 'soapbox/utils/media';
 
 import ChatMessageList from './chat_message_list';

app/soapbox/features/compose/components/upload-progress.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import spring from 'react-motion/lib/spring';
+
+import Icon from 'soapbox/components/icon';
+import { useAppSelector } from 'soapbox/hooks';
+
+import Motion from '../../ui/util/optional_motion';
+
+const UploadProgress = () => {
+  const active = useAppSelector((state) => state.compose.get('is_uploading'));
+  const progress = useAppSelector((state) => state.compose.get('progress'));
+
+  if (!active) {
+    return null;
+  }
+
+  return (
+    <div className='upload-progress'>
+      <div className='upload-progress__icon'>
+        <Icon id='upload' />
+      </div>
+
+      <div className='upload-progress__message'>
+        <FormattedMessage id='upload_progress.label' defaultMessage='Uploading…' />
+
+        <div className='upload-progress__backdrop'>
+          <Motion defaultStyle={{ width: 0 }} style={{ width: spring(progress) }}>
+            {({ width }) =>
+              <div className='upload-progress__tracker' style={{ width: `${width}%` }} />
+            }
+          </Motion>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UploadProgress;

app/soapbox/features/compose/components/upload_form.js

@@ -4,8 +4,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
 // import SensitiveButtonContainer from '../containers/sensitive_button_container';
+import UploadProgress from '../components/upload-progress';
 import UploadContainer from '../containers/upload_container';
-import UploadProgressContainer from '../containers/upload_progress_container';
 
 export default class UploadForm extends ImmutablePureComponent {
 
@@ -21,7 +21,7 @@ export default class UploadForm extends ImmutablePureComponent {
 
     return (
       <div className='compose-form__upload-wrapper'>
-        <UploadProgressContainer />
+        <UploadProgress />
 
         <div className={classes}>
           {mediaIds.map(id => (

app/soapbox/features/compose/components/upload_progress.js

@@ -1,45 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-import spring from 'react-motion/lib/spring';
-
-import Icon from 'soapbox/components/icon';
-
-import Motion from '../../ui/util/optional_motion';
-
-export default class UploadProgress extends React.PureComponent {
-
-  static propTypes = {
-    active: PropTypes.bool,
-    progress: PropTypes.number,
-  };
-
-  render() {
-    const { active, progress } = this.props;
-
-    if (!active) {
-      return null;
-    }
-
-    return (
-      <div className='upload-progress'>
-        <div className='upload-progress__icon'>
-          <Icon id='upload' />
-        </div>
-
-        <div className='upload-progress__message'>
-          <FormattedMessage id='upload_progress.label' defaultMessage='Uploading…' />
-
-          <div className='upload-progress__backdrop'>
-            <Motion defaultStyle={{ width: 0 }} style={{ width: spring(progress) }}>
-              {({ width }) =>
-                <div className='upload-progress__tracker' style={{ width: `${width}%` }} />
-              }
-            </Motion>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-}

app/soapbox/features/compose/containers/upload_progress_container.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 
-import UploadProgress from '../components/upload_progress';
+import UploadProgress from '../components/upload-progress';
 
 const mapStateToProps = state => ({
   active: state.getIn(['compose', 'is_uploading']),