Show new profile image upon upload

Author: Nick Litwin

app/index.jade

@@ -236,7 +236,6 @@ html
     script(src="settings/preferences/preferences.controller.js")
     script(src="settings/settings.controller.js")
     script(src="settings/settings.routes.js")
-    script(src="settings/update-password/update-password.controller.js")
     script(src="skill-picker/skill-picker.module.js")
     script(src="skill-picker/skill-picker.controller.js")
     script(src="skill-picker/skill-picker.routes.js")

app/services/image.service.js

@@ -3,9 +3,9 @@
 
   angular.module('tc.services').factory('ImageService', ImageService);
 
-  ImageService.$inject = ['CONSTANTS', 'ApiService', '$q', '$log', '$rootScope'];
+  ImageService.$inject = ['CONSTANTS', 'ApiService', '$q', '$log', '$rootScope', 'toaster'];
 
-  function ImageService(CONSTANTS, ApiService, $q, $log, $rootScope) {
+  function ImageService(CONSTANTS, ApiService, $q, $log, $rootScope, toaster) {
     var api = ApiService.restangularV3;
 
     var service = {
@@ -17,15 +17,16 @@
 
     function createFileRecord(S3Response) {
       return api.one('members', S3Response.userHandle).customPUT(S3Response.body, 'photo')
-      .then(function() {
-        // Show notification that upload was successful
+      .then(function(newPhotoURL) {
         $rootScope.$broadcast(CONSTANTS.EVENT_PROFILE_UPDATED);
         $log.info('Successfully made file record');
-
+        toaster.pop('success', 'Success!', 'Your profile image has been updated.');
+        return newPhotoURL;
       })
       .catch(function(err) {
         $log.info('Error in creating file record');
         $log.error(err);
+        toaster.pop('error', 'Whoops!', 'There was an error uploading your profile image. Please try again later.');
       });
     }
 
@@ -43,6 +44,7 @@
       })
       .catch(function(err) {
         $log.info('Error getting presigned url');
+        toaster.pop('error', 'Whoops!', 'There was an error uploading your profile image. Please try again later.');
         deferred.reject(err);
       });
 
@@ -70,12 +72,14 @@
           });
         } else if (status >= 400) {
           $log.error('Error uploading to S3 with status: ' + status);
+          toaster.pop('error', 'Whoops!', 'There was an error uploading your profile image. Please try again later.');
           deferred.reject(err);
         }
       };
 
       xhr.onerror = function(err) {
         $log.info('Error uploading to s3');
+        toaster.pop('error', 'Whoops!', 'There was an error uploading your profile image. Please try again later.');
         deferred.reject(err);
       }
 

app/settings/edit-profile/edit-profile.controller.js

@@ -14,7 +14,6 @@
     vm.onFileChange   = onFileChange;
     vm.updateProfile  = updateProfile;
     vm.addSkill = addSkill;
-    vm.ASSET_PREFIX = CONSTANTS.ASSET_PREFIX;
 
     activate();
 
@@ -95,7 +94,10 @@
     function onFileChange(file) {
       ImageService.getPresignedUrl(userHandle, file)
       .then(ImageService.uploadFileToS3)
-      .then(ImageService.createFileRecord);
+      .then(ImageService.createFileRecord)
+      .then(function(newPhotoURL) {
+        vm.userData.photoURL = newPhotoURL;
+      });
     }
 
     function updateProfile() {

app/settings/settings.jade

@@ -3,7 +3,6 @@
     h1 Settings
 
 .settings-container
-  
   nav
     ul
       li

app/settings/update-password/update-password.controller.js

@@ -37,14 +37,13 @@
 
 .settings-container {
   @include module-l;
+  margin: 30px auto 0;
   @media only screen and (min-width: 768px) {
     margin-top: 80px;
     padding-left: 30px;
     padding-right: 30px;
   }
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 30px;
+
   nav {
     display: flex;
     flex-direction: row;
@@ -54,12 +53,16 @@
       flex-direction: row;
       justify-content: center;
     }
+
     li {
       display: inline-block;
       margin-right: 35px;
-      @media only screen and (min-width: 768px) {
+
+      &:last-child {
+        margin-right: 0;
       }
     }
+
     a {
       @include sofia-pro-medium;
       font-size: 14px;
@@ -72,6 +75,7 @@
       }
     }
   }
+
   .active-tab {
     padding: 0 5px 6px;
     border-bottom: 4px #0096FF solid;
@@ -80,13 +84,13 @@
 
   hr {
     border-width: 1px 0 0 0;
+
     &.nav-line {
       width: 95%;
-      margin-top: 7px;
-      margin-left: auto;
-      margin-right: auto;
+      margin: 7px auto 0;
     }
   }
+
   // Common element stylings
   .button-l {
     @include button-l;