fix encode decode uri

src/containers/ShareModal/index.tsx

@@ -4,6 +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 { BiErrorAlt } from "react-icons/bi";
 import { compress } from "compress-json";
 import { useConfig } from "src/hocs/config";
 
@@ -20,6 +21,17 @@ const StyledInput = styled.input`
   height: 30px;
 `;
 
+const StyledWarning = styled.p``;
+
+const StyledErrorWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: ${({ theme }) => theme.TEXT_DANGER};
+  font-weight: 600;
+`;
+
 export const ShareModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
   const { json } = useConfig();
   const [url, setURL] = React.useState("");
@@ -29,7 +41,9 @@ export const ShareModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
     const jsonEncode = compress(JSON.parse(json));
     const jsonString = JSON.stringify(jsonEncode);
 
-    setURL(`https://jsonvisio.com/editor?json=${encodeURI(jsonString)}`);
+    setURL(
+      `http://localhost:3000/editor?json=${encodeURIComponent(jsonString)}`
+    );
   }, [json]);
 
   const handleShare = () => {
@@ -42,12 +56,24 @@ export const ShareModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
     <Modal visible={visible} setVisible={setVisible}>
       <Modal.Header>Create a Share Link</Modal.Header>
       <Modal.Content>
-        <StyledInput value={url} type="url" readOnly />
+        {url.length > 5000 ? (
+          <StyledErrorWrapper>
+            <BiErrorAlt size={60} />
+            <StyledWarning>
+              Link size exceeds 5000 characters, unable to generate link for
+              file of this size!
+            </StyledWarning>
+          </StyledErrorWrapper>
+        ) : (
+          <StyledInput value={url} type="url" readOnly />
+        )}
       </Modal.Content>
       <Modal.Controls setVisible={setVisible}>
-        <Button status="SECONDARY" onClick={handleShare}>
-          Copy
-        </Button>
+        {url.length < 5000 && (
+          <Button status="SECONDARY" onClick={handleShare}>
+            Copy
+          </Button>
+        )}
       </Modal.Controls>
     </Modal>
   );

src/hocs/config.tsx

@@ -50,10 +50,11 @@ const WithConfig: ReactComponent = ({ children }) => {
 
   React.useEffect(() => {
     const jsonStored = localStorage.getItem("json");
-    const isJsonValid = typeof json === "string" && isValidJson(json);
+    const isJsonValid =
+      typeof json === "string" && isValidJson(decodeURIComponent(json));
 
     if (isJsonValid) {
-      const jsonDecoded = decompress(JSON.parse(json));
+      const jsonDecoded = decompress(JSON.parse(isJsonValid));
       const jsonString = JSON.stringify(jsonDecoded);
 
       dispatch({ type: ConfigActionType.SET_JSON, payload: jsonString });

src/utils/isValidJson.ts

@@ -4,5 +4,5 @@ export const isValidJson = (str: string) => {
   } catch (e) {
     return false;
   }
-  return true;
+  return str;
 };