localStorage fixes

src/components/Sidebar/index.tsx

@@ -35,7 +35,7 @@ const StyledElement = styled.div<{ disabled?: boolean }>`
   color: ${({ theme, disabled }) =>
     disabled ? theme.SILVER_DARK : theme.SILVER};
   cursor: pointer;
-  pointer-events: ${({ disabled }) => disabled && 'none'};
+  pointer-events: ${({ disabled }) => disabled && "none"};
 
   a {
     text-align: center;
@@ -90,9 +90,10 @@ const StyledImportFile = styled.label`
   }
 `;
 
-export const Sidebar = () => {
+export const Sidebar: React.FC<{
+  setJson: React.Dispatch<React.SetStateAction<string>>;
+}> = ({ setJson }) => {
   const [jsonFile, setJsonFile] = React.useState<File | null>(null);
-  const [json, setJson] = useLocalStorage("json", JSON.stringify(defaultValue));
   const [config, setConfig] = useLocalStorage<StorageConfig>("config", {
     layout: "LEFT",
     minimap: true,

src/containers/JsonEditor/index.tsx

@@ -53,13 +53,22 @@ export const defaultValue = [
   },
 ];
 
-export const JsonEditor: React.FC = () => {
-  const [clear, setClear] = React.useState(0);
-  const [json, setJson] = useLocalStorage("json", JSON.stringify(defaultValue));
-  const initialJson = React.useMemo(() => JSON.parse(json), [clear]);
+export const JsonEditor: React.FC<{
+  json: string;
+  setJson: React.Dispatch<React.SetStateAction<string>>;
+}> = ({ json, setJson }) => {
+  const [initialJson, setInitialJson] = React.useState(
+    React.useMemo(
+      () =>
+        typeof localStorage !== "undefined" && localStorage.getItem("json")
+          ? localStorage.getItem("json")
+          : json,
+      []
+    )
+  );
 
   React.useEffect(() => {
-    if (json === "[]") setClear((c) => c + 1);
+    if (json === "[]") setInitialJson(json);
   }, [json]);
 
   React.useEffect(() => {
@@ -78,13 +87,17 @@ export const JsonEditor: React.FC = () => {
     }
   };
 
-  return (
-    <StyledJSONInput
-      placeholder={initialJson}
-      onChange={handleChange}
-      locale={locale}
-      height="100%"
-      width="auto"
-    />
-  );
+  if (typeof window !== "undefined") {
+    return (
+      <StyledJSONInput
+        placeholder={JSON.parse(initialJson as string)}
+        onChange={handleChange}
+        locale={locale}
+        height="100%"
+        width="auto"
+      />
+    );
+  }
+
+  return null;
 };

src/containers/LiveEditor/CustomNode.tsx

@@ -82,7 +82,10 @@ const CustomNode = ({ nodeProps }) => {
               <StyledTextWrapper>
                 <StyledText width={width} height={height}>
                   {entries.map((val) => (
-                    <div style={{ height: "fit-content" }}>
+                    <div
+                      key={nodeProps.id}
+                      style={{ height: "fit-content" }}
+                    >
                       <StyledKey>{val[0]}: </StyledKey>
                       {val[1]}
                     </div>

src/containers/LiveEditor/index.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentType } from "react";
+import React from "react";
 import styled from "styled-components";
 import {
   TransformWrapper,
@@ -40,11 +40,12 @@ const StyledControls = styled.div`
   opacity: 0.8;
 `;
 
-export const LiveEditor: React.FC = () => {
+export const LiveEditor: React.FC<{
+  json: string;
+  setJson: React.Dispatch<React.SetStateAction<string>>;
+}> = ({ json }) => {
   const canvasRef = React.useRef<CanvasRef | null>(null);
   const wrapperRef = React.useRef<ReactZoomPanPinchRef | null>(null);
-
-  const [json] = useLocalStorage("json", JSON.stringify(defaultValue));
   const [config] = useLocalStorage<StorageConfig>("config", {
     layout: "LEFT",
     minimap: true,
@@ -52,7 +53,7 @@ export const LiveEditor: React.FC = () => {
   });
 
   React.useEffect(() => {
-    wrapperRef.current?.resetTransform();
+    if (wrapperRef.current) wrapperRef.current?.resetTransform();
   }, [json, wrapperRef]);
 
   const { nodes, edges } = getEdgeNodes(json);
@@ -127,7 +128,7 @@ export const LiveEditor: React.FC = () => {
           <Button onClick={() => wrapperRef.current?.resetTransform()}>
             <AiOutlineFullscreen size={20} />
           </Button>
-          <Button>
+          <Button onClick={() => localStorage.setItem("json", json)}>
             <AiFillSave size={20} />
           </Button>
         </StyledControls>

src/pages/editor/index.tsx

@@ -6,7 +6,7 @@ import SplitPane from "react-split-pane";
 
 import { Button } from "src/components/Button";
 import { Sidebar } from "src/components/Sidebar";
-import { JsonEditor } from "src/containers/JsonEditor";
+import { defaultValue, JsonEditor } from "src/containers/JsonEditor";
 import { LiveEditor } from "src/containers/LiveEditor";
 
 const StyledPageWrapper = styled.div`
@@ -117,14 +117,21 @@ const StyledEditor = styled(SplitPane)`
 `;
 
 const Editor: React.FC = () => {
+  const [json, setJson] = React.useState<string>(JSON.stringify(defaultValue));
   const route = useRouter();
 
+  React.useEffect(() => {
+    const jsonStored = localStorage.getItem("json");
+
+    if (jsonStored) setJson(jsonStored);
+  }, []);
+
   return (
     <StyledPageWrapper>
       <Head>
         <title>Editor | JSON Visio</title>
       </Head>
-      <Sidebar />
+      <Sidebar setJson={setJson} />
       <StyledEditorWrapper>
         <StyledTools></StyledTools>
         <StyledEditor
@@ -133,8 +140,8 @@ const Editor: React.FC = () => {
           defaultSize={450}
           split="vertical"
         >
-          <JsonEditor />
-          <LiveEditor />
+          <JsonEditor json={json} setJson={setJson} />
+          <LiveEditor json={json} setJson={setJson} />
         </StyledEditor>
       </StyledEditorWrapper>
       <StyledIncompatible>