From 0c336ef5895401be365b2b22db4aecdbf7f81b8a Mon Sep 17 00:00:00 2001
From: June Lara <june.k.lara@gmail.com>
Date: Wed, 12 Feb 2020 10:15:50 -0600
Subject: [PATCH] fix(aws-amplify-react): added prop onS3ImageSuccess to the
 S3Image component to have a clear sepration of concerns (#4848)

Co-authored-by: Eric Clemmons <eric@smarterspam.com>
Co-authored-by: Jordan Ranz <jordanmranz@gmail.com>
---
 .../Auth/__snapshots__/SignUp-test.tsx.snap       |  2 ++
 .../__tests__/Storage/S3Image-test.tsx            |  8 ++++++--
 .../aws-amplify-react/src/Storage/S3Image.tsx     | 15 ++++++++++++---
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/packages/aws-amplify-react/__tests__/Auth/__snapshots__/SignUp-test.tsx.snap b/packages/aws-amplify-react/__tests__/Auth/__snapshots__/SignUp-test.tsx.snap
index d14da4a9faf..260c756e073 100644
--- a/packages/aws-amplify-react/__tests__/Auth/__snapshots__/SignUp-test.tsx.snap
+++ b/packages/aws-amplify-react/__tests__/Auth/__snapshots__/SignUp-test.tsx.snap
@@ -4453,6 +4453,7 @@ exports[`signUp with signUpConfig render correctly with authState signUp 1`] = `
     >
       <Component
         data-test="sign-up-create-account-button"
+        disabled={false}
         onClick={[Function]}
         theme={
           Object {
@@ -8911,6 +8912,7 @@ exports[`signUp without signUpConfig prop normal case render correctly with auth
     >
       <Component
         data-test="sign-up-create-account-button"
+        disabled={false}
         onClick={[Function]}
         theme={
           Object {
diff --git a/packages/aws-amplify-react/__tests__/Storage/S3Image-test.tsx b/packages/aws-amplify-react/__tests__/Storage/S3Image-test.tsx
index a30b5d05c08..3d01eb323b0 100644
--- a/packages/aws-amplify-react/__tests__/Storage/S3Image-test.tsx
+++ b/packages/aws-amplify-react/__tests__/Storage/S3Image-test.tsx
@@ -172,7 +172,10 @@ describe('S3Image', () => {
 					return;
 				});
 
-			const wrapper = shallow(<S3Image />);
+			const mockOnUploadSuccess = jest.fn();
+			const wrapper = shallow(
+				<S3Image onUploadSuccess={mockOnUploadSuccess} />
+			);
 			const s3Image = wrapper.instance();
 			wrapper.setProps({
 				imgKey: 'imgKey',
@@ -189,12 +192,13 @@ describe('S3Image', () => {
 
 			await s3Image.handlePick(data);
 
-			expect.assertions(2);
+			expect.assertions(3);
 			expect(spyon).toBeCalledWith('imgKey', 'file', {
 				contentType: 'type',
 				level: 'level',
 				track: undefined,
 			});
+			expect(mockOnUploadSuccess).toBeCalled();
 			expect(spyon2).toBeCalled();
 
 			spyon.mockClear();
diff --git a/packages/aws-amplify-react/src/Storage/S3Image.tsx b/packages/aws-amplify-react/src/Storage/S3Image.tsx
index f26164c3528..9982032b24b 100644
--- a/packages/aws-amplify-react/src/Storage/S3Image.tsx
+++ b/packages/aws-amplify-react/src/Storage/S3Image.tsx
@@ -36,6 +36,7 @@ export interface IS3ImageProps {
 	onClick?: any;
 	onError?: any;
 	onLoad?: any;
+	onUploadSuccess?: any;
 	path?: any;
 	picker?: any;
 	selected?: any;
@@ -142,9 +143,16 @@ export default class S3Image extends Component<IS3ImageProps, IS3ImageState> {
 	handlePick(data) {
 		const that = this;
 
-		const path = this.props.path || '';
-		const { imgKey, level, fileToKey, track, identityId } = this.props;
-		const { file, name, size, type } = data;
+		const {
+			imgKey,
+			level,
+			fileToKey,
+			track,
+			identityId,
+			path = '',
+			onUploadSuccess,
+		} = this.props;
+		const { file, type } = data;
 		const key = imgKey || path + calcKey(data, fileToKey);
 		if (!Storage || typeof Storage.put !== 'function') {
 			throw new Error(
@@ -159,6 +167,7 @@ export default class S3Image extends Component<IS3ImageProps, IS3ImageState> {
 			.then(data => {
 				logger.debug('handle pick data', data);
 				that.getImageSource(key, level, track, identityId);
+				if (onUploadSuccess) onUploadSuccess();
 			})
 			.catch(err => logger.debug('handle pick error', err));
 	}