Merge pull request #6 from episerver/user/base/simplifying-saved-subscribe

Simplify subscribing to changes

Author: barteksekula

README.md

@@ -324,10 +324,23 @@ You need to subscribe to a special event in order to know once content has been
 In this repo the subscription is already done in [onContentSaved.ts](src%2Fhelpers%2FonContentSaved.ts)
 
 ```ts
-epi.subscribe("contentSaved", function (message: ContentSavedEventArgs) {
-    // your code here
+window.addEventListener("optimizely:cms:contentSaved", (event: any) => {
+	const message = event.detail as ContentSavedEventArgs;
 });
 ```
 
+where is defined as following:
+
+```ts
+interface ContentSavedEventArgs {
+    contentLink: string;
+    previewUrl: string;
+    isIndexed: boolean;
+    properties: PropertySaved[];
+    parentId?: string;
+    sectionId?: string;
+}
+```
+
 More details here:
 https://docs.developers.optimizely.com/content-management-system/v1.0.0-CMS-SaaS/docs/enable-live-preview#refresh-the-applications-view-when-content-has-changed

src/helpers/onContentSaved.ts

@@ -26,32 +26,12 @@ function isInEditMode() {
     return !!getPreviewToken();
 }
 
-function ensureEpiLoaded() {
-    if (typeof window !== "undefined") {
-        const epi = (window as any).epi;
-        if (typeof epi !== "undefined" && epi.isEditable && epi.ready) {
-            return epi;
-        }
-    } else {
-        return null;
-    }
-}
-
 export function onContentSaved(callback: ((message: ContentSavedEventArgs) => void )) {
     if (!isInEditMode()) {
         return;
     }
-    
-    const epi = ensureEpiLoaded();
-    if (epi) {
-        console.info("successfully connected to CMS.");
-        epi.subscribe("contentSaved", function (message: ContentSavedEventArgs) {
-            callback(message);
-        });
-    } else {
-        setTimeout(() => {
-            console.info("connecting to CMS...");
-            onContentSaved(callback);
-        }, 100);
-    }
+
+    window.addEventListener("optimizely:cms:contentSaved", (event: any) => {
+        callback(event.detail);
+    });
 }