From 81b61186c7da50faff82fa1e23d748233bb6dfda Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Fri, 8 Sep 2017 18:26:42 +0300
Subject: [PATCH] ProfileSettings uses transient user after uploading avatar

---
 .../ProfileSettingsForm/ProfileSettingsForm.js      |  4 +++-
 .../ProfileSettingsPage/ProfileSettingsPage.duck.js | 13 ++++++++-----
 .../ProfileSettingsPage/ProfileSettingsPage.js      |  1 +
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/containers/ProfileSettingsForm/ProfileSettingsForm.js b/src/containers/ProfileSettingsForm/ProfileSettingsForm.js
index c733870d..7a8dce18 100644
--- a/src/containers/ProfileSettingsForm/ProfileSettingsForm.js
+++ b/src/containers/ProfileSettingsForm/ProfileSettingsForm.js
@@ -109,6 +109,8 @@ const ProfileSettingsFormComponent = props => {
 
   const hasUploadError = !!uploadImageError && !uploadInProgress;
   const errorClasses = classNames({ [css.avatarUploadError]: hasUploadError });
+  const transientUserProfileImage = profileImage.uploadedImage || user.profileImage;
+  const transientUser = { ...user, profileImage: transientUserProfileImage };
   const avatarImage = uploadInProgress && profileImage.file
     ? <ImageFromFile
         id={profileImage.id}
@@ -119,7 +121,7 @@ const ProfileSettingsFormComponent = props => {
       >
         {uploadingOverlay}
       </ImageFromFile>
-    : <Avatar className={errorClasses} user={user} />;
+    : <Avatar className={errorClasses} user={transientUser} />;
 
   const chooseAvatarLabel = profileImage.imageId || (uploadInProgress && profileImage.file)
     ? <div className={css.avatarContainer}>
diff --git a/src/containers/ProfileSettingsPage/ProfileSettingsPage.duck.js b/src/containers/ProfileSettingsPage/ProfileSettingsPage.duck.js
index 751cc856..cb03f5d1 100644
--- a/src/containers/ProfileSettingsPage/ProfileSettingsPage.duck.js
+++ b/src/containers/ProfileSettingsPage/ProfileSettingsPage.duck.js
@@ -35,10 +35,10 @@ export default function reducer(state = initialState, action = {}) {
         uploadImageError: null,
       };
     case UPLOAD_IMAGE_SUCCESS: {
-      // payload: { id: 'tempId', imageId: 'some-real-id'}
-      const { id, imageId } = payload;
+      // payload: { id: 'tempId', uploadedImage }
+      const { id, uploadedImage } = payload;
       const { file } = state.image || {};
-      const image = { id, imageId, file };
+      const image = { id, imageId: uploadedImage.id, file, uploadedImage };
       return { ...state, image, uploadInProgress: false };
     }
     case UPLOAD_IMAGE_ERROR: {
@@ -113,8 +113,11 @@ export function uploadImage(actionPayload) {
     dispatch(uploadImageRequest(actionPayload));
 
     return sdk.images
-      .uploadProfileImage({ image: actionPayload.file })
-      .then(resp => dispatch(uploadImageSuccess({ data: { id, imageId: resp.data.data.id } })))
+      .uploadProfileImage({ image: actionPayload.file }, { expand: true })
+      .then(resp => {
+        const uploadedImage = resp.data.data;
+        dispatch(uploadImageSuccess({ data: { id, uploadedImage  } }))
+      })
       .catch(e => dispatch(uploadImageError({ id, error: e })));
   };
 }
diff --git a/src/containers/ProfileSettingsPage/ProfileSettingsPage.js b/src/containers/ProfileSettingsPage/ProfileSettingsPage.js
index db96f6fd..a1c46a0e 100644
--- a/src/containers/ProfileSettingsPage/ProfileSettingsPage.js
+++ b/src/containers/ProfileSettingsPage/ProfileSettingsPage.js
@@ -128,6 +128,7 @@ ProfileSettingsPageComponent.propTypes = {
     id: string,
     imageId: propTypes.uuid,
     file: object,
+    uploadedImage: propTypes.image,
   }),
   logoutError: instanceOf(Error),
   notificationCount: number,