feat: remove collection deploy and use deck

Author: peterpeterparker

studio/src/app/components/editor/publish/app-publish-done/app-publish-done.tsx

@@ -4,7 +4,6 @@ import deckStore from '../../../../stores/deck.store';
 import userStore from '../../../../stores/user.store';
 import shareStore from '../../../../stores/share.store';
 import authStore from '../../../../stores/auth.store';
-import deployStore from '../../../../stores/deploy.store';
 
 @Component({
   tag: 'app-publish-done',
@@ -59,7 +58,7 @@ export class AppPublishDone {
       return undefined;
     }
 
-    if (!deployStore.state.deploy || !deployStore.state.deploy.data) {
+    if (!deckStore.state.deck.data.github) {
       return (
         <ion-label class="published-url ion-padding ion-text-center">
           The source code of the presentation is processing <ion-spinner color="tertiary"></ion-spinner>
@@ -70,7 +69,7 @@ export class AppPublishDone {
     return (
       <ion-label class="published-url ion-padding ion-text-center">
         The source code of the presentation has been submitted to a{' '}
-        <a href={`${deployStore.state.deploy.data.github.repo.url}/pulls`} target="_blank" rel="noopener noreferrer">
+        <a href={`${deckStore.state.deck.data.github.repo.url}/pulls`} target="_blank" rel="noopener noreferrer">
           repository
         </a>{' '}
         on GitHub <ion-icon name="logo-github" aria-label="GitHub"></ion-icon>.

studio/src/app/components/editor/publish/app-publish-edit/app-publish-edit.tsx

@@ -7,10 +7,8 @@ import errorStore from '../../../../stores/error.store';
 import feedStore from '../../../../stores/feed.store';
 import apiUserStore from '../../../../stores/api.user.store';
 import authStore from '../../../../stores/auth.store';
-import deployStore from '../../../../stores/deploy.store';
 
 import {Deck} from '../../../../models/data/deck';
-import {Deploy} from '../../../../models/data/deploy';
 
 import {Resources} from '../../../../utils/core/resources';
 
@@ -63,7 +61,7 @@ export class AppPublishEdit {
 
   private publishService: PublishService;
 
-  private destroyDeployListener;
+  private destroyDeckListener;
 
   constructor() {
     this.deckService = DeckService.getInstance();
@@ -78,12 +76,11 @@ export class AppPublishEdit {
   async componentWillLoad() {
     await this.init();
 
-    this.destroyDeployListener = deployStore.onChange('deploy', async (_deploy: Deploy | undefined) => {
+    this.destroyDeckListener = deckStore.onChange('deck', async (deck: Deck | undefined) => {
+      // Deck is maybe updating while we have set it to true manually
       this.publishing =
-        deployStore.state.deploy &&
-        deployStore.state.deploy.data &&
-        deployStore.state.deploy.data.api &&
-        (deployStore.state.deploy.data.api.status === 'scheduled' || deployStore.state.deploy.data.api.status === 'failure');
+        this.publishing ||
+        (deck.data.deploy && deck.data.deploy.api && (deck.data.deploy.api.status === 'scheduled' || deck.data.deploy.api.status === 'failure'));
     });
   }
 
@@ -92,8 +89,8 @@ export class AppPublishEdit {
   }
 
   disconnectedCallback() {
-    if (this.destroyDeployListener) {
-      this.destroyDeployListener();
+    if (this.destroyDeckListener) {
+      this.destroyDeckListener();
     }
   }
 
@@ -190,29 +187,25 @@ export class AppPublishEdit {
   }
 
   private onSuccessfulPublish() {
-    const destroyDeploySuccessfulListener = deployStore.onChange('deploy', async (deploy: Deploy | undefined) => {
-      if (deploy && deploy.data && deploy.data.api && deploy.data.api.status === 'successful') {
-        destroyDeploySuccessfulListener();
+    const currentDeck: Deck = {...deckStore.state.deck};
+
+    const destroyDeckDeployListener = deckStore.onChange('deck', async (deck: Deck | undefined) => {
+      if (deck && deck.data && deck.data.deploy && deck.data.deploy.api && deck.data.deploy.api.status === 'successful') {
+        destroyDeckDeployListener();
 
-        await this.delayRefreshDeck();
+        // In case the user would have browse the feed before, reset it to fetch is updated or new presentation
+        feedStore.reset();
+
+        await this.delayNavigation(currentDeck.data.api_id !== deckStore.state.deck.data.api_id);
       }
     });
   }
 
   // Even if we fixed the delay to publish to Cloudfare CDN (#195), sometimes if too quick, the presentation will not be correctly published
   // Therefore, to avoid such problem, we add a bit of delay in the process but only for the first publish
-  private async delayRefreshDeck() {
+  private async delayNavigation(newApiId: boolean) {
     this.progress = 0;
 
-    const currentDeck: Deck = {...deckStore.state.deck};
-
-    await this.publishService.refreshDeck(currentDeck.id);
-
-    // In case the user would have browse the feed before, reset it to fetch is updated or new presentation
-    feedStore.reset();
-
-    const newApiId: boolean = currentDeck.data.api_id !== deckStore.state.deck.data.api_id;
-
     const interval = setInterval(
       () => {
         this.progress += 0.1;
@@ -522,7 +515,7 @@ export class AppPublishEdit {
   }
 
   private renderGitHubText() {
-    if (!deployStore.state.deploy || !deployStore.state.deploy.data) {
+    if (!deckStore.state.deck || !deckStore.state.deck.data || !deckStore.state.deck.data.github) {
       return <p class="meta-text">Push the source code of the presentation to a new public repository of your GitHub account?</p>;
     }
 

studio/src/app/modals/editor/app-publish/app-publish.tsx

@@ -1,6 +1,6 @@
 import {Component, Element, Listen, h, State} from '@stencil/core';
 
-import {DeployService} from '../../../services/data/deploy/deploy.service';
+import {PublishService} from '../../../services/editor/publish/publish.service';
 
 @Component({
   tag: 'app-publish',
@@ -12,16 +12,16 @@ export class AppPublish {
   @State()
   private publishedUrl: string;
 
-  private deployService: DeployService;
+  private publishService: PublishService;
 
   private unsubscribeSnapshot: () => void | undefined;
 
   constructor() {
-    this.deployService = DeployService.getInstance();
+    this.publishService = PublishService.getInstance();
   }
 
   async componentWillLoad() {
-    this.unsubscribeSnapshot = await this.deployService.snapshot();
+    this.unsubscribeSnapshot = await this.publishService.snapshot();
   }
 
   async componentDidLoad() {

studio/src/app/models/data/deck.tsx

@@ -1,5 +1,26 @@
 import {UserSocial} from './user';
 
+export interface DeckDeployData {
+  status: 'scheduled' | 'failure' | 'successful';
+  updated_at: firebase.firestore.Timestamp;
+}
+
+export interface DeckDeploy {
+  github?: DeckDeployData;
+  api?: DeckDeployData;
+}
+
+export interface DeckGitHubRepo {
+  id: string;
+  url: string;
+  name: string;
+  nameWithOwner: string;
+}
+
+export interface DeckGitHub {
+  repo: DeckGitHubRepo;
+}
+
 export interface DeckMetaAuthor {
   name: string;
   photo_url?: string;
@@ -51,6 +72,10 @@ export interface DeckData {
 
   meta?: DeckMeta;
 
+  deploy?: DeckDeploy;
+
+  github?: DeckGitHub;
+
   clone?: DeckClone;
 
   created_at?: firebase.firestore.Timestamp;

studio/src/app/models/data/deploy.tsx

@@ -4,8 +4,9 @@ import 'firebase/auth';
 
 import deckStore from '../../../stores/deck.store';
 import userStore from '../../../stores/user.store';
+import errorStore from '../../../stores/error.store';
 
-import {Deck, DeckMetaAuthor} from '../../../models/data/deck';
+import {Deck, DeckData, DeckMetaAuthor} from '../../../models/data/deck';
 
 import {UserSocial} from '../../../models/data/user';
 
@@ -83,20 +84,6 @@ export class PublishService {
     });
   }
 
-  // Otherwise we gonna kept in memory references like firebase.firestore.FieldValue.delete instead of null values
-  refreshDeck(deckId: string): Promise<void> {
-    return new Promise<void>(async (resolve, reject) => {
-      try {
-        const freshDeck: Deck = await this.deckService.get(deckId);
-        deckStore.state.deck = {...freshDeck};
-
-        resolve();
-      } catch (err) {
-        reject(err);
-      }
-    });
-  }
-
   private updateDeckMeta(description: string, tags: string[], github: boolean): Promise<void> {
     return new Promise<void>(async (resolve, reject) => {
       try {
@@ -171,4 +158,33 @@ export class PublishService {
       }
     });
   }
+
+  snapshot(): Promise<() => void | undefined> {
+    return new Promise<() => void | undefined>((resolve) => {
+      const deck: Deck = deckStore.state.deck;
+
+      if (!deck || !deck.id) {
+        resolve(undefined);
+        return;
+      }
+
+      const firestore: firebase.firestore.Firestore = firebase.firestore();
+      const unsubscribe = firestore
+        .collection(`decks`)
+        .doc(deck.id)
+        .onSnapshot(
+          (deploySnapshot: firebase.firestore.DocumentSnapshot<DeckData>) => {
+            deckStore.state.deck = {
+              id: deploySnapshot.id,
+              data: deploySnapshot.data(),
+            };
+          },
+          (_err) => {
+            errorStore.state.error = 'Cannont retrieve the deck information.';
+          }
+        );
+
+      resolve(unsubscribe);
+    });
+  }
 }

studio/src/app/services/data/deploy/deploy.service.ts

@@ -19,4 +19,4 @@ onChange('deck', (deck: Deck | null) => {
   state.published = deck && deck.data && deck.data.meta && deck.data.meta.published ? deck.data.meta.published : false;
 });
 
-export default {state, reset};
+export default {state, onChange, reset};