Refactor Promised

src/components/Promised/Promised.js

@@ -3,7 +3,7 @@
  * depends on resolution of a Promise.
  *
  * How to use:
- * <Promised promise={givenPromise} onSuccess={v => <div>{v}</div>} />
+ * <Promised promise={givenPromise} renderFulfilled={v => <b>{v}</b>} renderRejected={v => <b>v</b>} />
  */
 
 import { Component, PropTypes } from 'react';
@@ -30,19 +30,21 @@ class Promised extends Component {
   }
 
   render() {
-    const { onError, onSuccess } = this.props;
-    return this.state.error ? onError(this.state.error) : onSuccess(this.state.value);
+    const { renderFulfilled, renderRejected } = this.props;
+    return this.state.error ? renderRejected(this.state.error) : renderFulfilled(this.state.value);
   }
 }
 
-Promised.defaultProps = { onError: e => e };
+Promised.defaultProps = { renderRejected: e => e };
 
-const { func, object } = PropTypes;
+const { func, shape } = PropTypes;
 
 Promised.propTypes = {
-  promise: object.isRequired,
-  onSuccess: func.isRequired,
-  onError: func,
+  promise: shape({
+    then: func.isRequired, // usually promises are detected from this single function alone
+  }).isRequired,
+  renderFulfilled: func.isRequired,
+  renderRejected: func.isRequired,
 };
 
 export default Promised;

src/containers/EditListingForm/EditListingForm.js

@@ -14,7 +14,11 @@ const TITLE_MAX_LENGTH = 60;
 const readImage = file => new Promise((resolve, reject) => {
   const reader = new FileReader();
   reader.onload = e => resolve(e.target.result);
-  reader.onerror = e => reject(new Error(`Error reading ${file.name}: ${e.target.result}`));
+  reader.onerror = e => {
+    // eslint-disable-next-line
+    console.error(`Error ${e} happened while reading ${file.name}: ${e.target.result}`);
+    reject(new Error(`Error reading ${file.name}: ${e.target.result}`));
+  };
   reader.readAsDataURL(file);
 });
 
@@ -89,16 +93,16 @@ class EditListingForm extends Component {
     this.onImageUploadHandler = this.onImageUploadHandler.bind(this);
   }
 
+  componentDidMount() {
+    this.handleInitialize();
+  }
+
   componentWillReceiveProps(nextProps) {
     if (!isEqual(this.props.images, nextProps.images)) {
       nextProps.change('images', nextProps.images);
     }
   }
 
-  componentDidMount() {
-    this.handleInitialize();
-  }
-
   onImageUploadHandler(event) {
     const file = event.target.files[0];
     if (file) {
@@ -148,7 +152,7 @@ class EditListingForm extends Component {
               <Promised
                 key={i.id}
                 promise={readImage(i.file)}
-                onSuccess={dataURL => {
+                renderFulfilled={dataURL => {
                   return (
                     <div className={css.thumbnail}>
                       <img src={dataURL} alt={encodeURIComponent(i.file.name)} className={css.thumbnailImage} />
@@ -156,6 +160,7 @@ class EditListingForm extends Component {
                     </div>
                   );
                 }}
+                renderRejected={() => <div className={css.thumbnail}>Could not read file</div>}
               />
             );
           })}

src/containers/EditListingPage/EditListingPage.js

@@ -38,10 +38,6 @@ export class EditListingPageComponent extends Component {
     }
   }
 
-  onSubmit(submitListing) {
-    return values => submitListing(values);
-  }
-
   render() {
     const { data, intl, onCreateListing, onImageUpload, page, params, type } = this.props;
     const isNew = type === 'new';
@@ -80,7 +76,7 @@ export class EditListingPageComponent extends Component {
             images={images}
             initData={initData}
             onImageUpload={onImageUpload}
-            onSubmit={this.onSubmit(onCreateListing)}
+            onSubmit={onSubmit(onCreateListing)}
             saveActionMsg={saveActionMsg}
           />
         </PageLayout>