Merge pull request #26 from yushiang-demo/enhnace-shareLink-encoded-t…

…o-hash

Enhance: pass edit data from hash insteaed of query string.

CHANGELOG.md

@@ -15,6 +15,7 @@ The format is based on [Keep a Changelog](https://github.com/olivierlacan/keep-a
 ### Changed
 
 - Change `styled-component` babel setting to SWC according to [official document](https://styled-components.com/docs/advanced#with-swc). (https://github.com/yushiang-demo/PanoToMesh/pull/16)
+- Change share link to load data from hash instead of query string. (https://github.com/yushiang-demo/PanoToMesh/pull/26)
 
 ### Fixed
 

apps/editor.js

@@ -13,7 +13,7 @@ import Input from "../components/Input";
 import Icons from "../components/Icon";
 import Toolbar from "../components/Toolbar";
 import RatioLockedDiv from "../components/RatioLockedDiv";
-import { encodeString } from "../helpers/pako";
+import { useStoreDataToHash } from "../hooks/useHash";
 
 const downloadImage = (filename, url) => {
   const a = document.createElement("a");
@@ -64,6 +64,10 @@ const Editor = ({ src }) => {
     panorama,
     panoramaOrigin,
   };
+  const hash = useStoreDataToHash({
+    ...props,
+    panorama: imageSrc,
+  });
 
   const loadPanoramaFromLocal = () => {
     const fileInput = document.createElement("input");
@@ -97,13 +101,10 @@ const Editor = ({ src }) => {
   };
 
   const onShare = () => {
-    const raw = {
-      ...props,
-      panorama: imageSrc,
-    };
-    const rawString = JSON.stringify(raw);
-    const encodedString = encodeString(rawString);
-    window.open(`/?data=${encodedString}`);
+    const newTab = window.open(`/#${hash}`);
+    if (!newTab) {
+      alert("Pop-up blocker prevented opening the new tab.");
+    }
   };
 
   return (

hooks/useHash.js

@@ -0,0 +1,33 @@
+import { useState, useEffect } from "react";
+import { encodeString, decodeString } from "../helpers/pako";
+
+export const useStoreDataToHash = (data) => {
+  const [hash, setHash] = useState("");
+
+  useEffect(() => {
+    const rawString = JSON.stringify(data);
+    const encodedString = encodeString(rawString);
+    setHash(encodedString);
+    window.location.hash = encodedString;
+  }, [data]);
+
+  return hash;
+};
+
+export const useDecodedHash = () => {
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    try {
+      const hash = window.location.hash;
+      if (hash) {
+        const decoded = decodeString(hash);
+        setData(JSON.parse(decoded));
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  }, []);
+
+  return data;
+};

pages/index.js

@@ -1,9 +1,9 @@
 import React from "react";
 import Viewer from "../apps/viewer";
-import useQueryString from "../hooks/useQueryString";
+import { useDecodedHash } from "../hooks/useHash";
 
 const Apps = () => {
-  const { data } = useQueryString();
+  const data = useDecodedHash();
   return <Viewer data={data} />;
 };