Merge pull request #81 from contentstack/staging

feat: update live preview implementation

Author: Deepak-Kharah

gatsby-config.ts

@@ -19,6 +19,7 @@ const {
   CONTENTSTACK_REGION,
   CONTENTSTACK_API_HOST,
   CONTENTSTACK_HOSTED_URL,
+  CONTENTSTACK_JSON_RTE_TO_HTML,
 } = process.env;
 
 const hostedUrl = CONTENTSTACK_HOSTED_URL || "http://localhost:9000";
@@ -68,6 +69,8 @@ module.exports = {
         environment: CONTENTSTACK_ENVIRONMENT,
         branch: CONTENTSTACK_BRANCH ? CONTENTSTACK_BRANCH : "main",
         cdn: `https://${cdnHost}/v3`,
+        // Specify whether to convert RTE Json to HTML
+        jsonRteToHtml: true,
         // Optional: expediteBuild set this to either true or false
         expediteBuild: true,
         // Optional: Specify true if you want to generate custom schema
@@ -89,6 +92,7 @@ module.exports = {
           "CONTENTSTACK_API_HOST",
           "CONTENTSTACK_APP_HOST",
           "CONTENTSTACK_LIVE_PREVIEW",
+          "CONTENTSTACK_JSON_RTE_TO_HTML"
         ],
       },
     },

package-lock.json

