Merge pull request #55 from contentstack/fix/json-viewer

npm i fix

Author: akashbhosale97

package-lock.json

@@ -20,6 +20,12 @@
     "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",

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

@@ -1,37 +1,40 @@
-import Stack from "../sdk/entry.d";
+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({
+  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({
+  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({
+  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) => {
-  const response = await Stack.getEntryByUrl({
+export const getPageRes = async (entryUrl: string) => {
+  const response = (await Stack.getEntryByUrl({
     contentTypeUid: "page",
     entryUrl,
     referenceFieldPath: ["page_components.from_blog.featured_blogs"],
@@ -40,28 +43,28 @@ export const getPageRes = async (entryUrl) => {
       "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({
+  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) => {
-  const response = await Stack.getEntryByUrl({
+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 renamed to src/helper/index.ts

@@ -5,7 +5,7 @@ import parse from "html-react-parser";
 
 import ArchiveRelative from "../components/archive-relative";
 import RenderComponents from "../components/render-components";
-import { getPageRes, getBlogPostRes } from "../helper/index.d";
+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";

src/pages/blog-post.tsx

@@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom";
 import ArchiveRelative from "../components/archive-relative";
 import RenderComponents from "../components/render-components";
 import BlogList from "../components/blog-list";
-import { getBlogListRes, getPageRes } from "../helper/index.d";
+import { getBlogListRes, getPageRes } from "../helper";
 import Skeleton from "react-loading-skeleton";
 import { Prop, Entry, ArchiveBlogList, BlogData } from "../typescript/pages";
 import { useLivePreviewCtx } from "../context/live-preview-context-provider";

src/pages/blog.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 
 import RenderComponents from "../components/render-components";
-import { getPageRes } from "../helper/index.d";
+import { getPageRes } from "../helper";
 import Skeleton from "react-loading-skeleton";
 import { PageEntry, Prop } from "../typescript/pages";
 import { useLivePreviewCtx } from "../context/live-preview-context-provider";

src/pages/index.tsx

@@ -1,23 +1,38 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 /* eslint-disable no-undef */
 import * as contentstack from "contentstack";
 import * as Utils from "@contentstack/utils";
 
 import ContentstackLivePreview from "@contentstack/live-preview-utils";
 
+type GetEntry = {
+  contentTypeUid: string;
+  referenceFieldPath: string[] | undefined;
+  jsonRtePath: string[] | undefined;
+};
+
+type GetEntryByUrl = {
+  entryUrl: string | undefined;
+  contentTypeUid: string;
+  referenceFieldPath: string[] | undefined;
+  jsonRtePath: string[] | undefined;
+};
+
 const Stack = contentstack.Stack({
-  api_key: process.env.REACT_APP_CONTENTSTACK_API_KEY,
-  delivery_token: process.env.REACT_APP_CONTENTSTACK_DELIVERY_TOKEN,
-  environment: process.env.REACT_APP_CONTENTSTACK_ENVIRONMENT,
-  region: process.env.REACT_APP_CONTENTSTACK_REGION
-    ? process.env.REACT_APP_CONTENTSTACK_REGION
+  api_key: `${process.env.REACT_APP_CONTENTSTACK_API_KEY}`,
+  delivery_token: `${process.env.REACT_APP_CONTENTSTACK_DELIVERY_TOKEN}`,
+  environment: `${process.env.REACT_APP_CONTENTSTACK_ENVIRONMENT}`,
+  //@ts-ignore
+  region: `${process.env.REACT_APP_CONTENTSTACK_REGION}`
+    ? `${process.env.REACT_APP_CONTENTSTACK_REGION}`
     : "us",
   live_preview: {
-    management_token: process.env.REACT_APP_CONTENTSTACK_MANAGEMENT_TOKEN
-      ? process.env.REACT_APP_CONTENTSTACK_MANAGEMENT_TOKEN
+    management_token: `${process.env.REACT_APP_CONTENTSTACK_MANAGEMENT_TOKEN}`
+      ? `${process.env.REACT_APP_CONTENTSTACK_MANAGEMENT_TOKEN}`
       : "",
     enable: true,
-    host: process.env.REACT_APP_CONTENTSTACK_API_HOST
-      ? process.env.REACT_APP_CONTENTSTACK_API_HOST
+    host: `${process.env.REACT_APP_CONTENTSTACK_API_HOST}`
+      ? `${process.env.REACT_APP_CONTENTSTACK_API_HOST}`
       : "",
   },
 });
@@ -27,21 +42,22 @@ const Stack = contentstack.Stack({
  */
 ContentstackLivePreview.init({
   enable: true,
+  //@ts-ignore
   stackSdk: Stack,
   clientUrlParams: {
-    host: process.env.REACT_APP_CONTENTSTACK_APP_HOST
-      ? process.env.REACT_APP_CONTENTSTACK_APP_HOST
+    host: `${process.env.REACT_APP_CONTENTSTACK_APP_HOST}`
+      ? `${process.env.REACT_APP_CONTENTSTACK_APP_HOST}`
       : "",
   },
   ssr: false,
 });
 
-if (process.env.REACT_APP_CONTENTSTACK_API_HOST) {
-  Stack.setHost(process.env.REACT_APP_CONTENTSTACK_API_HOST);
+if (`${process.env.REACT_APP_CONTENTSTACK_API_HOST}`) {
+  Stack.setHost(`${process.env.REACT_APP_CONTENTSTACK_API_HOST}`);
 }
 
 const renderOption = {
-  ["span"]: (node, next) => {
+  ["span"]: (node: any, next: any) => {
     return next(node.children);
   },
 };
@@ -57,7 +73,7 @@ export default {
    * @param {* Json RTE path} jsonRtePath
    *
    */
-  getEntry({ contentTypeUid, referenceFieldPath, jsonRtePath }) {
+  getEntry({ contentTypeUid, referenceFieldPath, jsonRtePath }: GetEntry) {
     return new Promise((resolve, reject) => {
       const query = Stack.ContentType(contentTypeUid).Query();
       if (referenceFieldPath) query.includeReference(referenceFieldPath);
@@ -91,7 +107,12 @@ export default {
    * @param {* Json RTE path} jsonRtePath
    * @returns
    */
-  getEntryByUrl({ contentTypeUid, entryUrl, referenceFieldPath, jsonRtePath }) {
+  getEntryByUrl({
+    contentTypeUid,
+    entryUrl,
+    referenceFieldPath,
+    jsonRtePath,
+  }: GetEntryByUrl) {
     return new Promise((resolve, reject) => {
       const blogQuery = Stack.ContentType(contentTypeUid).Query();
       if (referenceFieldPath) blogQuery.includeReference(referenceFieldPath);