fix(#243): if deck is published, delete slide in the API too

studio/src/app/components/editor/app-editor-toolbar/app-editor-toolbar.tsx

@@ -8,8 +8,6 @@ import {isFullscreen} from '@deckdeckgo/utils';
 
 import {IonControllerUtils} from '../../../utils/core/ion-controller-utils';
 
-import {Deck} from '../../../models/data/deck';
-
 import {ImageHelper} from '../../../helpers/editor/image.helper';
 
 import {ToggleSlotUtils} from '../../../utils/editor/toggle-slot.utils';
@@ -21,7 +19,6 @@ import {ImageAction} from '../../../popovers/editor/app-image/image-action';
 
 import {BusyService} from '../../../services/editor/busy/busy.service';
 import {AnonymousService} from '../../../services/editor/anonymous/anonymous.service';
-import {DeckEditorService} from '../../../services/editor/deck/deck-editor.service';
 
 @Component({
     tag: 'app-editor-toolbar',
@@ -84,16 +81,9 @@ export class AppEditorToolbar {
 
     @Event() signIn: EventEmitter<void>;
 
-    private deckEditorSubscription: Subscription;
-    private deckEditorService: DeckEditorService;
-
-    @State()
-    private deckPublished: boolean = false;
-
     constructor() {
         this.busyService = BusyService.getInstance();
         this.anonymousService = AnonymousService.getInstance();
-        this.deckEditorService = DeckEditorService.getInstance();
     }
 
     async componentWillLoad() {
@@ -104,10 +94,6 @@ export class AppEditorToolbar {
         this.moveToolbarSubscription = this.moveToolbarSubject.pipe(debounceTime(250)).subscribe(async () => {
             await this.moveToolbar();
         });
-
-        this.deckEditorSubscription = this.deckEditorService.watch().subscribe(async (deck: Deck) => {
-            this.deckPublished = deck && deck.data && deck.data.meta && deck.data.meta.published;
-        });
     }
 
     async componentDidLoad() {
@@ -123,10 +109,6 @@ export class AppEditorToolbar {
             this.moveToolbarSubscription.unsubscribe();
         }
 
-        if (this.deckEditorSubscription) {
-            this.deckEditorSubscription.unsubscribe();
-        }
-
         this.removeWindowResize();
     }
 
@@ -908,15 +890,10 @@ export class AppEditorToolbar {
     }
 
     private renderDelete() {
-        if (this.deckOrSlide && this.deckPublished) {
-            // TODO: (#243) Currently we can't delete a published slide
-            return <span style={{"margin-left": "auto"}}></span>;
-        } else {
-            return <a onClick={() => this.deleteElement()} title="Delete"
-                      class={this.deckBusy && this.deckOrSlide ? "delete disabled" : "delete"}>
-                <ion-icon name="trash"></ion-icon>
-            </a>
-        }
+        return <a onClick={() => this.deleteElement()} title="Delete"
+                  class={this.deckBusy && this.deckOrSlide ? "delete disabled" : "delete"}>
+            <ion-icon name="trash"></ion-icon>
+        </a>
     }
 
     private renderColor() {

studio/src/app/handlers/editor/events/deck/deck-events.handler.tsx

@@ -18,6 +18,7 @@ import {DeckEditorService} from '../../../../services/editor/deck/deck-editor.se
 import {AuthService} from '../../../../services/auth/auth.service';
 import {DeckService} from '../../../../services/data/deck/deck.service';
 import {SlideService} from '../../../../services/data/slide/slide.service';
+import {ApiSlideService} from '../../../../services/api/slide/api.slide.service';
 
 export class DeckEventsHandler {
 
@@ -39,6 +40,8 @@ export class DeckEventsHandler {
     private deckService: DeckService;
     private slideService: SlideService;
 
+    private apiSlideService: ApiSlideService;
+
     constructor() {
         this.errorService = ErrorService.getInstance();
         this.busyService = BusyService.getInstance();
@@ -49,6 +52,8 @@ export class DeckEventsHandler {
 
         this.deckService = DeckService.getInstance();
         this.slideService = SlideService.getInstance();
+
+        this.apiSlideService = ApiSlideService.getInstance();
     }
 
     init(el: HTMLElement): Promise<void> {
@@ -457,15 +462,24 @@ export class DeckEventsHandler {
 
                 this.deckEditorService.watch().pipe(take(1)).subscribe(async (deck: Deck) => {
                     if (deck && deck.data) {
-                        await this.slideService.delete(deck.id, slideId);
+                        const slide: Slide = await this.slideService.get(deck.id, slideId);
+
+                        if (slide && slide.data) {
+                            // 1. If needed, delete slide in the API
+                            await this.deleteApiSlide(deck, slide);
 
-                        // TODO: Ultimately should be moved in a Cloud Function
-                        // Update list of slide in the deck
-                        if (deck.data.slides && deck.data.slides.indexOf(slideId) > -1) {
-                            deck.data.slides.splice(deck.data.slides.indexOf(slideId), 1);
+                            // TODO: no rush but ultimately maybe should we move step 2. and 3. below in a cloud function?
 
-                            const updatedDeck: Deck = await this.deckService.update(deck);
-                            this.deckEditorService.next(updatedDeck);
+                            // 2. Delete the slide in Firestore
+                            await this.slideService.delete(deck.id, slideId);
+
+                            // 3. Update list of slide in the deck (in Firestore)
+                            if (deck.data.slides && deck.data.slides.indexOf(slideId) > -1) {
+                                deck.data.slides.splice(deck.data.slides.indexOf(slideId), 1);
+
+                                const updatedDeck: Deck = await this.deckService.update(deck);
+                                this.deckEditorService.next(updatedDeck);
+                            }
                         }
                     }
 
@@ -483,6 +497,28 @@ export class DeckEventsHandler {
         });
     }
 
+    private deleteApiSlide(deck: Deck, slide: Slide): Promise<void> {
+        return new Promise<void>(async (resolve, reject) => {
+            if (!deck.data.api_id || deck.data.api_id === undefined || deck.data.api_id === '') {
+                resolve();
+                return;
+            }
+
+            if (!slide.data.api_id || slide.data.api_id === undefined || slide.data.api_id === '') {
+                resolve();
+                return;
+            }
+
+            try {
+                await this.apiSlideService.delete(deck.data.api_id, slide.data.api_id);
+
+                resolve();
+            } catch (err) {
+                reject(err);
+            }
+        });
+    }
+
     private deleteSlideElement(): Promise<void> {
         return new Promise<void>(async (resolve) => {
             const deck: HTMLElement = this.el.querySelector('deckgo-deck');