Issue #896 Perceived failure to save profile pic

common/components/common/FileInfo.jsx

@@ -1,3 +1,5 @@
+//@flow
+
 export type FileInfo = {|
   id: ?number,
   key: string,

common/components/common/upload/ImageCropUploadButton.jsx

@@ -15,22 +15,25 @@ type Props = {|
   iconClass: string,
   aspect: ?number,
   currentImage: FileInfo,
+  isCropping: boolean,
+  _onIsCroppingChanged: (boolean) => void,
 |};
 
 type State = {|
   s3Key: string,
+  src: string,
   croppedImageUrl: ?string,
+  crop: any
 |};
 
-let lastFileUploadUrl: string = null;
+let lastFileUploadUrl: string = "";
 
 class ImageCropUploadButton extends React.PureComponent<Props, State> {
   constructor(props): void {
     super(props);
     this.state = {
       s3Key: "",
-      src: null,
-      isCropping: false,
+      src: "",
       croppedImageUrl: "",
       crop: this.initializeCropSettings(),
     };
@@ -40,9 +43,9 @@ class ImageCropUploadButton extends React.PureComponent<Props, State> {
     const previewImage =
       this.state.croppedImageUrl ||
       (this.props.currentImage && this.props.currentImage.publicUrl);
-    return (
+      return (
       <div className="ImageCropUploadButton-root">
-        {this.state.src && this.state.isCropping && (
+        {this.state.src && this.props.isCropping && (
           <div className="ImageCropUploadButton-cropper">
             <ReactCrop
               src={this.state.src}
@@ -65,7 +68,7 @@ class ImageCropUploadButton extends React.PureComponent<Props, State> {
             </div>
           </div>
         )}
-        {!this.state.isCropping && (
+        {!this.props.isCropping && (
           <FileSelectButton
             hasImagePreview="true"
             previewImage={previewImage}
@@ -80,7 +83,8 @@ class ImageCropUploadButton extends React.PureComponent<Props, State> {
   }
 
   _handleDoneCropping(): void {
-    this.setState({ isCropping: false, crop: this.initializeCropSettings() });
+    this.setState({ crop: this.initializeCropSettings() });
+    this.props._onIsCroppingChanged(false);
     if (this.fileBlob) {
       this.launchPresignedUploadToS3(this.fileBlob);
     }
@@ -89,17 +93,16 @@ class ImageCropUploadButton extends React.PureComponent<Props, State> {
   _handleCancelCropping(): void {
     if (lastFileUploadUrl) {
       this.setState({
-        isCropping: false,
         crop: this.initializeCropSettings(),
         croppedImageUrl: lastFileUploadUrl,
       });
     } else {
       this.setState({
-        isCropping: false,
         crop: this.initializeCropSettings(),
         croppedImageUrl: this.props.currentImage,
       });
     }
+    this.props._onIsCroppingChanged(false);
   }
 
   _onCropChange(crop): void {
@@ -116,7 +119,8 @@ class ImageCropUploadButton extends React.PureComponent<Props, State> {
   }
 
   _handleFileSelection(file): void {
-    this.setState({ src: file, isCropping: true });
+    this.setState({ src: file});
+    this.props._onIsCroppingChanged(true);
   }
 
   makeClientCrop(crop) {

common/components/common/upload/S3Data.jsx

@@ -1,3 +1,5 @@
+//@flow
+
 export type S3Data = {|
   url: string,
   fields: {

common/components/componentsBySection/AboutUser/EditUserThumbnailModal.jsx

@@ -21,6 +21,7 @@ type Props = {|
 type State = {|
   showModal: boolean,
   user_thumbnail: FileInfo,
+  isCropping: boolean,
 |};
 
 type FormFields = {|
@@ -37,6 +38,7 @@ class EditUserThumbnailModal extends React.Component<Props, State> {
     this.state = {
       showModal: false,
       user_thumbnail: null,
+      isCropping: false,
     };
   }
 
@@ -49,6 +51,10 @@ class EditUserThumbnailModal extends React.Component<Props, State> {
     state.user_thumbnail = FormFieldsStore.getFormFieldValue("user_thumbnail");
     return state;
   }
+
+  setIsCropping(isCropping) {
+    this.setState({isCropping});
+  }
 
   componentWillReceiveProps(nextProps: Props): void {
     if (!this.state.showModal && nextProps.showModal) {
@@ -72,11 +78,14 @@ class EditUserThumbnailModal extends React.Component<Props, State> {
         user={this.props.user}
         fields={["user_thumbnail"]}
         onEditClose={this.props.onEditClose}
+	isInvalid={this.state.isCropping}
       >
         <ImageCropUploadFormElement
           form_id="user_thumbnail"
           buttonText="Upload Your Picture"
           aspect={1 / 1}
+          isCropping={this.state.isCropping}
+	  _onIsCroppingChanged={this.setIsCropping.bind(this)}
         />
       </EditUserModal>
     );

common/components/forms/ImageCropUploadFormElement.jsx

@@ -16,11 +16,15 @@ type Props = {|
   currentImage: FileInfo,
   onSelection: ?(FileInfo) => void,
   aspect: number,
+  isCropping: boolean,
+  _onIsCroppingChanged: (boolean) => void,
 |};
 
 type State = {|
   currentImage: FileInfo,
   initialized: boolean,
+  buttonText: string,
+  currentImage: string
 |};
 
 class ImageCropUploadFormElement extends React.Component<Props, State> {
@@ -73,6 +77,8 @@ class ImageCropUploadFormElement extends React.Component<Props, State> {
           aspect={this.props.aspect}
           buttonText={this.props.buttonText || "Upload Image"}
           onFileUpload={this._handleFileSelection.bind(this)}
+          isCropping={this.props.isCropping}
+	  _onIsCroppingChanged={this.props._onIsCroppingChanged}
         />
         {/*TODO: Use HiddenFormField component*/}
         <input