refactor: ask for confirmation before removing a playlist

src/app/home/home.component.html

@@ -23,7 +23,7 @@
                     [playlists]="playlists"
                     (playlistClicked)="getPlaylist($event)"
                     (refreshClicked)="refreshPlaylist($event)"
-                    (removeClicked)="removePlaylist($event)"
+                    (removeClicked)="removeClicked($event)"
                 >
                 </app-recent-playlists>
             </mat-tab>

src/app/home/home.component.spec.ts

@@ -1,8 +1,8 @@
 import { UploadFile } from 'ngx-uploader';
 import { PLAYLIST_PARSE, PLAYLIST_UPDATE } from './../../../ipc-commands';
-import { TranslatePipe } from '@ngx-translate/core';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MockComponent, MockModule, MockPipe } from 'ng-mocks';
+import { MockComponent, MockModule, MockPipe, MockProvider } from 'ng-mocks';
 import { HomeComponent, PlaylistMeta } from './home.component';
 import { HeaderComponent } from '../shared/components/header/header.component';
 import { RecentPlaylistsComponent } from '../home/recent-playlists/recent-playlists.component';
@@ -15,6 +15,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import { ElectronService } from '../services/electron.service';
 import { Router } from '@angular/router';
+import { DialogService } from '../services/dialog.service';
 
 class MatSnackBarStub {
     open(): void {}
@@ -36,6 +37,7 @@ export class ElectronServiceStub {
 
 describe('HomeComponent', () => {
     let component: HomeComponent;
+    let dialogService: DialogService;
     let fixture: ComponentFixture<HomeComponent>;
     let electronService: ElectronService;
     let router: Router;
@@ -60,6 +62,8 @@ describe('HomeComponent', () => {
             providers: [
                 { provide: MatSnackBar, useClass: MatSnackBarStub },
                 { provide: ElectronService, useClass: ElectronServiceStub },
+                MockProvider(DialogService),
+                MockProvider(TranslateService),
             ],
         }).compileComponents();
     });
@@ -68,6 +72,7 @@ describe('HomeComponent', () => {
         fixture = TestBed.createComponent(HomeComponent);
         component = fixture.componentInstance;
         electronService = TestBed.inject(ElectronService);
+        dialogService = TestBed.inject(DialogService);
         router = TestBed.inject(Router);
         TestBed.inject(ElectronService);
         fixture.detectChanges();
@@ -77,6 +82,13 @@ describe('HomeComponent', () => {
         expect(component).toBeTruthy();
     });
 
+    it('should open the confirmation dialog on remove icon click', () => {
+        const playlistId = '12345';
+        spyOn(dialogService, 'openConfirmDialog');
+        component.removeClicked(playlistId);
+        expect(dialogService.openConfirmDialog).toHaveBeenCalledTimes(1);
+    });
+
     it('should send an event to the main process to remove a playlist', () => {
         const playlistId = '12345';
         spyOn(electronService.ipcRenderer, 'send');

src/app/home/home.component.ts

@@ -1,3 +1,4 @@
+import { TranslateService } from '@ngx-translate/core';
 import { Component, NgZone } from '@angular/core';
 import { UploadFile } from 'ngx-uploader';
 import { ChannelStore, createChannel } from '../state';
@@ -12,6 +13,7 @@ import {
     PLAYLIST_UPDATE,
     PLAYLIST_UPDATE_RESPONSE,
 } from './../../../ipc-commands';
+import { DialogService } from './../services/dialog.service';
 
 /** Type to describe meta data of a playlist */
 export type PlaylistMeta = Pick<
@@ -86,10 +88,12 @@ export class HomeComponent {
      */
     constructor(
         private channelStore: ChannelStore,
+        private dialogService: DialogService,
         private electronService: ElectronService,
         private ngZone: NgZone,
         private router: Router,
-        private snackBar: MatSnackBar
+        private snackBar: MatSnackBar,
+        private translate: TranslateService
     ) {
         // get all playlists
         this.electronService.ipcRenderer.send('playlists-all');
@@ -177,6 +181,20 @@ export class HomeComponent {
         this.navigateToPlayer();
     }
 
+    /**
+     * Triggers on remove click
+     * @param playlistId playlist id to remove
+     */
+    removeClicked(playlistId: string): void {
+        this.dialogService.openConfirmDialog({
+            title: this.translate.instant('HOME.PLAYLISTS.REMOVE_DIALOG.TITLE'),
+            message: this.translate.instant(
+                'HOME.PLAYLISTS.REMOVE_DIALOG.MESSAGE'
+            ),
+            onConfirm: (): void => this.removePlaylist(playlistId),
+        });
+    }
+
     /**
      * Removes the provided playlist from the database
      * @param playlistId playlist id to remove

src/app/player/components/epg-list/epg-list.component.spec.ts

@@ -1,4 +1,4 @@
-import { MockComponent } from 'ng-mocks';
+import { MockComponent, MockProvider } from 'ng-mocks';
 /* eslint-disable @typescript-eslint/unbound-method */
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { TranslatePipe } from '@ngx-translate/core';
@@ -21,7 +21,6 @@ describe('EpgListComponent', () => {
     let fixture: ComponentFixture<EpgListComponent>;
     let electronService: ElectronService;
     let channelStore: ChannelStore;
-    let dialog: MatDialog;
 
     const MOCKED_PROGRAMS = {
         channel: {
@@ -48,8 +47,7 @@ describe('EpgListComponent', () => {
                 desc: [
                     {
                         lang: 'en',
-                        value:
-                            "Jordan's Queen Rania has made job creation a priority to help curb the staggering unemployment rates among youths in the Middle East.",
+                        value: "Jordan's Queen Rania has made job creation a priority to help curb the staggering unemployment rates among youths in the Middle East.",
                     },
                 ],
                 date: ['20080711'],
@@ -104,6 +102,7 @@ describe('EpgListComponent', () => {
                 ],
                 providers: [
                     { provide: ElectronService, useClass: ElectronServiceStub },
+                    MockProvider(MatDialog),
                 ],
             }).compileComponents();
         })
@@ -113,9 +112,8 @@ describe('EpgListComponent', () => {
         fixture = TestBed.createComponent(EpgListComponent);
         component = fixture.componentInstance;
         electronService = TestBed.inject(ElectronService);
-        dialog = TestBed.inject(MatDialog);
         channelStore = TestBed.inject(ChannelStore);
-        channelStore.setActiveChannel(({
+        channelStore.setActiveChannel({
             id: '',
             url: '',
             name: '',
@@ -123,7 +121,7 @@ describe('EpgListComponent', () => {
             tvg: {
                 rec: '3',
             },
-        } as unknown) as Channel);
+        } as unknown as Channel);
         fixture.detectChanges();
     });
 
@@ -141,7 +139,7 @@ describe('EpgListComponent', () => {
     });
 
     it('should handle an empty epg programs object', () => {
-        const payload = ({} as unknown) as EpgData;
+        const payload = {} as unknown as EpgData;
         component.handleEpgData({ payload });
         fixture.detectChanges();
         expect(component.timeNow).toBeFalsy();