WIP <Compose> Refactor; 1000 tiny edits

2 files changed, 39 insertions, 40 deletions

diff --git a/app/javascript/flavours/glitch/features/composer/upload_form/index.js b/app/javascript/flavours/glitch/features/composer/upload_form/index.js
index ab46a3046..53b14acc7 100644
--- a/app/javascript/flavours/glitch/features/composer/upload_form/index.js
+++ b/app/javascript/flavours/glitch/features/composer/upload_form/index.js
@@ -10,45 +10,44 @@ import ComposerUploadFormProgress from './progress';
 
 //  The component.
 export default function ComposerUploadForm ({
-  active,
   intl,
   media,
   onChangeDescription,
   onRemove,
   progress,
+  uploading,
 }) {
-  const computedClass = classNames('composer--upload_form', { uploading: active });
-
-  //  We need `media` in order to be able to render.
-  if (!media) {
-    return null;
-  }
+  const computedClass = classNames('composer--upload_form', { uploading });
 
   //  The result.
   return (
     <div className={computedClass}>
-      {active ? <ComposerUploadFormProgress progress={progress} /> : null}
-      {media.map(item => (
-        <ComposerUploadFormItem
-          description={item.get('description')}
-          key={item.get('id')}
-          id={item.get('id')}
-          intl={intl}
-          preview={item.get('preview_url')}
-          onChangeDescription={onChangeDescription}
-          onRemove={onRemove}
-        />
-      ))}
+      {uploading ? <ComposerUploadFormProgress progress={progress} /> : null}
+      {media ? (
+        <div className='content'>
+          {media.map(item => (
+            <ComposerUploadFormItem
+              description={item.get('description')}
+              key={item.get('id')}
+              id={item.get('id')}
+              intl={intl}
+              preview={item.get('preview_url')}
+              onChangeDescription={onChangeDescription}
+              onRemove={onRemove}
+            />
+          ))}
+        </div>
+      ) : null}
     </div>
   );
 }
 
 //  Props.
 ComposerUploadForm.propTypes = {
-  active: PropTypes.bool,
   intl: PropTypes.object.isRequired,
   media: ImmutablePropTypes.list,
   onChangeDescription: PropTypes.func,
   onRemove: PropTypes.func,
   progress: PropTypes.number,
+  uploading: PropTypes.bool,
 };
diff --git a/app/javascript/flavours/glitch/features/composer/upload_form/item/index.js b/app/javascript/flavours/glitch/features/composer/upload_form/item/index.js
index cbec5ecd9..ec67b8ef8 100644
--- a/app/javascript/flavours/glitch/features/composer/upload_form/item/index.js
+++ b/app/javascript/flavours/glitch/features/composer/upload_form/item/index.js
@@ -31,7 +31,7 @@ const messages = defineMessages({
 const handlers = {
 
   //  On blur, we save the description for the media item.
-  blur () {
+  handleBlur () {
     const {
       id,
       onChangeDescription,
@@ -48,27 +48,27 @@ const handlers = {
 
   //  When the value of our description changes, we store it in the
   //  temp value `dirtyDescription` in our state.
-  change ({ target: { value } }) {
+  handleChange ({ target: { value } }) {
     this.setState({ dirtyDescription: value });
   },
 
   //  Records focus on the media item.
-  focus () {
+  handleFocus () {
     this.setState({ focused: true });
   },
 
   //  Records the start of a hover over the media item.
-  mouseEnter () {
+  handleMouseEnter () {
     this.setState({ hovered: true });
   },
 
   //  Records the end of a hover over the media item.
-  mouseLeave () {
+  handleMouseLeave () {
     this.setState({ hovered: false });
   },
 
   //  Removes the media item.
-  remove () {
+  handleRemove () {
     const {
       id,
       onRemove,
@@ -85,7 +85,7 @@ export default class ComposerUploadFormItem extends React.PureComponent {
   //  Constructor.
   constructor (props) {
     super(props);
-    assignHandlers(handlers);
+    assignHandlers(this, handlers);
     this.state = {
       hovered: false,
       focused: false,
@@ -96,12 +96,12 @@ export default class ComposerUploadFormItem extends React.PureComponent {
   //  Rendering.
   render () {
     const {
-      blur,
-      change,
-      focus,
-      mouseEnter,
-      mouseLeave,
-      remove,
+      handleBlur,
+      handleChange,
+      handleFocus,
+      handleMouseEnter,
+      handleMouseLeave,
+      handleRemove,
     } = this.handlers;
     const {
       description,
@@ -119,8 +119,8 @@ export default class ComposerUploadFormItem extends React.PureComponent {
     return (
       <div
         className={computedClass}
-        onMouseEnter={mouseEnter}
-        onMouseLeave={mouseLeave}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
       >
         <Motion
           defaultStyle={{ scale: 0.8 }}
@@ -141,7 +141,7 @@ export default class ComposerUploadFormItem extends React.PureComponent {
               <IconButton
                 className='close'
                 icon='times'
-                onClick={remove}
+                onClick={handleRemove}
                 size={36}
                 title={intl.formatMessage(messages.undo)}
               />
@@ -149,9 +149,9 @@ export default class ComposerUploadFormItem extends React.PureComponent {
                 <span style={{ display: 'none' }}><FormattedMessage {...messages.description} /></span>
                 <input
                   maxLength={420}
-                  onBlur={blur}
-                  onChange={change}
-                  onFocus={focus}
+                  onBlur={handleBlur}
+                  onChange={handleChange}
+                  onFocus={handleFocus}
                   placeholder={intl.formatMessage(messages.description)}
                   type='text'
                   value={dirtyDescription || description || ''}
@@ -169,7 +169,7 @@ export default class ComposerUploadFormItem extends React.PureComponent {
 //  Props.
 ComposerUploadFormItem.propTypes = {
   description: PropTypes.string,
-  id: PropTypes.number,
+  id: PropTypes.string,
   intl: PropTypes.object.isRequired,
   onChangeDescription: PropTypes.func,
   onRemove: PropTypes.func,