use share link

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@monaco-editor/react": "^4.4.4",
     "allotment": "^1.12.1",
+    "js-base64": "^3.7.2",
     "next": "^12.1.5",
     "next-transpile-modules": "^9.0.0",
     "parse-json": "^6.0.2",

src/hocs/config.tsx

@@ -6,6 +6,9 @@ import {
   useConfigReducer,
 } from "src/reducer/reducer";
 import { ReactComponent, StorageConfig } from "src/typings/global";
+import { isValidJson } from "src/utils/isValidJson";
+import { useRouter } from "next/router";
+import { decode } from "js-base64";
 
 export interface AppConfig {
   json: string;
@@ -42,9 +45,16 @@ const WithConfig: ReactComponent = ({ children }) => {
     settings: states.settings,
   };
 
+  const router = useRouter();
+  const { json } = router.query;
+
   React.useEffect(() => {
     const jsonStored = localStorage.getItem("json");
-    if (jsonStored) {
+    const jsonDecode = decode(String(json));
+
+    if (isValidJson(jsonDecode)) {
+      dispatch({ type: ConfigActionType.SET_JSON, payload: jsonDecode });
+    } else if (jsonStored) {
       dispatch({ type: ConfigActionType.SET_JSON, payload: jsonStored });
     }
 
@@ -57,7 +67,7 @@ const WithConfig: ReactComponent = ({ children }) => {
     }
 
     setRender(true);
-  }, [dispatch]);
+  }, [dispatch, json]);
 
   React.useEffect(() => {
     if (render)

src/utils/isValidJson.ts

@@ -0,0 +1,8 @@
+export const isValidJson = (str: string) => {
+  try {
+    JSON.parse(str);
+  } catch (e) {
+    return false;
+  }
+  return true;
+};