Live-preview implementation using SDK

Author: Ashwini1997727

package-lock.json

@@ -8,6 +8,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@contentstack/live-preview-utils": "^1.0.1",
     "contentstack": "^3.15.0",
     "dotenv": "^10.0.0",
     "next": "12.0.7",

package.json

@@ -0,0 +1,19 @@
+import Contentstack from 'contentstack'
+import ContentstackLivePreview from "@contentstack/live-preview-utils";
+
+const Stack = Contentstack.Stack({ 
+  api_key: process.env.api_key,
+  delivery_token: process.env.delivery_token,
+  environment: process.env.environment,
+  live_preview: {
+    management_token: process.env.management_token,
+    enable: true,
+    host: 'api.contentstack.io'
+  }
+})
+
+  
+Stack.setHost("api.contentstack.io")
+ContentstackLivePreview.init({enable: true, stackSdk: Stack, ssr:false});
+
+export const onEntryChange = ContentstackLivePreview.onEntryChange;

pages/api/utils.js

@@ -1,7 +1,9 @@
 import Contentstack from "contentstack"
 import { useEffect, useState } from "react";
+import { onEntryChange } from "./api/utils";
 
-let apiUrl = `https://api.contentstack.io/v3/content_types/ashwini_live_preview/entries/blt8a69169a533e195a?`
+
+// let apiUrl = `https://api.contentstack.io/v3/content_types/ashwini_live_preview/entries/blt8a69169a533e195a?`
 const Stack = Contentstack.Stack(
  {
   api_key: process.env.api_key,
@@ -10,6 +12,7 @@ const Stack = Contentstack.Stack(
  }
 );
 
+
 function fetchData (contentType, entryId){
   try{
       if(entryId){
@@ -37,49 +40,20 @@ function fetchData (contentType, entryId){
 
 export default function Home(props) {
   console.log("PROPS", props)
-  const [entry, setEntry] = useState(props['single_line'])
-  // const {title, single_line, multi_line, paragraph_1, paragraph_2, paragraph_3, file} = entry
+  const [entry, setEntry] = useState(props)
+
+  const updatedData = async() => {
+    let updatedEntry = await fetchData("ashwini_live_preview", "blt8a69169a533e195a")
+    setEntry(updatedEntry)
+  }
 
   useEffect(() => {
-    //initializing live preview when the page renders for the first time.
-    window.parent.postMessage(
-      {
-          from: "live-preview",
-          type: "init",
-          data: {
-              config: {
-                  shouldReload: false,
-                  href: window.location.href,
-              },
-          },
-      },
-      "*"
-  );
-  //listening to post messages for the hash value
-  window.addEventListener("message", async (e) => {
-    console.log("Event:",e) 
-    const {data, from, type} = e.data
-    //check for change in data
-    if(data?.hasOwnProperty('hash') && from === "live-preview" && type === "client-data-send"){
-      //making an api call with the hash generated and content type uid
-      let res = await fetch(`${apiUrl}live_preview=${data['hash']}&content_type_uid=${data['content_type_uid']}`, {
-        headers: {
-          api_key: process.env.api_key,
-          access_token: process.env.delivery_token
-        }
-      })
-      let entryData = await res.json()
-      console.log("Fetching changed data", entryData)
-      //changing the states based on the data changed for that particular hash and rendering the same
-      if(entryData){
-        setEntry(entryData.entry)
-      }
-    }
-  });
+    onEntryChange(updatedData)
   }, [])
+  console.log("updated entry", entry)
   return (
     <div>
-      <h1>{entry}</h1>
+      <h1>{"HELLO WORLD"}</h1>
     </div>
   )
 }