Revert "update widget structure"

This reverts commit 1c6875b85d227d192fa9618ceb186730f935946d.

src/containers/Home/index.tsx

@@ -176,10 +176,9 @@ const EmbedSection = () => (
         visitors, blog readers or anybody else!
       </Styles.StyledMinorTitle>
     </Styles.StyledSectionArea>
-    <Styles.StyledIframge
-      src="https://jsoncrack.com/widget"
-      data-json="%7B%0A%20%20%22squadName%22%3A%20%22aykut%20sara%C3%A7%22%2C%0A%20%20%22homeTown%22%3A%20%22Metro%20City%22%2C%0A%20%20%22formed%22%3A%202016%2C%0A%20%20%22secretBase%22%3A%20%22Super%20tower%22%2C%0A%20%20%22active%22%3A%20true%2C%0A%20%20%22members%22%3A%20%5B%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%22name%22%3A%20%22Molecule%20Man%22%2C%0A%20%20%20%20%20%20%22age%22%3A%2029%2C%0A%20%20%20%20%20%20%22secretIdentity%22%3A%20%22Dan%20Jukes%22%2C%0A%20%20%20%20%20%20%22powers%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%22Radiation%20resistance%22%2C%0A%20%20%20%20%20%20%20%20%22Turning%20tiny%22%2C%0A%20%20%20%20%20%20%20%20%22Radiation%20blast%22%0A%20%20%20%20%20%20%5D%0A%20%20%20%20%7D%2C%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%22name%22%3A%20%22Madame%20Uppercut%22%2C%0A%20%20%20%20%20%20%22age%22%3A%2039%2C%0A%20%20%20%20%20%20%22secretIdentity%22%3A%20%22Jane%20Wilson%22%2C%0A%20%20%20%20%20%20%22powers%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%22Million%20tonne%20punch%22%2C%0A%20%20%20%20%20%20%20%20%22Damage%20resistance%22%2C%0A%20%20%20%20%20%20%20%20%22Superhuman%20reflexes%22%0A%20%20%20%20%20%20%5D%0A%20%20%20%20%7D%2C%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%22name%22%3A%20%22Eternal%20Flame%22%2C%0A%20%20%20%20%20%20%22age%22%3A%201000000%2C%0A%20%20%20%20%20%20%22secretIdentity%22%3A%20%22Unknown%22%2C%0A%20%20%20%20%20%20%22powers%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%22Immortality%22%2C%0A%20%20%20%20%20%20%20%20%22Heat%20Immunity%22%2C%0A%20%20%20%20%20%20%20%20%22Inferno%22%2C%0A%20%20%20%20%20%20%20%20%22Teleportation%22%2C%0A%20%20%20%20%20%20%20%20%22Interdimensional%20travel%22%0A%20%20%20%20%20%20%5D%0A%20%20%20%20%7D%0A%20%20%5D%0A%7D"
-    ></Styles.StyledIframge>
+    <div>
+      <Styles.StyledIframge src="https://jsoncrack.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"></Styles.StyledIframge>
+    </div>
   </Styles.StyledSection>
 );
 

src/containers/Modals/ShareModal/index.tsx

@@ -47,9 +47,7 @@ export const ShareModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
   const json = useConfig(state => state.json);
   const [encodedJson, setEncodedJson] = React.useState("");
 
-  const embedText = `<iframe src="${baseURL}/widget" data-json="${encodeURIComponent(
-    json
-  )}" width="512" height="384" style="border: 2px solid #b9bbbe; border-radius: 6px;"></iframe>`;
+  const embedText = `<iframe src="${baseURL}/widget?json=${encodedJson}" width="512" height="384" style="border: 2px solid #b9bbbe; border-radius: 6px;"></iframe>`;
   const shareURL = `${baseURL}/editor?json=${encodedJson}`;
 
   React.useEffect(() => {
@@ -90,17 +88,17 @@ export const ShareModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
                 </Button>
               </StyledFlex>
             </StyledContainer>
+            <StyledContainer>
+              Embed into your website
+              <StyledFlex>
+                <Input value={embedText} type="url" readOnly />
+                <Button status="SECONDARY" onClick={() => handleShare(embedText)}>
+                  Copy
+                </Button>
+              </StyledFlex>
+            </StyledContainer>
           </>
         )}
-        <StyledContainer>
-          Embed into your website
-          <StyledFlex>
-            <Input value={embedText} type="url" readOnly />
-            <Button status="SECONDARY" onClick={() => handleShare(embedText)}>
-              Copy
-            </Button>
-          </StyledFlex>
-        </StyledContainer>
       </Modal.Content>
       <Modal.Controls setVisible={setVisible}></Modal.Controls>
     </Modal>

src/pages/Widget/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
+import { decompress } from "compress-json";
 import { baseURL } from "src/constants/data";
 import useGraph from "src/hooks/store/useGraph";
 import { isValidJson } from "src/utils/isValidJson";
@@ -37,22 +38,17 @@ function inIframe() {
 }
 
 const WidgetPage = () => {
-  const { push } = useRouter();
-  const [json, setJson] = React.useState<string | null>(null);
+  const { query, push } = useRouter();
   const setGraphValue = useGraph(state => state.setGraphValue);
 
   React.useEffect(() => {
-    const dataJson = window.self.frameElement?.getAttribute("data-json");
-    if (dataJson) setJson(dataJson);
-  }, []);
-
-  React.useEffect(() => {
-    if (json) {
-      const jsonURI = decodeURIComponent(json);
+    if (query.json) {
+      const jsonURI = decodeURIComponent(query.json as string);
       const isJsonValid = isValidJson(jsonURI);
 
       if (isJsonValid) {
-        const { nodes, edges } = parser(jsonURI);
+        const jsonDecoded = decompress(JSON.parse(isJsonValid));
+        const { nodes, edges } = parser(JSON.stringify(jsonDecoded));
 
         setGraphValue("nodes", nodes);
         setGraphValue("edges", edges);
@@ -60,12 +56,16 @@ const WidgetPage = () => {
     }
 
     if (!inIframe()) push("/");
-  }, [push, json, setGraphValue]);
+  }, [push, query.json, setGraphValue]);
 
   return (
     <>
       <Graph isWidget />
-      <StyledAttribute href={`${baseURL}/editor`} target="_blank" rel="noreferrer">
+      <StyledAttribute
+        href={`${baseURL}/editor?json=${query.json}`}
+        target="_blank"
+        rel="noreferrer"
+      >
         jsoncrack.com
       </StyledAttribute>
     </>