fix: save published data offline (#1442)

Signed-off-by: peterpeterparker <[email protected]>

Author: peterpeterparker

providers/ic/src/providers/publish/publish.ic.ts

@@ -3,11 +3,11 @@ import {Deck, DeckPublish, Doc, DocPublish, PublishUrl} from '@deckdeckgo/editor
 import {_SERVICE as StorageBucketActor} from '../../canisters/storage/storage.did';
 
 import {BucketActor} from '../../utils/manager.utils';
-import {publishDeck} from '../../utils/publish.deck.utils';
+import {emitDeckPublished, publishDeck} from '../../utils/publish.deck.utils';
 import {uploadResources} from '../../utils/publish.resources.utils';
 import {publishOverview} from '../../utils/publish.overview.utils';
 import {getStorageActor} from '../../utils/storage.utils';
-import {publishDoc} from '../../utils/publish.doc.utils';
+import {emitDocPublished, publishDoc} from '../../utils/publish.doc.utils';
 
 export const deckPublish: DeckPublish = async ({deck}: {deck: Deck; config: Record<string, string>}): Promise<Deck> => {
   await uploadResources({meta: deck.data.meta});
@@ -16,6 +16,8 @@ export const deckPublish: DeckPublish = async ({deck}: {deck: Deck; config: Reco
 
   await publishOverview({storageUpload, publishData, dataId: updatedDeck.id});
 
+  emitDeckPublished(deck);
+
   return updatedDeck;
 };
 
@@ -26,6 +28,8 @@ export const docPublish: DocPublish = async ({doc}: {doc: Doc}): Promise<Doc> =>
 
   await publishOverview({storageUpload, publishData, dataId: updatedDoc.id});
 
+  emitDocPublished(doc);
+
   return updatedDoc;
 };
 

providers/ic/src/utils/publish.deck.utils.ts

@@ -28,9 +28,6 @@ export const publishDeck = async ({
   // 5. Upload
   await uploadSocialImage({storageUpload, publishData});
 
-  // 6. Tells the snapshot the process is over
-  emitDeckPublished(deck);
-
   return {
     storageUpload,
     publishData,
@@ -54,7 +51,7 @@ const initDeckIndexHTML = async ({deck}: {deck: Deck}): Promise<{html: string; p
   };
 };
 
-const emitDeckPublished = (deck: Deck) => {
+export const emitDeckPublished = (deck: Deck) => {
   const {id, data} = deck;
 
   const deployedDeck: Deck = {

providers/ic/src/utils/publish.doc.utils.ts

@@ -28,9 +28,6 @@ export const publishDoc = async ({
   // 5. Upload
   await uploadSocialImage({storageUpload, publishData});
 
-  // 6. Tells the snapshot the process is over
-  emitDocPublished(doc);
-
   return {
     storageUpload,
     publishData,
@@ -54,7 +51,7 @@ const initDocIndexHTML = async ({doc}: {doc: Doc}): Promise<{html: string; publi
   };
 };
 
-const emitDocPublished = (doc: Doc) => {
+export const emitDocPublished = (doc: Doc) => {
   const {id, data} = doc;
 
   const deployedDoc: Doc = {

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

@@ -11,6 +11,7 @@ import {snapshotDeck} from '../../../providers/data/deck/deck.provider';
 
 import {updateSlidesQRCode} from '../../../utils/editor/qrcode.utils';
 import {snapshotDoc} from '../../../providers/data/doc/doc.provider';
+import {updatePublishedDeckOffline, updatePublishedDocOffline} from '../../../providers/publish/publish.provider';
 
 @Component({
   tag: 'app-publish',
@@ -24,7 +25,12 @@ export class AppPublish {
 
   private unsubscribeSnapshot: () => void | undefined;
 
+  private docListener;
+  private deckListener;
+
   async componentWillLoad() {
+    this.initOfflineUpdate();
+
     this.unsubscribeSnapshot = await this.initSnapshot();
   }
 
@@ -42,10 +48,23 @@ export class AppPublish {
     });
   }
 
+  /**
+   * We snapshot the doc/deck changes and have to replicate the value to the offline data to replicate the new "meta" information.
+   */
+  private initOfflineUpdate() {
+    this.docListener = editorStore.onChange('doc', updatePublishedDocOffline);
+    this.deckListener = editorStore.onChange('deck', updatePublishedDeckOffline);
+  }
+
   async componentDidLoad() {
     history.pushState({modal: true}, null);
   }
 
+  disconnectedCallback() {
+    this.docListener?.();
+    this.deckListener?.();
+  }
+
   @Listen('popstate', {target: 'window'})
   async handleHardwareBackButton(_e: PopStateEvent) {
     await this.closeModal();

studio/src/app/providers/publish/publish.provider.ts

@@ -1,8 +1,11 @@
 import {Deck, Author, UserSocial, DeckPublish, PublishUrl, Meta, Doc, DocPublish} from '@deckdeckgo/editor';
 
+import {set} from 'idb-keyval';
+
 import editorStore from '../../stores/editor.store';
 import userStore from '../../stores/user.store';
 import authStore from '../../stores/auth.store';
+import errorStore from '../../stores/error.store';
 
 import {cloud} from '../../utils/core/environment.utils';
 import {cloudProvider} from '../../utils/core/providers.utils';
@@ -67,9 +70,7 @@ const publishDoc = async (inputs: PublishInputs): Promise<void> => {
 
   const {docPublish}: {docPublish: DocPublish} = await cloudProvider<{docPublish: DocPublish}>();
 
-  const publishedDoc: Doc = await docPublish({doc});
-
-  editorStore.state.doc = {...publishedDoc};
+  await docPublish({doc});
 };
 
 const publishDeck = async (inputs: PublishInputs): Promise<void> => {
@@ -79,9 +80,7 @@ const publishDeck = async (inputs: PublishInputs): Promise<void> => {
 
   const firebaseConfig: Record<string, string> = EnvironmentConfigService.getInstance().get('firebase');
 
-  const publishedDeck: Deck = await deckPublish({deck, config: firebaseConfig});
-
-  editorStore.state.deck = {...publishedDeck};
+  await deckPublish({deck, config: firebaseConfig});
 };
 
 const updateDeckMeta = (inputs: PublishInputs): Deck => {
@@ -190,3 +189,27 @@ const updateMeta = ({inputs, meta}: {inputs: PublishInputs; meta: Meta | undefin
 
   return updateMeta;
 };
+
+export const updatePublishedDocOffline = async (doc: Doc | undefined) => {
+  if (!doc) {
+    return;
+  }
+
+  try {
+    await set(`/docs/${doc.id}`, doc);
+  } catch (err) {
+    errorStore.state.error = err;
+  }
+};
+
+export const updatePublishedDeckOffline = async (deck: Deck | undefined) => {
+  if (!deck) {
+    return;
+  }
+
+  try {
+    await set(`/decks/${deck.id}`, deck);
+  } catch (err) {
+    errorStore.state.error = err;
+  }
+};