Merge pull request #49 from contentstack/staging

merge staging into master

Author: akashbhosale97

package-lock.json

@@ -5,21 +5,27 @@
   "private": true,
   "author": "Contentstack",
   "dependencies": {
-    "@contentstack/live-preview-utils": "^1.1.0",
-    "@contentstack/utils": "^1.1.2",
-    "@types/react": "^18.0.12",
-    "contentstack": "^3.15.2",
-    "html-react-parser": "^1.4.14",
-    "moment": "^2.29.3",
+    "@contentstack/live-preview-utils": "^1.2.1",
+    "@contentstack/utils": "^1.1.3",
+    "@types/react": "^18.0.25",
+    "contentstack": "^3.15.4",
+    "html-react-parser": "^3.0.4",
+    "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-json-view": "^1.21.3",
     "react-loading-skeleton": "^3.1.0",
-    "react-router-dom": "^6.3.0",
+    "react-router-dom": "^6.4.3",
     "react-script": "^2.0.5",
-    "typescript": "^4.7.3",
+    "typescript": "^4.8.4",
     "web-vitals": "^2.1.4"
   },
+  "overrides": {
+    "react-json-view": {
+      "react": "18.2.0",
+      "react-dom": "18.2.0"
+    }
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
@@ -46,9 +52,9 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@types/react-dom": "^18.0.5",
-    "eslint": "^8.17.0",
-    "eslint-plugin-react": "^7.30.0",
+    "@types/react-dom": "^18.0.8",
+    "eslint": "^8.27.0",
+    "eslint-plugin-react": "^7.31.10",
     "react-scripts": "^5.0.1"
   }
-}
+}

package.json

