Merge pull request #3 from episerver/user/base/fix-preview-update

Author: barteksekula

src/components/base/VisualBuilderComponent.tsx

@@ -1,8 +1,9 @@
-import React, { FC } from 'react'
+import React, { FC, useEffect } from 'react'
 import { useQuery } from '@apollo/client'
 
 import { graphql } from '@/graphql'
 import CompositionNodeComponent from './CompositionNodeComponent'
+import { onContentSaved } from "@/helpers/onContentSaved";
 
 export const VisualBuilder = graphql(/* GraphQL */ `
 query VisualBuilder($key: String, $version: String) {
@@ -55,8 +56,14 @@ const VisualBuilderComponent: FC<VisualBuilderProps> = ({ key, version }) => {
         variables.key = key;
     }
 
-    const { data } = useQuery(VisualBuilder, { variables: variables })
+    const { data, refetch } = useQuery(VisualBuilder, { variables: variables });
 
+    useEffect(() => {
+        onContentSaved(_ => {
+            refetch();
+        })
+    }, []);
+    
     const experiences = data?._Experience?.items;
     if (!experiences) {
         return null;

src/helpers/onContentSaved.ts

@@ -0,0 +1,39 @@
+interface PropertySaved {
+    name: string;
+    successful: boolean;
+}
+
+interface ContentSavedEventArgs {
+    contentLink: string;
+    previewUrl: string;
+    isIndexed: boolean;
+    properties: PropertySaved[];
+    parentId?: string;
+    sectionId?: string;
+}
+
+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 )) {
+    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);
+    }
+}

src/hooks/useSimpleReloader.ts

@@ -1,11 +1,9 @@
 import VisualBuilderComponent from "@/components/base/VisualBuilderComponent";
 import { Inter } from "next/font/google";
-import useSimpleReloader from "@/hooks/useSimpleReloader";
 
 const inter = Inter({ subsets: ["latin"] });
 
 export default function Home() {
-    useSimpleReloader();
     let version: string | undefined;
     let key: string | undefined;