[UI] Enable user to crop image before uploading

[theurbanforrest]

Look into https://github.com/DominicTobias/react-image-crop#example

[theurbanforrest]

Summary

• Created ImageCropper component as standalone. Future: can bring this in via Overlay on ThreadDynamic
• Created Sandbox component to test this on -- can also use this as a place to test new things without ruining other code
• react-image-crop works great. Able to set the required aspect ratio (16:9 , 2:3 , 1:1).

Still To Do

• Enable user to select ratio from enums: 16:9 (landscape) , 1:1 (square) , 2:3 (vertical)
• Pass in threadUid to ImageCropper via props
• Upload to Firebase Storage

[theurbanforrest]

Summary

• Solved rotation problem based on https://github.com/DominicTobias/react-image-crop/issues/181

• Needed to reference loadImage() as window.loadImage() to make it work.

[theurbanforrest]

Issue re: how to solve for image quality loss in crop. i.e. omit the image/jpeg param: https://github.com/DominicTobias/react-image-crop/issues/263

[theurbanforrest]

Summary

• Can pass in threadUid and thread to ImageCropper via props
• Can upload to Firebase Storage based on above
• Add Image CTA added to ThreadDynamic which manages state of modal visibility
• Deprecated ImageUpload - will keep in archives for future (i.e. PDF uploads)

Still To Do

• Enable user to select acceptable aspect ratios (i.e. 1:1, 2:3, 16:9)
• See if we can make modal canvas larger so users can get better image quality off giant images
• Figure out better UX for large files (i.e. 40-60 MB like our wedding pics)

[theurbanforrest]

Good enough for now... will look into the Still To Do's in the future when business requires it. This is Done!