From b0ca94169e886518a0a1308d700a6ceb9bdf0298 Mon Sep 17 00:00:00 2001
From: cohitre <carlosrr@gmail.com>
Date: Sat, 13 Apr 2024 07:10:28 -0700
Subject: [PATCH] Adding separate dialog so that we can handle state with
 useState

---
 .../ImportJson/ImportJsonDialog.tsx           | 60 +++++++++++++++++++
 .../App/TemplatePanel/ImportJson/index.tsx    | 36 +++--------
 2 files changed, 68 insertions(+), 28 deletions(-)
 create mode 100644 packages/editor-sample/src/App/TemplatePanel/ImportJson/ImportJsonDialog.tsx

diff --git a/packages/editor-sample/src/App/TemplatePanel/ImportJson/ImportJsonDialog.tsx b/packages/editor-sample/src/App/TemplatePanel/ImportJson/ImportJsonDialog.tsx
new file mode 100644
index 0000000..0b7c3c4
--- /dev/null
+++ b/packages/editor-sample/src/App/TemplatePanel/ImportJson/ImportJsonDialog.tsx
@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Input } from '@mui/material';
+
+import { resetDocument } from '../../../documents/editor/EditorContext';
+
+type ImportJsonDialogProps = {
+  onClose: () => void;
+};
+export default function ImportJsonDialog({ onClose }: ImportJsonDialogProps) {
+  const [value, setValue] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  const handleChange: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> = (ev) => {
+    const v = ev.currentTarget.value;
+    setValue(v);
+    try {
+      JSON.parse(v);
+      setError(null);
+    } catch {
+      setError('There was a parsing error');
+    }
+  };
+
+  return (
+    <Dialog open onClose={onClose}>
+      <DialogTitle>Import JSON</DialogTitle>
+      <form
+        onSubmit={(ev) => {
+          ev.preventDefault();
+          try {
+            const doc = JSON.parse(value);
+            resetDocument(doc);
+            onClose();
+          } catch {}
+        }}
+      >
+        <DialogContent>
+          <Input
+            error={error !== null}
+            value={value}
+            onChange={handleChange}
+            type="text"
+            fullWidth
+            rows={10}
+            multiline
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button type="button" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button type="submit" disabled={error !== null}>
+            Save
+          </Button>
+        </DialogActions>
+      </form>
+    </Dialog>
+  );
+}
diff --git a/packages/editor-sample/src/App/TemplatePanel/ImportJson/index.tsx b/packages/editor-sample/src/App/TemplatePanel/ImportJson/index.tsx
index e3a8be1..88ca13b 100644
--- a/packages/editor-sample/src/App/TemplatePanel/ImportJson/index.tsx
+++ b/packages/editor-sample/src/App/TemplatePanel/ImportJson/index.tsx
@@ -1,41 +1,21 @@
 import React, { useState } from 'react';
 
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Input } from '@mui/material';
+import { Button } from '@mui/material';
 
-import { resetDocument } from '../../../documents/editor/EditorContext';
+import ImportJsonDialog from './ImportJsonDialog';
 
 export default function ImportJson() {
   const [open, setOpen] = useState(false);
 
+  let dialog = null;
+  if (open) {
+    dialog = <ImportJsonDialog onClose={() => setOpen(false)} />;
+  }
+
   return (
     <>
       <Button onClick={() => setOpen(true)}>Import JSON</Button>
-      <Dialog open={open} onClose={() => setOpen(false)}>
-        <DialogTitle>Import JSON</DialogTitle>
-        <form
-          onSubmit={(ev) => {
-            ev.preventDefault();
-            const data = new FormData(ev.currentTarget);
-            const json = data.get('json');
-            if (typeof json !== 'string') {
-              return;
-            }
-            try {
-              const doc = JSON.parse(json);
-              resetDocument(doc);
-              setOpen(false);
-            } catch {}
-          }}
-        >
-          <DialogContent>
-            <Input name="json" type="text" fullWidth rows={10} multiline />
-          </DialogContent>
-          <DialogActions>
-            <Button type="button">Cancel</Button>
-            <Button type="submit">Save</Button>
-          </DialogActions>
-        </form>
-      </Dialog>
+      {dialog}
     </>
   );
 }