From 71f46ffd226f7273d47389e4a4a894b168ae378b Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Sun, 8 Sep 2019 19:51:03 +0200
Subject: [PATCH 1/2] feat(#322): remove deck from list if deleted

---
 .../app-delete-deck-action.tsx                |  4 +-
 .../core/app-dashboard/app-dashboard.scss     | 11 -----
 .../core/app-dashboard/app-dashboard.tsx      | 47 +++++++++----------
 studio/src/components.d.ts                    |  2 +-
 4 files changed, 26 insertions(+), 38 deletions(-)

diff --git a/studio/src/app/components/core/app-delete-deck-action/app-delete-deck-action.tsx b/studio/src/app/components/core/app-delete-deck-action/app-delete-deck-action.tsx
index a56b8ccee..d23cf9c50 100644
--- a/studio/src/app/components/core/app-delete-deck-action/app-delete-deck-action.tsx
+++ b/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();
 
diff --git a/studio/src/app/pages/core/app-dashboard/app-dashboard.scss b/studio/src/app/pages/core/app-dashboard/app-dashboard.scss
index f87df8ff9..fb3073014 100644
--- a/studio/src/app/pages/core/app-dashboard/app-dashboard.scss
+++ b/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;
diff --git a/studio/src/app/pages/core/app-dashboard/app-dashboard.tsx b/studio/src/app/pages/core/app-dashboard/app-dashboard.tsx
index bb7b6d212..4e273f7f4 100644
--- a/studio/src/app/pages/core/app-dashboard/app-dashboard.tsx
+++ b/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>
-        }
-    }
-
 }
diff --git a/studio/src/components.d.ts b/studio/src/components.d.ts
index 685d68ffa..8dcd98a13 100644
--- a/studio/src/components.d.ts
+++ b/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> {

From 696a74a05689b6a59590a7a42a69d1d9bc1a423c Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Sun, 8 Sep 2019 20:07:48 +0200
Subject: [PATCH 2/2] feat(#322): remove deck from list if deleted

---
 .../app/components/core/app-menu/app-menu.tsx | 42 ++++++++++++++++++-
 1 file changed, 40 insertions(+), 2 deletions(-)

diff --git a/studio/src/app/components/core/app-menu/app-menu.tsx b/studio/src/app/components/core/app-menu/app-menu.tsx
index 8aecb9e35..acf01f323 100644
--- a/studio/src/app/components/core/app-menu/app-menu.tsx
+++ b/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>