Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue #896 Perceived failure to save profile pic #911

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

schaferyan
Copy link
Collaborator

To disable the "Save" button until the user clicks "Done Cropping", I lifted the state variable "isCropping" up from ImageCropUploadButton to EditUserThumbnailModal, and added an _onIsCroppingChanged handler function to EditUserThumbnailModal. This appears to work as expected with no console errors unwanted side effects.

Note that VSCode complains about the type declarations and function binding in many of the .jsx files. I improved this in a few of the files I touched, but addressing this further feels like a separate issue.

@schaferyan schaferyan changed the title Crop profile pic #896 Issue #896 Perceived failure to save profile pic Oct 1, 2022
@PeterBreen PeterBreen linked an issue Oct 10, 2022 that may be closed by this pull request
Copy link
Collaborator

@PeterBreen PeterBreen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks pretty good to me, and I've done a test of cropping where the save button is disabled while the crop window is open.

I did run into an issue I'd like to know if you can replicate. Here's the steps:

  • log in, go to user profile, edit profile image
  • click upload new image, select any image but do not crop
  • click the modal's Cancel button (not "cancel" for the image crop, but the "close this entire modal" cancel at the bottom)
  • click the edit profile image icon again to re-open this cropping modal

What I get is this:
image

rather than showing my my existing profile image as I'd expect. This blank modal persists until I refresh the page. I can't replicate this on prod-mirror or staging but I can replicate it in my dev environment. Any idea what's going on there?

@schaferyan
Copy link
Collaborator Author

Thanks, when I follow those steps this is happening in my developer environment as well. I'm not sure of the cause but I will look into it!

@schaferyan
Copy link
Collaborator Author

Haven't had a chance to verify this, but I suspect it is related to the state variable croppedImageUrl in ImageCropUploadButton. Cropping, canceling cropping, or saving crop all update croppedImageUrl. The default value of the variable is an empty string, and I imagine that if the modal's cancel button is clicked the empty string is stored as the location of the thumbnail - casing the image not to be found when the modal is opened again.

@schaferyan
Copy link
Collaborator Author

@PeterBreen I believe I have solved this. The value of the state variable isCropping in EditUserThumbnailModal needed to be set to false when the modal is closed. Not sure why this wouldn't show up on prod-mirror or staging. In any case, I'm not seeing the problem in my dev environment anymore, let me if this is true for you as well!

@PeterBreen
Copy link
Collaborator

PeterBreen commented Nov 2, 2022

Sorry, I think I was unclear in my reference to prod-mirror and staging; I meant to say (but failed entirely) that it seemed to be an issue introduced with this PR

Either way I pulled the latest version of this branch, ran my list of steps and can't reproduce the error, so I think you got it fixed too. Nice, thank you!

Copy link
Collaborator

@PeterBreen PeterBreen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The only issue I had was resolved; looks good!

Copy link
Contributor

@marlonkeating marlonkeating left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changing project thumbnails fails with the following console error:
ImageCropUploadButton.jsx:123 Uncaught TypeError: this.props._onIsCroppingChanged is not a function at ImageCropUploadButton._handleFileSelection (ImageCropUploadButton.jsx:123:16) at FileReader.<anonymous> (FileSelectButton.jsx:71:18)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Perceived failure to save profile picture
3 participants