change js-base64 to compress-json

package.json

@@ -12,10 +12,10 @@
     "deploy": "gh-pages -d out -t true"
   },
   "dependencies": {
-    "js-base64": "^3.7.2",
     "@monaco-editor/react": "^4.4.5",
     "@sentry/nextjs": "^7.1.1",
     "allotment": "^1.14.2",
+    "compress-json": "^2.0.1",
     "next": "^12.1.5",
     "next-transpile-modules": "^9.0.0",
     "parse-json": "^6.0.2",

src/containers/ShareModal/index.tsx

@@ -4,7 +4,7 @@ import styled from "styled-components";
 import { useCopyToClipboard } from "usehooks-ts";
 import { Modal, ModalProps } from "src/components/Modal";
 import { Button } from "src/components/Button";
-import { encode } from "js-base64";
+import { compress } from "compress-json";
 import { useConfig } from "src/hocs/config";
 
 const StyledInput = styled.input`
@@ -26,8 +26,9 @@ export const ShareModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
   const [_, copy] = useCopyToClipboard();
 
   React.useEffect(() => {
-    const jsonEncode = encode(json);
-    setURL(`https://jsonvisio.com/editor?json=${jsonEncode}`);
+    const jsonEncode = compress(JSON.parse(json));
+
+    setURL(`https://jsonvisio.com/editor?json=${JSON.stringify(jsonEncode)}`);
   }, [json]);
 
   const handleShare = () => {

src/hocs/config.tsx

@@ -8,7 +8,7 @@ import {
 import { ReactComponent, StorageConfig } from "src/typings/global";
 import { isValidJson } from "src/utils/isValidJson";
 import { useRouter } from "next/router";
-import { decode } from "js-base64";
+import { Compressed, decompress } from "compress-json";
 
 export interface AppConfig {
   json: string;
@@ -50,10 +50,13 @@ const WithConfig: ReactComponent = ({ children }) => {
 
   React.useEffect(() => {
     const jsonStored = localStorage.getItem("json");
-    const jsonDecode = decode(String(json));
+    const isJsonValid = typeof json === "string" && isValidJson(json);
 
-    if (isValidJson(jsonDecode)) {
-      dispatch({ type: ConfigActionType.SET_JSON, payload: jsonDecode });
+    if (isJsonValid) {
+      const jsonDecoded = decompress(JSON.parse(json));
+      const jsonString = JSON.stringify(jsonDecoded);
+
+      dispatch({ type: ConfigActionType.SET_JSON, payload: jsonString });
     } else if (jsonStored) {
       dispatch({ type: ConfigActionType.SET_JSON, payload: jsonStored });
     }

yarn.lock

@@ -2594,6 +2594,11 @@ commondir@^1.0.1:
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
   integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
 
+compress-json@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/compress-json/-/compress-json-2.0.1.tgz#8460d79e1a5612fab747c20408f997d55f11bc48"
+  integrity sha512-iwGwSGvFd1eN0LQAbbjvBy/liXXKhJpF87u4Rmoqth66o+HqOCwJT3Ok7xY0qCAJhpo4XNH8A699nOUl2G90TQ==
+
 [email protected]:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -4615,11 +4620,6 @@ jest@^28:
     import-local "^3.0.2"
     jest-cli "^28.0.3"
 
-js-base64@^3.7.2:
-  version "3.7.2"
-  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-3.7.2.tgz#816d11d81a8aff241603d19ce5761e13e41d7745"
-  integrity sha512-NnRs6dsyqUXejqk/yv2aiXlAvOs56sLkX6nUdeaNezI5LFFLlsZjOThmwnrcwh5ZZRwZlCMnVAY3CvhIhoVEKQ==
-
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"