@@ -2,10 +2,10 @@
   "name": "contentstack-gatsby-starter-app",
   "private": true,
   "description": "A simple starter app build using Gatsby and Contentstack",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "author": "Contentstack",
   "dependencies": {
-    "@contentstack/live-preview-utils": "^1.3.2",
+    "@contentstack/live-preview-utils": "^1.4.0",
     "@contentstack/utils": "^1.1.1",
     "@popperjs/core": "^2.11.4",
     "bootstrap": "^5.1.3",
@@ -19,7 +19,7 @@
     "gatsby-plugin-robots-txt": "^1.8.0",
     "gatsby-plugin-sharp": "^5.10.0",
     "gatsby-plugin-sitemap": "^6.10.0",
-    "gatsby-source-contentstack": "^5.0.4",
+    "gatsby-source-contentstack": "^5.1.0",
     "gatsby-source-filesystem": "^5.10.0",
     "gatsby-transformer-sharp": "^5.10.0",
     "html-react-parser": "^1.4.14",

package.json

@@ -3,21 +3,22 @@ import React, { useState, useEffect } from "react";
 import parser from "html-react-parser";
 import { connect } from "react-redux";
 import { actionFooter } from "../store/actions/state.action";
-import { onEntryChange } from "../live-preview-sdk/index";
-import { getFooterRes, getAllEntries, jsonToHtmlParse } from "../helper/index";
+import { getCSData } from "../live-preview-sdk/index";
+import { addEditableTags, isLiveEditTagsEnabled } from "../helper/index";
 import {
   DispatchData,
-  FooterProps,
-  Links,
   Social,
   Menu,
 } from "../typescript/layout";
-import { FooterModel, PageModel } from "../common/types";
+import { FooterModel } from "../common/types";
+import ContentstackLivePreview from "@contentstack/live-preview-utils";
+import { ContentstackGatsby } from "gatsby-source-contentstack/live-preview";
 
 const queryLayout = () => {
   const data = useStaticQuery(graphql`
     query {
       contentstackFooter {
+        __typename
         title
         uid
         logo {
@@ -49,39 +50,24 @@ const queryLayout = () => {
 
 const Footer = ({ dispatch }: DispatchData) => {
   const { contentstackFooter } = queryLayout();
-  jsonToHtmlParse(contentstackFooter);
+  ContentstackGatsby.addContentTypeUidFromTypename(contentstackFooter)
+  isLiveEditTagsEnabled && addEditableTags(contentstackFooter, "footer")
   const [getFooter, setFooter] = useState(contentstackFooter);
 
-  function buildNavigation(ent: PageModel[], footer: FooterProps) {
-    let newFooter = { ...footer };
-    if (ent.length !== newFooter.navigation.link.length) {
-      ent.forEach(entry => {
-        const fFound = newFooter?.navigation.link.find(
-          (nlink: Links) => nlink.title === entry.title
-        );
-        if (!fFound) {
-          newFooter.navigation.link?.push({
-            title: entry.title,
-            href: entry.url,
-            $: entry.$,
-          });
-        }
-      });
-    }
-    return newFooter;
-  }
-
   async function getFooterData() {
-    const footerRes: FooterModel = await getFooterRes();
-    const allEntries: PageModel[] = await getAllEntries();
-    const nFooter = buildNavigation(allEntries, footerRes);
-    setFooter(nFooter);
-    dispatch(actionFooter(nFooter));
+    const footerRes: FooterModel = await getCSData.get(contentstackFooter);
+    isLiveEditTagsEnabled && addEditableTags(footerRes, "footer")
+    setFooter(footerRes);
   }
 
   useEffect(() => {
-    onEntryChange(() => getFooterData());
-  }, [onEntryChange]);
+    const callbackId = ContentstackLivePreview.onLiveEdit(getFooterData);
+    return () => ContentstackLivePreview.unsubscribeOnEntryChange(callbackId);
+  }, [])
+
+  useEffect(() => {
+    dispatch(actionFooter(getFooter));
+  }, [getFooter])
 
   return (
     <footer>

src/components/Footer.tsx

@@ -4,16 +4,19 @@ import parse from "html-react-parser";
 import { connect } from "react-redux";
 import Tooltip from "./ToolTip";
 import jsonIcon from "../images/json.svg";
-import { getHeaderRes, jsonToHtmlParse, getAllEntries } from "../helper/index";
-import { onEntryChange } from "../live-preview-sdk/index";
+import { addEditableTags, isLiveEditTagsEnabled } from "../helper/index";
+import { getCSData } from "../live-preview-sdk";
 import { actionHeader } from "../store/actions/state.action";
-import { DispatchData, HeaderProps, Menu } from "../typescript/layout";
-import { PageModel, HeaderModel } from "../common/types";
+import { DispatchData, Menu } from "../typescript/layout";
+import { HeaderModel } from "../common/types";
+import ContentstackLivePreview from "@contentstack/live-preview-utils";
+import { ContentstackGatsby } from "gatsby-source-contentstack/live-preview";
 
 const queryHeader = () => {
   const query = graphql`
     query {
       contentstackHeader {
+        __typename
         title
         uid
         logo {
@@ -41,41 +44,24 @@ const queryHeader = () => {
 
 const Header = ({ dispatch }: DispatchData) => {
   const { contentstackHeader } = queryHeader();
-  jsonToHtmlParse(contentstackHeader);
+  ContentstackGatsby.addContentTypeUidFromTypename(contentstackHeader)
+  isLiveEditTagsEnabled && addEditableTags(contentstackHeader, "header")
   const [getHeader, setHeader] = useState(contentstackHeader);
 
-  function buildNavigation(ent: PageModel[], head: HeaderProps) {
-    let newHeader = { ...head };
-    if (ent.length !== newHeader.navigation_menu.length) {
-      ent.forEach(entry => {
-        const hFound = newHeader?.navigation_menu.find(
-          navLink => navLink.label === entry.title
-        );
-        if (!hFound) {
-          newHeader.navigation_menu?.push({
-            label: entry.title,
-            page_reference: [
-              { title: entry.title, url: entry.url, $: entry.$ },
-            ],
-            $: {},
-          });
-        }
-      });
-    }
-    return newHeader;
-  }
-
   async function getHeaderData() {
-    const headerRes: HeaderModel = await getHeaderRes();
-    const allEntries: PageModel[] = await getAllEntries();
-    const nHeader = buildNavigation(allEntries, headerRes);
-    setHeader(nHeader);
-    dispatch(actionHeader(nHeader));
+    const headerRes: HeaderModel = await getCSData.get(contentstackHeader);
+    isLiveEditTagsEnabled && addEditableTags(headerRes, "header")
+    setHeader(headerRes);
   }
 
   useEffect(() => {
-    onEntryChange(() => getHeaderData());
-  }, [onEntryChange]);
+    const callbackId = ContentstackLivePreview.onLiveEdit(getHeaderData);
+    return () => ContentstackLivePreview.unsubscribeOnEntryChange(callbackId);
+  }, [])
+
+  useEffect(() => {
+    dispatch(actionHeader(getHeader));
+  }, [getHeader])
 
   return (
     <header className="header">

src/components/Header.tsx

@@ -1,102 +1,7 @@
-import Stack from "../live-preview-sdk"
 import * as Utils from "@contentstack/utils"
-import {
-  BlogPostModel,
-  PageModel,
-  HeaderModel,
-  FooterModel,
-  EntryResponse,
-} from "../common/types"
 
-const liveEdit = process.env.CONTENTSTACK_LIVE_EDIT_TAGS === "true"
+export const isLiveEditTagsEnabled = process.env.CONTENTSTACK_LIVE_EDIT_TAGS === "true";
 
-export const jsonToHtmlParse = (entry: EntryResponse) => {
-  const renderOption = {
-    ["span"]: (node: any, next: any) => next(node.children),
-  }
-
-  return Utils.jsonToHTML({
-    entry,
-    paths: [
-      "body",
-      "copyright",
-      "related_post.body",
-      "notification_bar.announcement_text",
-      "page_components.from_blog.featured_blogs.body",
-      "page_components.section_with_buckets.buckets.description",
-      "page_components.section_with_html_code.description",
-    ],
-    renderOption,
-  })
-}
-
-export const getHeaderRes = async () => {
-  const response = (await Stack.getEntry({
-    contentTypeUid: "header",
-    referenceFieldPath: ["navigation_menu.page_reference"],
-    jsonRtePath: ["notification_bar.announcement_text"],
-  })) as HeaderModel[][]
-
-  liveEdit && Utils.addEditableTags(response[0][0], "header", true)
-  return response[0][0]
-}
-
-export const getFooterRes = async () => {
-  const response = (await Stack.getEntry({
-    contentTypeUid: "footer",
-    referenceFieldPath: undefined,
-    jsonRtePath: ["copyright"],
-  })) as FooterModel[][]
-  liveEdit && Utils.addEditableTags(response[0][0], "footer", true)
-  return response[0][0]
-}
-
-export const getAllEntries = async () => {
-  const response = (await Stack.getEntry({
-    contentTypeUid: "page",
-    referenceFieldPath: undefined,
-    jsonRtePath: undefined,
-  })) as PageModel[][]
-  liveEdit &&
-    response[0].forEach(entry => Utils.addEditableTags(entry, "page", true))
-  return response[0]
-}
-
-export const getPageRes = async (entryUrl: string) => {
-  const response = (await Stack.getEntryByUrl({
-    contentTypeUid: "page",
-    entryUrl,
-    referenceFieldPath: ["page_components.from_blog.featured_blogs"],
-    jsonRtePath: [
-      "page_components.from_blog.featured_blogs.body",
-      "page_components.section_with_buckets.buckets.description",
-      "page_components.section_with_html_code.description",
-    ],
-  })) as PageModel[]
-  liveEdit && Utils.addEditableTags(response[0], "page", true)
-  return response[0]
-}
-
-export const getBlogListRes = async () => {
-  const response = (await Stack.getEntry({
-    contentTypeUid: "blog_post",
-    referenceFieldPath: ["author", "related_post"],
-    jsonRtePath: ["body"],
-  })) as BlogPostModel[][]
-  liveEdit &&
-    response[0].forEach((entry: BlogPostModel) =>
-      Utils.addEditableTags(entry, "blog_post", true)
-    )
-  return response[0]
-}
-
-export const getBlogPostRes = async (entryUrl: string) => {
-  const response = (await Stack.getEntryByUrl({
-    contentTypeUid: "blog_post",
-    entryUrl,
-    referenceFieldPath: ["author", "related_post"],
-    jsonRtePath: ["body", "related_post.body"],
-  })) as BlogPostModel[]
-  liveEdit && Utils.addEditableTags(response[0], "blog_post", true)
-  return response[0]
+export const addEditableTags = (entry: any, contentTypeUid: string, locale?: string) => {
+  Utils.addEditableTags(entry, contentTypeUid, true, locale)
 }