@@ -1,14 +1,22 @@
-import React, { useEffect, useState } from 'react';
-import { Outlet, useNavigate } from 'react-router-dom';
-import Header from './header';
-import Footer from './footer';
-import DevTools from './devtools';
-import { getHeaderRes, getFooterRes, getAllEntries } from '../helper/index.d';
-import { onEntryChange } from '../sdk/entry.d';
-import { EntryProps, Entry, NavLink, Links, HeaderProps, FooterProps, NavmenuProps, HeadermenuProps} from "../typescript/layout";
-
-export default function Layout({ entry }: {entry: EntryProps}) {
+import React, { useEffect, useState } from "react";
+import { Outlet, useNavigate } from "react-router-dom";
+import Header from "./header";
+import Footer from "./footer";
+import DevTools from "./devtools";
+import { getHeaderRes, getFooterRes, getAllEntries } from "../helper";
+import { onEntryChange } from "../sdk/entry";
+import {
+  EntryProps,
+  Entry,
+  NavLink,
+  Links,
+  HeaderProps,
+  FooterProps,
+  NavmenuProps,
+  HeadermenuProps,
+} from "../typescript/layout";
 
+export default function Layout({ entry }: { entry: EntryProps }) {
   const history = useNavigate();
   const [getLayout, setLayout] = useState({
     header: {} as HeaderProps,
@@ -70,8 +78,8 @@ export default function Layout({ entry }: {entry: EntryProps}) {
   }, []);
 
   useEffect(() => {
-    console.error('error...', error);
-    error && history('/error');
+    console.error("error...", error);
+    error && history("/error");
   }, [error]);
 
   return (

src/components/layout.tsx

@@ -0,0 +1,27 @@
+import React, { createContext, useEffect, useState } from "react";
+import ContentstackLivePreview from "@contentstack/live-preview-utils";
+import { Props } from "./types";
+
+const LivePreviewContext = createContext<number | null>(null);
+
+const LivePreviewProvider = (props: Props) => {
+  const [lpTs, setLpTs] = useState(Date.now());
+
+  useEffect(() => {
+    ContentstackLivePreview.onEntryChange(updateContent);
+  }, []);
+
+  const updateContent = () => {
+    setLpTs(Date.now());
+  };
+
+  return (
+    <LivePreviewContext.Provider value={lpTs}>
+      {props.children}
+    </LivePreviewContext.Provider>
+  );
+};
+
+const useLivePreviewCtx = () => React.useContext(LivePreviewContext);
+
+export { LivePreviewProvider, useLivePreviewCtx };

src/context/live-preview-context-provider.tsx

@@ -0,0 +1,3 @@
+export type Props = {
+  children: React.ReactNode;
+};

src/context/types.ts

@@ -0,0 +1,70 @@
+import Stack from "../sdk/entry";
+import { addEditableTags } from "@contentstack/utils";
+
+const liveEdit = process.env.REACT_APP_CONTENTSTACK_LIVE_EDIT_TAGS === "true";
+
+export const getHeaderRes = async () => {
+  const response = (await Stack.getEntry({
+    contentTypeUid: "header",
+    referenceFieldPath: ["navigation_menu.page_reference"],
+    jsonRtePath: ["notification_bar.announcement_text"],
+  })) as any;
+  liveEdit && addEditableTags(response[0][0], "header", true);
+  return response[0][0];
+};
+
+export const getFooterRes = async () => {
+  const response = (await Stack.getEntry({
+    contentTypeUid: "footer",
+    jsonRtePath: ["copyright"],
+    referenceFieldPath: undefined,
+  })) as any;
+  liveEdit && addEditableTags(response[0][0], "footer", true);
+  return response[0][0];
+};
+
+export const getAllEntries = async () => {
+  const response = (await Stack.getEntry({
+    contentTypeUid: "page",
+    jsonRtePath: undefined,
+    referenceFieldPath: undefined,
+  })) as any;
+  liveEdit && addEditableTags(response[0], "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 any;
+  liveEdit && 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 any;
+  liveEdit && addEditableTags(response[0], "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 any;
+  liveEdit && addEditableTags(response[0], "blog_post", true);
+  return response[0];
+};

src/helper/index.d.ts

@@ -2,11 +2,14 @@ import React from "react";
 import ReactDOM from "react-dom";
 import { BrowserRouter } from "react-router-dom";
 import App from "./App";
+import { LivePreviewProvider } from "./context/live-preview-context-provider";
 import reportWebVitals from "./reportWebVitals";
 
 ReactDOM.render(
   <BrowserRouter>
-    <App />
+    <LivePreviewProvider>
+      <App />
+    </LivePreviewProvider>
   </BrowserRouter>,
   document.getElementById("root")
 );
@@ -15,4 +18,3 @@ ReactDOM.render(
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();
-

src/helper/index.ts

@@ -1,25 +1,29 @@
-import React, { useState, useEffect } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
-import moment from 'moment';
-import parse from 'html-react-parser';
+import React, { useState, useEffect } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import moment from "moment";
+import parse from "html-react-parser";
 
-import ArchiveRelative from '../components/archive-relative';
-import RenderComponents from '../components/render-components';
-import { onEntryChange } from '../sdk/entry.d';
-import { getPageRes, getBlogPostRes } from '../helper/index.d';
-import Skeleton from 'react-loading-skeleton';
+import ArchiveRelative from "../components/archive-relative";
+import RenderComponents from "../components/render-components";
+import { getPageRes, getBlogPostRes } from "../helper";
+import Skeleton from "react-loading-skeleton";
 import { Prop, Banner, Post } from "../typescript/pages";
+import { useLivePreviewCtx } from "../context/live-preview-context-provider";
 
 export default function BlogPost({ entry }: Prop) {
+  const lpTs = useLivePreviewCtx();
   const { blogId } = useParams();
   const history = useNavigate();
-  const [getEntry, setEntry] = useState({ banner: {} as Banner, post: {} as Post});
+  const [getEntry, setEntry] = useState({
+    banner: {} as Banner,
+    post: {} as Post,
+  });
   const [error, setError] = useState(false);
 
   async function fetchData() {
     try {
-      const entryUrl = blogId ? `/blog/${blogId}` : '/';
-      const banner = await getPageRes('/blog');
+      const entryUrl = blogId ? `/blog/${blogId}` : "/";
+      const banner = await getPageRes("/blog");
       const post = await getBlogPostRes(entryUrl);
       (!banner || !post) && setError(true);
       setEntry({ banner, post });
@@ -31,17 +35,9 @@ export default function BlogPost({ entry }: Prop) {
   }
 
   useEffect(() => {
-    onEntryChange(fetchData);
-  }, []);
-  useEffect(() => {
-    error && history('/404');
-  }, [error]);
-
-  useEffect(() => {
-    if (getEntry.post.url !== `/blog/${blogId}`) {
-      fetchData();
-    }
-  }, [getEntry.post, blogId]);
+    fetchData();
+    error && history("/404");
+  }, [blogId, lpTs, error]);
 
   const { post, banner } = getEntry;
   return (
@@ -61,34 +57,34 @@ export default function BlogPost({ entry }: Prop) {
       <div className='blog-container'>
         <article className='blog-detail'>
           {post.title ? (
-            <h2 {...post.$?.title as {}}>{post.title}</h2>
+            <h2 {...(post.$?.title as {})}>{post.title}</h2>
           ) : (
             <h2>
               <Skeleton />
             </h2>
           )}
           {post.date ? (
-            <p {...post.$?.date as {}}>
-              {moment(post.date).format('ddd, MMM D YYYY')},{' '}
-              <strong {...post.author[0].$?.title as {}}>
+            <p {...(post.$?.date as {})}>
+              {moment(post.date).format("ddd, MMM D YYYY")},{" "}
+              <strong {...(post.author[0].$?.title as {})}>
                 {post.author[0].title}
               </strong>
             </p>
           ) : (
             <p>
-              <Skeleton width={300}/>
+              <Skeleton width={300} />
             </p>
           )}
           {post.body ? (
-            <div {...post.$?.body as {}}>{parse(post.body)}</div>
+            <div {...(post.$?.body as {})}>{parse(post.body)}</div>
           ) : (
             <Skeleton height={800} width={600} />
           )}
         </article>
         <div className='blog-column-right'>
           <div className='related-post'>
             {Object.keys(banner).length && banner.page_components[2].widget ? (
-              <h2 {...banner?.page_components[2].widget.$?.title_h2 as {}}>
+              <h2 {...(banner?.page_components[2].widget.$?.title_h2 as {})}>
                 {banner?.page_components[2].widget.title_h2}
               </h2>
             ) : (