#17: refactor upload license profile ( use rxjs operators)

src/app/shared/components/upload-license-profile/upload-license-profile.component.ts

@@ -8,12 +8,7 @@ import {
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
-import {
-  MAT_DIALOG_DATA,
-  MatDialog,
-  MatDialogModule,
-  MatDialogRef,
-} from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatIconModule } from '@angular/material/icon';
 import { FormsModule } from '@angular/forms';
@@ -22,10 +17,21 @@ import { DndDirective } from '../../directives/dnd.directive';
 import { AlertService } from 'src/app/core/services/alert.service';
 import { Alert, AlertType, LicenseProfileModel } from '../../models';
 import { PrivateCatalogsService } from 'src/app/core/services/private-catalogs.service';
-import { JwtTokenService } from 'src/app/core/services/auth/jwt-token.service';
-import { Subscription } from 'rxjs';
+import {
+  Observable,
+  Subject,
+  Subscription,
+  catchError,
+  combineLatest,
+  filter,
+  finalize,
+  map,
+  of,
+  switchMap,
+  takeUntil,
+  throwError,
+} from 'rxjs';
 import { BrowserStorageService } from 'src/app/core/services/storage/browser-storage.service';
-import { ActivatedRoute } from '@angular/router';
 import { SharedDataService } from 'src/app/core/services/shared-data/shared-data.service';
 
 @Component({
@@ -50,7 +56,6 @@ export class UploadLicenseProfileComponent implements OnInit, OnDestroy {
   filename: string | null = null;
   progressBar = 0;
   modelUploadError: boolean = false;
-  loginUserID: string = '';
   solutionId: string = '';
   revisionId: string = '';
   versionId: string = '';
@@ -61,31 +66,34 @@ export class UploadLicenseProfileComponent implements OnInit, OnDestroy {
   progressBarValue = 0;
   modelUploadErrorMsg: string[] = [];
   fileSize = 0;
-  userDetail: string = '';
+  userId$: Observable<string | undefined>;
+  private onDestroy = new Subject<void>();
 
   constructor(
     private alertService: AlertService,
     private privateCatalogsService: PrivateCatalogsService,
-    private jwtTokenService: JwtTokenService,
     private browserStorageService: BrowserStorageService,
     private sharedDataService: SharedDataService,
     @Inject(MAT_DIALOG_DATA) public data: any,
-    private dialogRef: MatDialogRef<UploadLicenseProfileComponent>,
-  ) {}
+  ) {
+    this.userId$ = this.browserStorageService
+      .getUserDetails()
+      .pipe(map((details) => details?.userId));
+  }
   ngOnDestroy(): void {
+    this.onDestroy.next();
+    this.onDestroy.complete();
+
     if (this.routeSub) {
       this.routeSub.unsubscribe();
     }
-    // Unsubscribe from versionIdSubscription
     if (this.versionIdSubscription) {
       this.versionIdSubscription.unsubscribe();
     }
   }
   ngOnInit(): void {
-    const userId = this.browserStorageService.getUserDetail();
     this.solutionId = this.data.dataKey.solutionId;
     this.revisionId = this.data.dataKey.revisionId;
-    if (userId) this.userDetail = userId;
 
     // Get the initial version ID
     this.versionId = this.sharedDataService.versionId;
@@ -98,38 +106,44 @@ export class UploadLicenseProfileComponent implements OnInit, OnDestroy {
     );
   }
 
-  uploadLicenseFile() {
-    this.loginUserID = this.jwtTokenService.getUserId() ?? '';
-
-    if (
-      this.solutionId &&
-      this.loginUserID &&
-      this.revisionId &&
-      this.versionId &&
-      this.file
-    ) {
-      this.privateCatalogsService
-        .uploadFileToUrl(
-          this.loginUserID,
-          this.solutionId,
-          this.revisionId,
-          this.versionId,
-          this.file,
-        )
-        .subscribe({
-          next: (event) => {
-            if (event.type === HttpEventType.UploadProgress && event.total) {
-              this.progressBarValue = Math.round(
-                (100 * event.loaded) / event.total,
-              );
-            } else if (event.type === HttpEventType.Response) {
-              this.handleUploadSuccess(event.body);
-              this.dialogRef.close();
-            }
-          },
-          error: (error: any) => this.handleUploadError(error),
-        });
-    }
+  uploadLicenseFile(): void {
+    combineLatest([this.userId$, of(this.file)])
+      .pipe(
+        filter(([userId, file]) => !!userId && !!file),
+        switchMap(([userId, file]) => {
+          if (userId && file) {
+            return this.privateCatalogsService.uploadFileToUrl(
+              userId,
+              this.solutionId,
+              this.revisionId,
+              this.versionId,
+              file,
+            );
+          } else {
+            return throwError(() => new Error('Missing user ID or file'));
+          }
+        }),
+        takeUntil(this.onDestroy),
+        catchError((error) => {
+          console.error('Upload failed', error);
+          // Handle the error and continue
+          return of(null);
+        }),
+        finalize(() => this.resetProgress()),
+      )
+      .subscribe((event) => {
+        if (
+          event &&
+          event.type === HttpEventType.UploadProgress &&
+          event.total
+        ) {
+          this.progressBarValue = Math.round(
+            (100 * event.loaded) / event.total,
+          );
+        } else if (event && event.type === HttpEventType.Response) {
+          this.handleUploadSuccess(event.body);
+        }
+      });
   }
 
   private handleUploadSuccess(response: any) {