update image flow modified

Author: kolosovpetro

MangoAPI.Client/src/app/components/chats/chats.component.ts

@@ -18,7 +18,6 @@ import { DeleteMessageNotification } from '../../types/models/DeleteMessageNotif
 import { firstValueFrom, Subject, takeUntil } from 'rxjs';
 import { DisplayNameColours } from 'src/app/types/enums/DisplayNameColours';
 import { DeleteMessageCommand } from 'src/app/types/requests/DeleteMessageCommand';
-import { DocumentsService } from 'src/app/services/api/documents.service';
 import ApiBaseService from 'src/app/services/api/apiBase.service';
 import { SendMessageResponse } from '../../types/responses/SendMessageResponse';
 
@@ -36,7 +35,6 @@ export class ChatsComponent implements OnInit, OnDestroy {
     private _errorNotificationService: ErrorNotificationService,
     private _router: Router,
     private _validationService: ValidationService,
-    private _documentsService: DocumentsService,
     private _apiBaseService: ApiBaseService,
     public _modalWindowStateService: ModalWindowStateService
   ) {}

MangoAPI.Client/src/app/components/settings/settings.component.html

@@ -314,7 +314,7 @@ <h5 class="mb-2">Avatar</h5>
           <span class="text-light-gray">Update profile picture</span>
         </div>
         <div class="profile-form-content">
-          <input type="file" id="File" (change)="onUpdateProfilePictureChange($event)" />
+          <input type="file" id="ProfilePicture" (change)="onUpdateProfilePictureChange($event)" />
         </div>
         <div class="profile-form-footer gap-fix">
           <button class="button-dark" (click)="clearProfilePictureFile()">Reset</button>

MangoAPI.Client/src/app/components/settings/settings.component.ts

@@ -11,10 +11,11 @@ import { ValidationService } from '../../services/messenger/validation.service';
 import { UpdateAccountInformationCommand } from '../../types/requests/UpdateAccountInformationCommand';
 import { SessionService } from '../../services/api/session.service';
 import { Event, Router } from '@angular/router';
-import { Subject, takeUntil } from 'rxjs';
+import { firstValueFrom, Subject, takeUntil } from 'rxjs';
 import { RoutingConstants } from 'src/app/types/constants/RoutingConstants';
 import { AppInfoService } from 'src/app/services/api/app-info.service';
 import { ModalWindowStateService } from 'src/app/services/states/modalWindowState.service';
+import { UpdateProfilePictureResponse } from '../../types/responses/UpdateProfilePictureResponse';
 
 @Component({
   selector: 'app-settings',
@@ -81,7 +82,7 @@ export class SettingsComponent implements OnInit, OnDestroy {
         next: (response) => {
           this.currentUser = response.user;
 
-          if (response.user.userNameChanged === false) {
+          if (!response.user.userNameChanged) {
             this.currentUser.username = '';
           }
         },
@@ -108,13 +109,13 @@ export class SettingsComponent implements OnInit, OnDestroy {
   }
 
   onOpenAvatarClick(): void {
-    this._modalWindowStateService.setIsModalWindowShowing(true)
-    this._modalWindowStateService.setPicture(this.currentUser.pictureUrl)
+    this._modalWindowStateService.setIsModalWindowShowing(true);
+    this._modalWindowStateService.setPicture(this.currentUser.pictureUrl);
   }
 
   closeModalWindowClick(): void {
-    this._modalWindowStateService.setIsModalWindowShowing(false)
-    this._modalWindowStateService.setPictureNull()
+    this._modalWindowStateService.setIsModalWindowShowing(false);
+    this._modalWindowStateService.setPictureNull();
   }
 
   onLogoutClick(): void {
@@ -187,7 +188,7 @@ export class SettingsComponent implements OnInit, OnDestroy {
     }
   }
 
-  onSaveChangesUpdateProfilePictureClick(): void {
+  async onSaveChangesUpdateProfilePictureClick() {
     const formData = new FormData();
     const validationResult = this._validationService.validatePictureFileName(this.fileName);
 
@@ -198,19 +199,17 @@ export class SettingsComponent implements OnInit, OnDestroy {
     const file = this.file as File;
     formData.append('pictureFile', file);
 
-    this._usersService
-      .updateProfilePicture(formData)
-      .pipe(takeUntil(this.componentDestroyed$))
-      .subscribe({
-        next: (response) => {
-          this.clearProfilePictureFile();
-          alert(response.message);
-          this.currentUser.pictureUrl = response.newUserPictureUrl;
-        },
-        error: (error) => {
-          this._errorNotificationService.notifyOnError(error);
-        }
-      });
+    const updateProfileImage$ = this._usersService.updateProfilePicture(formData);
+
+    try {
+      const result = await firstValueFrom<UpdateProfilePictureResponse>(updateProfileImage$);
+      alert(result.message);
+      this.currentUser.pictureUrl = result.newUserPictureUrl;
+    } catch (e: any) {
+      alert(e.error.errorMessage);
+    }
+
+    this.clearProfilePictureFile();
   }
 
   onSaveChangesChangePasswordClick(): void {
@@ -279,7 +278,14 @@ export class SettingsComponent implements OnInit, OnDestroy {
     };
   }
 
-  clearProfilePictureFile(): void {
+  clearProfilePictureFile() {
+    const fileInput = document.getElementById('ProfilePicture') as HTMLInputElement;
+
+    if (!fileInput) {
+      return;
+    }
+
+    fileInput.value = '';
     this.file = null;
     this.fileName = '';
   }