feat(export): shoot confetti after successful export

pawcoding · Aug 15, 2024 · d94f2ee · d94f2ee
1 parent 62bbaec
commit d94f2ee
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/src/app/export/export-modal.component.spec.ts b/src/app/export/export-modal.component.spec.ts
@@ -2,6 +2,7 @@ import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule } from '@ngx-translate/core';
 import { AnalyticsService, AnalyticsServiceMock } from '../shared/data-access/analytics.service';
+import { ConfettiService, ConfettiServiceMock } from '../shared/data-access/confetti.service';
 import { ExportService, ExportServiceMock } from '../shared/data-access/export.service';
 import { ToastService, ToastServiceMock } from '../shared/data-access/toast.service';
 import { Color, Palette, Shade } from '../shared/model';
@@ -36,6 +37,10 @@ describe('ExportModalComponent', () => {
         {
           provide: AnalyticsService,
           useClass: AnalyticsServiceMock
+        },
+        {
+          provide: ConfettiService,
+          useClass: ConfettiServiceMock
         }
       ]
     }).compileComponents();

diff --git a/src/app/export/export-modal.component.ts b/src/app/export/export-modal.component.ts
@@ -5,6 +5,7 @@ import { heroArrowLeftMini, heroXMarkMini } from '@ng-icons/heroicons/mini';
 import { TranslateModule } from '@ngx-translate/core';
 import { ExportFormat } from '../shared/constants/export-format';
 import { AnalyticsService } from '../shared/data-access/analytics.service';
+import { ConfettiService } from '../shared/data-access/confetti.service';
 import { ExportService } from '../shared/data-access/export.service';
 import { ToastService } from '../shared/data-access/toast.service';
 import { TrackingEventAction, TrackingEventCategory } from '../shared/enums/tracking-event';
@@ -43,6 +44,7 @@ export class ExportModalComponent {
   private readonly _toastService = inject(ToastService);
   private readonly _exportService = inject(ExportService);
   private readonly _analyticsService = inject(AnalyticsService);
+  private readonly _confettiService = inject(ConfettiService);
 
   protected readonly palette = signal(this._data.palette);
   protected readonly state = signal(ExportModalState.FORMAT);
@@ -81,6 +83,14 @@ export class ExportModalComponent {
 
     if (success) {
       this.state.set(ExportModalState.SUCCESS);
+
+      // Shoot confetti to celebrate the successful export
+      this._confettiService.confetti([
+        {
+          particleCount: 300,
+          spread: 140
+        }
+      ]);
     } else {
       this.close();
     }