feat: bug fixes & deprecation warning

src/containers/Home/index.tsx

@@ -13,6 +13,7 @@ import { TwitterTweetEmbed } from "react-twitter-embed";
 import { CarbonAds } from "src/components/CarbonAds";
 import { Producthunt } from "src/components/Producthunt";
 import { Sponsors } from "src/components/Sponsors";
+import { defaultJson } from "src/constants/data";
 import { GoalsModal } from "src/containers/Modals/GoalsModal";
 import pkg from "../../../package.json";
 import * as Styles from "./styles";
@@ -177,7 +178,17 @@ const EmbedSection = () => (
       </Styles.StyledMinorTitle>
     </Styles.StyledSectionArea>
     <div>
-      <Styles.StyledIframge src="https://jsoncrack.com/widget"></Styles.StyledIframge>
+      <Styles.StyledIframge
+        src="//localhost:3000/widget"
+        onLoad={e => {
+          const frame = e.currentTarget.contentWindow;
+          setTimeout(() => {
+            frame?.postMessage({
+              json: defaultJson,
+            });
+          }, 500);
+        }}
+      ></Styles.StyledIframge>
     </div>
   </Styles.StyledSection>
 );

src/pages/Widget/index.tsx

@@ -1,11 +1,9 @@
 import React from "react";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
-import { parse } from "jsonc-parser";
 import toast from "react-hot-toast";
-import { baseURL, defaultJson } from "src/constants/data";
+import { baseURL } from "src/constants/data";
 import { NodeModal } from "src/containers/Modals/NodeModal";
-import useConfig from "src/hooks/store/useConfig";
 import useGraph from "src/hooks/store/useGraph";
 import { parser } from "src/utils/jsonParser";
 import styled from "styled-components";
@@ -46,19 +44,21 @@ interface EmbedMessage {
   };
 }
 
+const StyledDeprecated = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+
+  a {
+    text-decoration: underline;
+  }
+`;
+
 const WidgetPage = () => {
   const { query, push } = useRouter();
-  const [json, setJson] = React.useState(defaultJson);
-
-  React.useEffect(() => {
-    if (query.json)
-      setJson(
-        JSON.stringify({
-          warning: "⚠️ Query params are deprecated now",
-          new: "Check out https://jsoncrack.com/embed",
-        })
-      );
-  }, [query.json]);
 
   const [isModalVisible, setModalVisible] = React.useState(false);
   const [selectedNode, setSelectedNode] = React.useState<[string, string][]>([]);
@@ -67,7 +67,6 @@ const WidgetPage = () => {
   const collapsedEdges = useGraph(state => state.collapsedEdges);
   const loading = useGraph(state => state.loading);
   const setGraphValue = useGraph(state => state.setGraphValue);
-  const centerView = useConfig(state => state.centerView);
 
   const openModal = React.useCallback(() => setModalVisible(true), []);
 
@@ -85,33 +84,38 @@ const WidgetPage = () => {
       selectedNodes.forEach(node => node.classList.add("hide"));
       selectedEdges.forEach(edge => edge.classList.add("hide"));
     }
-  }, [collapsedNodes, collapsedEdges, loading]);
+
+    if (!inIframe()) push("/");
+  }, [collapsedNodes, collapsedEdges, loading, push]);
 
   React.useEffect(() => {
     const handler = (event: EmbedMessage) => {
       try {
         if (!event.data?.json) return;
-        const parsedJson = JSON.stringify(parse(event.data.json));
-        setJson(parsedJson);
+        const { nodes, edges } = parser(event.data.json);
+
+        setGraphValue("nodes", nodes);
+        setGraphValue("edges", edges);
       } catch (error) {
+        console.error(error);
         toast.error("Invalid JSON!");
       }
     };
 
     window.addEventListener("message", handler);
     return () => window.removeEventListener("message", handler);
-  }, []);
-
-  React.useEffect(() => {
-    if (json) {
-      const { nodes, edges } = parser(json);
-
-      setGraphValue("nodes", nodes);
-      setGraphValue("edges", edges);
-    }
-
-    if (!inIframe()) push("/");
-  }, [push, json, setGraphValue, centerView]);
+  }, [setGraphValue]);
+
+  if (query.json)
+    return (
+      <StyledDeprecated>
+        <h1>⚠️ Deprecated ⚠️</h1>
+        <br />
+        <a href="https://jsoncrack.com/embed" target="_blank" rel="noreferrer">
+          https://jsoncrack.com/embed
+        </a>
+      </StyledDeprecated>
+    );
 
   return (
     <>

src/pages/_app.tsx

@@ -21,48 +21,52 @@ if (process.env.NODE_ENV !== "development") {
 }
 
 function JsonCrack({ Component, pageProps }: AppProps) {
-  const { query } = useRouter();
+  const { query, pathname } = useRouter();
   const lightmode = useStored(state => state.lightmode);
   const setJson = useConfig(state => state.setJson);
   const [isRendered, setRendered] = React.useState(false);
 
   React.useEffect(() => {
-    const isJsonValid =
-      typeof query.json === "string" && isValidJson(decodeURIComponent(query.json));
+    try {
+      if (pathname !== "editor") return;
+      const isJsonValid =
+        typeof query.json === "string" &&
+        isValidJson(decodeURIComponent(query.json));
 
-    if (isJsonValid) {
-      const jsonDecoded = decompress(JSON.parse(isJsonValid));
-      const jsonString = JSON.stringify(jsonDecoded);
-
-      setJson(jsonString);
+      if (isJsonValid) {
+        const jsonDecoded = decompress(JSON.parse(isJsonValid));
+        const jsonString = JSON.stringify(jsonDecoded);
+        setJson(jsonString);
+      }
+    } catch (error) {
+      console.error(error);
     }
-  }, [query.json, setJson]);
+  }, [pathname, query.json, setJson]);
 
   React.useEffect(() => {
     setRendered(true);
   }, []);
 
-  if (!isRendered) return null;
-
-  return (
-    <>
-      <GoogleAnalytics />
-      <ThemeProvider theme={lightmode ? lightTheme : darkTheme}>
-        <GlobalStyle />
-        <Component {...pageProps} />
-        <Toaster
-          position="bottom-right"
-          toastOptions={{
-            style: {
-              background: "#4D4D4D",
-              color: "#B9BBBE",
-            },
-          }}
-        />
-        <SupportButton />
-      </ThemeProvider>
-    </>
-  );
+  if (isRendered)
+    return (
+      <>
+        <GoogleAnalytics />
+        <ThemeProvider theme={lightmode ? lightTheme : darkTheme}>
+          <GlobalStyle />
+          <Component {...pageProps} />
+          <Toaster
+            position="bottom-right"
+            toastOptions={{
+              style: {
+                background: "#4D4D4D",
+                color: "#B9BBBE",
+              },
+            }}
+          />
+          <SupportButton />
+        </ThemeProvider>
+      </>
+    );
 }
 
 export default JsonCrack;