Feature/refactor snack bars (#4273)

* Refactor snack bars

apps/client/src/app/components/access-table/access-table.component.ts

@@ -14,6 +14,7 @@ import {
 } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableDataSource } from '@angular/material/table';
+import ms from 'ms';
 
 @Component({
   selector: 'gf-access-table',
@@ -64,7 +65,7 @@ export class AccessTableComponent implements OnChanges {
       '✅ ' + $localize`Link has been copied to the clipboard`,
       undefined,
       {
-        duration: 3000
+        duration: ms('3 seconds')
       }
     );
   }

apps/client/src/app/components/user-account-membership/user-account-membership.component.ts

@@ -12,11 +12,7 @@ import {
   Component,
   OnDestroy
 } from '@angular/core';
-import {
+import { MatSnackBar } from '@angular/material/snack-bar';
-  MatSnackBar,
-  MatSnackBarRef,
-  TextOnlySnackBar
-} from '@angular/material/snack-bar';
 import ms, { StringValue } from 'ms';
 import { StripeService } from 'ngx-stripe';
 import { EMPTY, Subject } from 'rxjs';
@@ -41,7 +37,6 @@ export class UserAccountMembershipComponent implements OnDestroy {
   public price: number;
   public priceId: string;
   public routerLinkPricing = ['/' + $localize`:snake-case:pricing`];
-  public snackBarRef: MatSnackBarRef<TextOnlySnackBar>;
   public trySubscriptionMail =
     'mailto:hi@ghostfol.io?Subject=Ghostfolio Premium Trial&body=Hello%0D%0DI am interested in Ghostfolio Premium. Can you please send me a coupon code to try it for some time?%0D%0DKind regards';
   public user: User;
@@ -186,22 +181,22 @@ export class UserAccountMembershipComponent implements OnDestroy {
               takeUntil(this.unsubscribeSubject)
             )
             .subscribe(() => {
-              this.snackBarRef = this.snackBar.open(
+              const snackBarRef = this.snackBar.open(
                 '✅ ' + $localize`Coupon code has been redeemed`,
                 $localize`Reload`,
                 {
-                  duration: 3000
+                  duration: ms('3 seconds')
                 }
               );
 
-              this.snackBarRef
+              snackBarRef
                 .afterDismissed()
                 .pipe(takeUntil(this.unsubscribeSubject))
                 .subscribe(() => {
                   window.location.reload();
                 });
 
-              this.snackBarRef
+              snackBarRef
                 .onAction()
                 .pipe(takeUntil(this.unsubscribeSubject))
                 .subscribe(() => {

apps/client/src/app/components/user-account-settings/user-account-settings.component.ts

@@ -25,6 +25,7 @@ import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { format, parseISO } from 'date-fns';
 import { uniq } from 'lodash';
+import ms from 'ms';
 import { EMPTY, Subject, throwError } from 'rxjs';
 import { catchError, takeUntil } from 'rxjs/operators';
 
@@ -301,7 +302,9 @@ export class UserAccountSettingsComponent implements OnDestroy, OnInit {
             this.snackBar.open(
               $localize`Oops! There was an error setting up biometric authentication.`,
               undefined,
-              { duration: 3000 }
+              {
+                duration: ms('3 seconds')
+              }
             );
 
             return throwError(() => {

apps/client/src/app/core/http-response.interceptor.ts

@@ -19,6 +19,7 @@ import {
 } from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
 import { StatusCodes } from 'http-status-codes';
+import ms from 'ms';
 import { Observable, throwError } from 'rxjs';
 import { catchError, tap } from 'rxjs/operators';
 
@@ -54,13 +55,17 @@ export class HttpResponseInterceptor implements HttpInterceptor {
                   ' ' +
                   $localize`Please try again later.`,
                 undefined,
-                { duration: 6000 }
+                {
+                  duration: ms('6 seconds')
+                }
               );
             } else if (!error.url.includes('/auth')) {
               this.snackBarRef = this.snackBar.open(
                 $localize`This action is not allowed.`,
                 undefined,
-                { duration: 6000 }
+                {
+                  duration: ms('6 seconds')
+                }
               );
             }
 
@@ -79,7 +84,9 @@ export class HttpResponseInterceptor implements HttpInterceptor {
                 ' ' +
                 $localize`Please try again later.`,
               $localize`Okay`,
-              { duration: 6000 }
+              {
+                duration: ms('6 seconds')
+              }
             );
 
             this.snackBarRef.afterDismissed().subscribe(() => {

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.component.ts

@@ -23,6 +23,7 @@ import { MatStepper } from '@angular/material/stepper';
 import { MatTableDataSource } from '@angular/material/table';
 import { AssetClass } from '@prisma/client';
 import { isArray, sortBy } from 'lodash';
+import ms from 'ms';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject, takeUntil } from 'rxjs';
 
@@ -133,7 +134,7 @@ export class ImportActivitiesDialog implements OnDestroy {
         '✅ ' + $localize`Import has been completed`,
         undefined,
         {
-          duration: 3000
+          duration: ms('3 seconds')
         }
       );
     } catch (error) {
@@ -142,7 +143,9 @@ export class ImportActivitiesDialog implements OnDestroy {
           ' ' +
           $localize`Please try again later.`,
         $localize`Okay`,
-        { duration: 3000 }
+        {
+          duration: ms('3 seconds')
+        }
       );
     } finally {
       this.dialogRef.close();

libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor.component.ts

@@ -261,7 +261,9 @@ export class GfHistoricalMarketDataEditorComponent
       this.snackBar.open(
         $localize`Oops! Could not parse historical data.`,
         undefined,
-        { duration: ms('3 seconds') }
+        {
+          duration: ms('3 seconds')
+        }
       );
     }
   }