Merge pull request #67 from contentstack/staging

Staging

Author: Amitkanswal

ui/package-lock.json

@@ -1,9 +1,9 @@
 {
   "name": "marketplace-json-editor-app-ui",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": true,
   "dependencies": {
-    "@contentstack/app-sdk": "^1.5.0",
+    "@contentstack/app-sdk": "^2.0.1",
     "@datadog/browser-rum": "^4.25.0",
     "@playwright/test": "1.25.0",
     "@types/react": "^18.2.14",

ui/package.json

@@ -1,4 +1,4 @@
-import Extension from "@contentstack/app-sdk/dist/src/extension";
+import Extension from "@contentstack/app-sdk/dist/src/uiLocation";
 import { get, isEmpty, keys } from "lodash";
 
 function getAppLocation(sdk: Extension): string {

ui/src/common/utils/function.ts

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from "react";
+import React, { useRef } from "react";
 import { JsonEditor } from "jsoneditor-react";
 import ace from "brace";
 import "brace/mode/json";
@@ -13,10 +13,6 @@ const JSONEditor: React.FC<TypeJsonProps> = function ({
 }) {
   const jsonEditorRef = useRef<JsonEditor | null>(null);
 
-  useEffect(() => {
-    jsonEditorRef?.current?.set(value);
-  }, [value]);
-
   const setRef = (instance: any) => {
     jsonEditorRef.current = instance?.jsonEditor;
   };

ui/src/components/jsoneditor/index.tsx

@@ -1,21 +1,11 @@
 import React from "react";
-import { HashRouter, Route, Routes, Navigate } from "react-router-dom";
+import { HashRouter, Route, Routes } from "react-router-dom";
 import ErrorBoundary from "../../components/ErrorBoundary";
 import ConfigScreen from "../ConfigScreen";
 import CustomField from "../CustomField";
 import "./venus.css";
 import "./styles.scss";
 
-/** HomeRedirectHandler - component to nandle redirect based on the window location pathname,
-  as react Router does not identifies pathname if the app is rendered in an iframe.
-*/
-const HomeRedirectHandler = function () {
-  if (window?.location?.pathname !== "/") {
-    return <Navigate to={{ pathname: window?.location?.pathname }} />;
-  }
-  return null;
-};
-
 
 /* App - The main app component that should be rendered */
 const App: React.FC = function () {
@@ -24,7 +14,6 @@ const App: React.FC = function () {
       <ErrorBoundary>
         <HashRouter>
           <Routes>
-            <Route path="/" element={<HomeRedirectHandler />} />
             <Route path="/config" element={<ConfigScreen />} />
             <Route path="/custom-field" element={<CustomField />} />
           </Routes>

ui/src/containers/App/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable spaced-comment */
 import React, { useEffect, useState } from "react";
 import { get } from "lodash";
 import ContentstackAppSdk from "@contentstack/app-sdk";
@@ -53,6 +54,7 @@ const CustomField: React.FC = function () {
 
         if (initialData && !isEmpty(initialData)) {
           try {
+            //@ts-ignore
             jsonVal = typeof initialData[0] === "string" ? [JSON.parse(initialData[0]?.trim()?.length ? initialData[0] : "{}")] : initialData;
           } catch (e) {
             jsonVal = [{}];

ui/src/containers/CustomField/index.tsx

@@ -4,7 +4,7 @@
  * This hook is to utilize for appSdk pulse method and its an exception for dev tools app.
  */
 import { atom, useAtom } from 'jotai';
-import Extension from '@contentstack/app-sdk/dist/src/extension';
+import Extension from '@contentstack/app-sdk/dist/src/uiLocation';
 
 export const appSdkRefAtom = atom<Extension | null>(null);
 

ui/src/hooks/useAppSdk.ts

@@ -1,6 +1,6 @@
 /* Import React modules */
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 /* Import other node modules */
 import reportWebVitals from "./reportWebVitals";
 /* Import our modules */
@@ -9,14 +9,15 @@ import App from "./containers/App";
 /* Import our CSS */
 import "./index.css";
 
-ReactDOM.render(
+const container = document.getElementById("root") as HTMLElement;
+const root = createRoot(container); // createRoot(container!) if you use TypeScript
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById("root")
+  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+reportWebVitals();