Merge pull request #305 from sharetribe/photosform-disabled-longer

EditListingPhotosForm: submit should be disabled when image upload is…

src/containers/EditListingPhotosForm/EditListingPhotosForm.js

@@ -43,6 +43,7 @@ RenderAddImage.propTypes = {
 export class EditListingPhotosFormComponent extends Component {
   constructor(props) {
     super(props);
+    this.state = { imageUploadRequested: false };
     this.onImageUploadHandler = this.onImageUploadHandler.bind(this);
     this.onSortEnd = this.onSortEnd.bind(this);
   }
@@ -56,7 +57,14 @@ export class EditListingPhotosFormComponent extends Component {
   onImageUploadHandler(event) {
     const file = event.target.files[0];
     if (file) {
-      this.props.onImageUpload({ id: `${file.name}_${Date.now()}`, file });
+      this.setState({ imageUploadRequested: true });
+      this.props.onImageUpload({ id: `${file.name}_${Date.now()}`, file })
+        .then(() => {
+          this.setState({ imageUploadRequested: false });
+        })
+        .catch(() => {
+          this.setState({ imageUploadRequested: false });
+        });
     }
   }
 
@@ -117,6 +125,8 @@ export class EditListingPhotosFormComponent extends Component {
 
     const classes = classNames(css.root, className);
 
+    const disableForm = invalid || submitting || disabled || this.state.imageUploadRequested;
+
     return (
       <form className={classes} onSubmit={handleSubmit}>
 
@@ -157,7 +167,7 @@ export class EditListingPhotosFormComponent extends Component {
         <Button
           className={css.submitButton}
           type="submit"
-          disabled={invalid || submitting || disabled}
+          disabled={disableForm}
         >
           {saveActionMsg}
         </Button>

src/containers/EditListingPhotosForm/__snapshots__/EditListingPhotosForm.test.js.snap

@@ -44,6 +44,7 @@ exports[`EditListingPhotosForm matches snapshot 1`] = `
   </p>
   <Button
     className={null}
+    disabled={false}
     rootClassName={null}
     type="submit">
     Publish listing

src/containers/SalePage/SalePage.duck.js

@@ -1,5 +1,6 @@
 import { types } from '../../util/sdkLoader';
 import { addMarketplaceEntities } from '../../ducks/marketplaceData.duck';
+import { fetchCurrentUserNotifications } from '../../ducks/user.duck';
 
 // Transition-to keys
 const TRANSITION_ACCEPT = 'transition/accept';
@@ -106,6 +107,7 @@ export const acceptSale = id =>
       .then(response => {
         dispatch(addMarketplaceEntities(response));
         dispatch(acceptSaleSuccess());
+        dispatch(fetchCurrentUserNotifications());
         return response;
       })
       .catch(e => {
@@ -123,6 +125,7 @@ export const rejectSale = id =>
       .then(response => {
         dispatch(addMarketplaceEntities(response));
         dispatch(rejectSaleSuccess());
+        dispatch(fetchCurrentUserNotifications());
         return response;
       })
       .catch(e => {

src/ducks/user.duck.js

@@ -183,7 +183,7 @@ export const fetchCurrentUserHasListings = () =>
 // Notificaiton page size is max (100 items on page)
 const NOTIFICATION_PAGE_SIZE = 100;
 
-export const fetchCurrentUserHasNotifications = () =>
+export const fetchCurrentUserNotifications = () =>
   (dispatch, getState, sdk) => {
     dispatch(fetchCurrentUserNotificationsRequest());
 
@@ -223,7 +223,7 @@ export const fetchCurrentUser = () =>
       })
       .then(() => {
         dispatch(fetchCurrentUserHasListings());
-        dispatch(fetchCurrentUserHasNotifications());
+        dispatch(fetchCurrentUserNotifications());
       })
       .catch(e => {
         // TODO: dispatch flash message

src/translations/en.json

@@ -1,5 +1,5 @@
 {
-  "AddImages.upload": "Upload",
+  "AddImages.upload": "Uploading",
   "AddImages.couldNotReadFile": "Could not read file",
   "AuthenticationPage.emailAlreadyInUse": "An account already exists with this email address. Try logging in instead.",
   "AuthenticationPage.loginFailed": "The email and password you entered did not match our records. Please double-check and try again.",
@@ -64,7 +64,7 @@
   "EditListingPhotosForm.addImagesTip": "Tip: Choose 2-3 best photos of your sauna from different angles in a good light that really show the space.",
   "EditListingPhotosForm.bankAccountNumberRequired": "You need to add a bank account number.",
   "EditListingPhotosForm.chooseImage": "+ Choose an image…",
-  "EditListingPhotosForm.createListingFailed": "reating a new sauna failed",
+  "EditListingPhotosForm.createListingFailed": "Creating a new sauna failed",
   "EditListingPhotosForm.imageRequired": "You need to add at least one image.",
   "EditListingPhotosForm.imageTypes": ".JPG, .GIF or .PNG max. 10 MB",
   "EditListingPhotosForm.imageUploadFailed.uploadOverLimit": " Image was too big. Maximum size is 10 MB.",