Merge pull request #323 from deckgo/improve-deck-delete

Propagate deck delete to menu and dashboard

Author: peterpeterparker

studio/src/app/components/core/app-delete-deck-action/app-delete-deck-action.tsx

@@ -18,7 +18,7 @@ export class AppDeleteDeckAction {
 
     private deckService: DeckService;
 
-    @Event() deckDeleted: EventEmitter<void>;
+    @Event() deckDeleted: EventEmitter<string>;
 
     constructor() {
         this.deckService = DeckService.getInstance();
@@ -61,7 +61,7 @@ export class AppDeleteDeckAction {
 
             await this.deckService.delete(this.deck.id);
 
-            this.deckDeleted.emit();
+            this.deckDeleted.emit(this.deck.id);
 
             await loading.dismiss();
 

studio/src/app/components/core/app-menu/app-menu.tsx

@@ -1,4 +1,4 @@
-import {Component, Element, State, h} from '@stencil/core';
+import {Component, Element, State, h, Listen} from '@stencil/core';
 
 import {Subscription} from 'rxjs';
 
@@ -104,6 +104,20 @@ export class AppMenu {
         });
     }
 
+    @Listen('deckDeleted', {target: 'window'})
+    async onDeckDeleted($event: CustomEvent) {
+        if (!$event || !$event.detail || $event.detail === undefined || $event.detail === '') {
+            return;
+        }
+
+        const deckId: string = $event.detail;
+
+        await this.removeFromDeckList(deckId);
+
+        const filter: string = await this.getCurrentFilter();
+        await this.filterDecks(filter);
+    }
+
     private updateDeckList(deck: Deck): Promise<void> {
         return new Promise<void>((resolve) => {
             if (!deck || !deck.id || !deck.data || !deck.data.name) {
@@ -135,6 +149,30 @@ export class AppMenu {
         });
     }
 
+    public removeFromDeckList(deckId: string): Promise<void> {
+        return new Promise<void>((resolve) => {
+            if (!this.decks || this.decks.length <= 0) {
+                resolve();
+                return;
+            }
+
+            const index: number = this.decks.findIndex((filteredDeck: Deck) => {
+                return filteredDeck.id === deckId;
+            });
+
+            if (index < 0) {
+                resolve();
+                return;
+            }
+
+            this.decks.splice(index, 1);
+
+            this.decks = [...this.decks];
+
+            resolve();
+        });
+    }
+
     private async filterDecksOnChange(e: CustomEvent) {
         if (e && e.detail) {
             await this.filterDecks(e.detail.value);
@@ -282,7 +320,7 @@ export class AppMenu {
                 this.filteredDecks.map((deck: Deck) => {
                     const url: string = `/editor/${deck.id}`;
 
-                    return <ion-item href={url} routerDirection="root">
+                    return <ion-item href={url} routerDirection="root" key={deck.id}>
                         <ion-icon name="book" slot="start"></ion-icon>
                         <ion-label>{deck.data.name}</ion-label>
                     </ion-item>

studio/src/app/pages/core/app-dashboard/app-dashboard.scss

@@ -62,17 +62,6 @@ app-dashboard {
           height: 38vh;
         }
 
-        &.deleted:after {
-          content: "";
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          background: rgba(var(--ion-color-light-rgb), 0.8);
-          cursor: initial;
-        }
-
         app-delete-deck-action {
           position: absolute;
           top: 0;

studio/src/app/pages/core/app-dashboard/app-dashboard.tsx

@@ -19,7 +19,6 @@ interface DeckAndFirstSlide {
     slide: any;
     style: any;
     background: any;
-    deleted: boolean;
 }
 
 @Component({
@@ -101,8 +100,7 @@ export class AppDashboard {
                     deck: deck,
                     slide: element,
                     style: style,
-                    background: background,
-                    deleted: false
+                    background: background
                 });
             } catch (err) {
                 resolve(undefined);
@@ -166,10 +164,6 @@ export class AppDashboard {
             return;
         }
 
-        if (deck.deleted) {
-            return;
-        }
-
         const url: string = `/editor/${deck.deck.id}`;
 
         this.navService.navigate({
@@ -178,14 +172,30 @@ export class AppDashboard {
         });
     }
 
-    private displayDeckDeleted(deck: DeckAndFirstSlide): Promise<void> {
+    private removeDeletedDeck($event: CustomEvent): Promise<void> {
         return new Promise<void>(async (resolve) => {
-            if (!deck || !deck.deck) {
+            if (!$event || !$event.detail || $event.detail === undefined || $event.detail === '') {
+                resolve();
+                return;
+            }
+
+            const deckId: string = $event.detail;
+
+            if (!this.decks || this.decks.length < 0) {
+                resolve();
+                return;
+            }
+
+            const index: number = this.decks.findIndex((matchDeck: DeckAndFirstSlide) => {
+                return matchDeck.deck && matchDeck.deck.id === deckId
+            });
+
+            if (index < 0) {
                 resolve();
                 return;
             }
 
-            deck.deleted = true;
+            this.decks.splice(index, 1);
 
             await this.filterDecks(null);
 
@@ -216,8 +226,7 @@ export class AppDashboard {
         return <main class="ion-padding">
             <h1>Oh, hi! Good to have you.</h1>
             <p class="ion-padding-top">
-                <ion-router-link onClick={() => this.signIn()}>Sign in</ion-router-link>
-                to access your presentations.</p>
+                <ion-router-link onClick={() => this.signIn()}>Sign in</ion-router-link> to access to your presentations.</p>
         </main>
     }
 
@@ -249,12 +258,10 @@ export class AppDashboard {
     private renderDecksCards() {
         return (
             this.filteredDecks.map((deck: DeckAndFirstSlide) => {
-                const deckClass: string = `item ion-no-margin ${deck.deleted ? 'deleted' : ''}`;
-
-                return <ion-card class={deckClass} onClick={() => this.navigateDeck(deck)}>
+                return <ion-card class="item ion-no-margin" onClick={() => this.navigateDeck(deck)} key={deck.deck.id}>
                     {this.renderDeck(deck)}
 
-                    {this.renderDeckDeleteAction(deck)}
+                    <app-delete-deck-action deck={deck.deck} onDeckDeleted={($event: CustomEvent) => this.removeDeletedDeck($event)}></app-delete-deck-action>
                 </ion-card>;
             })
         );
@@ -271,12 +278,4 @@ export class AppDashboard {
         }
     }
 
-    private renderDeckDeleteAction(deck: DeckAndFirstSlide) {
-        if (!deck || deck.deleted) {
-            return undefined;
-        } else {
-            return <app-delete-deck-action deck={deck.deck} onDeckDeleted={() => this.displayDeckDeleted(deck)}></app-delete-deck-action>
-        }
-    }
-
 }

studio/src/components.d.ts

@@ -606,7 +606,7 @@ declare namespace LocalJSX {
   }
   interface AppDeleteDeckAction extends JSXBase.HTMLAttributes<HTMLAppDeleteDeckActionElement> {
     'deck'?: Deck;
-    'onDeckDeleted'?: (event: CustomEvent<void>) => void;
+    'onDeckDeleted'?: (event: CustomEvent<string>) => void;
   }
   interface AppDeveloper extends JSXBase.HTMLAttributes<HTMLAppDeveloperElement> {}
   interface AppEditor extends JSXBase.HTMLAttributes<HTMLAppEditorElement> {