fix widget not loading

src/containers/Home/index.tsx

@@ -161,7 +161,7 @@ const Home: React.FC = () => {
         </Styles.StyledSectionArea>
         <div>
           <Styles.StyledIframge
-            src="https://jsonvisio.com/widget/%5B%5B%22squadName%22%2C%22homeTown%22%2C%22formed%22%2C%22secretBase%22%2C%22active%22%2C%22members%22%2C%22a%7C0%7C1%7C2%7C3%7C4%7C5%22%2C%22Super%20hero%20squad%22%2C%22Metro%20City%22%2C%22n%7CWW%22%2C%22Super%20tower%22%2C%22b%7CT%22%2C%22name%22%2C%22age%22%2C%22secretIdentity%22%2C%22powers%22%2C%22a%7CC%7CD%7CE%7CF%22%2C%22Molecule%20Man%22%2C%22n%7CT%22%2C%22Dan%20Jukes%22%2C%22Radiation%20resistance%22%2C%22Turning%20tiny%22%2C%22Radiation%20blast%22%2C%22a%7CK%7CL%7CM%22%2C%22o%7CG%7CH%7CI%7CJ%7CN%22%2C%22Madame%20Uppercut%22%2C%22n%7Cd%22%2C%22Jane%20Wilson%22%2C%22Million%20tonne%20punch%22%2C%22Damage%20resistance%22%2C%22Superhuman%20reflexes%22%2C%22a%7CS%7CT%7CU%22%2C%22o%7CG%7CP%7CQ%7CR%7CV%22%2C%22Eternal%20Flame%22%2C%22n%7C4C92%22%2C%22Unknown%22%2C%22Immortality%22%2C%22Heat%20Immunity%22%2C%22Inferno%22%2C%22Teleportation%22%2C%22Interdimensional%20travel%22%2C%22a%7Ca%7Cb%7Cc%7Cd%7Ce%22%2C%22o%7CG%7CX%7CY%7CZ%7Cf%22%2C%22a%7CO%7CW%7Cg%22%2C%22o%7C6%7C7%7C8%7C9%7CA%7CB%7Ch%22%5D%2C%22i%22%5D"
+            src="https://jsonvisio.com/widget?json=%5B%5B%22squadName%22%2C%22homeTown%22%2C%22formed%22%2C%22secretBase%22%2C%22active%22%2C%22members%22%2C%22a%7C0%7C1%7C2%7C3%7C4%7C5%22%2C%22Super%20hero%20squad%22%2C%22Metro%20City%22%2C%22n%7CWW%22%2C%22Super%20tower%22%2C%22b%7CT%22%2C%22name%22%2C%22age%22%2C%22secretIdentity%22%2C%22powers%22%2C%22a%7CC%7CD%7CE%7CF%22%2C%22Molecule%20Man%22%2C%22n%7CT%22%2C%22Dan%20Jukes%22%2C%22Radiation%20resistance%22%2C%22Turning%20tiny%22%2C%22Radiation%20blast%22%2C%22a%7CK%7CL%7CM%22%2C%22o%7CG%7CH%7CI%7CJ%7CN%22%2C%22Madame%20Uppercut%22%2C%22n%7Cd%22%2C%22Jane%20Wilson%22%2C%22Million%20tonne%20punch%22%2C%22Damage%20resistance%22%2C%22Superhuman%20reflexes%22%2C%22a%7CS%7CT%7CU%22%2C%22o%7CG%7CP%7CQ%7CR%7CV%22%2C%22Eternal%20Flame%22%2C%22n%7C4C92%22%2C%22Unknown%22%2C%22Immortality%22%2C%22Heat%20Immunity%22%2C%22Inferno%22%2C%22Teleportation%22%2C%22Interdimensional%20travel%22%2C%22a%7Ca%7Cb%7Cc%7Cd%7Ce%22%2C%22o%7CG%7CX%7CY%7CZ%7Cf%22%2C%22a%7CO%7CW%7Cg%22%2C%22o%7C6%7C7%7C8%7C9%7CA%7CB%7Ch%22%5D%2C%22i%22%5D"
             width="512"
             height="384"
           ></Styles.StyledIframge>

src/containers/Modals/ShareModal/index.tsx

@@ -48,7 +48,7 @@ export const ShareModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
   const [encodedJson, setEncodedJson] = React.useState("");
   const [_, copy] = useCopyToClipboard();
 
-  const embedText = `<iframe src="https://jsonvisio.com/widget/${encodedJson}" width="512" height="384"></iframe>`;
+  const embedText = `<iframe src="https://jsonvisio.com/widget?json=${encodedJson}" width="512" height="384"></iframe>`;
   const shareURL = `https://jsonvisio.com/editor?json=${encodedJson}`;
 
   React.useEffect(() => {

src/pages/widget/[json].tsx → src/pages/widget.tsx

@@ -2,6 +2,7 @@ import { decompress } from "compress-json";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
 import React from "react";
+import { defaultJson } from "src/constants/data";
 import { isValidJson } from "src/utils/isValidJson";
 import styled from "styled-components";
 
@@ -36,19 +37,22 @@ const Widget = () => {
   const [json, setJson] = React.useState("");
 
   React.useEffect(() => {
-    const isJsonValid =
-      typeof query.json === "string" &&
-      isValidJson(decodeURIComponent(query.json));
+    if (!query.json) {
+      setJson(JSON.stringify(defaultJson));
+    } else {
+      const jsonURI = decodeURIComponent(query.json as string);
+      const isJsonValid = isValidJson(jsonURI);
 
-    if (isJsonValid) {
-      const jsonDecoded = decompress(JSON.parse(isJsonValid));
-      const jsonString = JSON.stringify(jsonDecoded);
+      if (isJsonValid) {
+        const jsonDecoded = decompress(JSON.parse(isJsonValid));
+        const jsonString = JSON.stringify(jsonDecoded);
 
-      setJson(jsonString);
+        setJson(jsonString);
+      }
     }
 
-    // if (!inIframe()) push("/");
-  }, [query.json]);
+    if (!inIframe()) push("/");
+  }, [query?.json]);
 
   return (
     <div>