feat: handle invalid tree yaml in modal

rafgugi · Jul 29, 2023 · 8897c5c · 8897c5c
1 parent b2bdc24
commit 8897c5c
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 11 deletions.
diff --git a/src/components/ModalAddChild.tsx b/src/components/ModalAddChild.tsx
@@ -64,10 +64,10 @@ function ModalAddChild({
     }
   };
 
-  const validForm = () => person && spouse && child && !childError;
+  const validForm = person && spouse && child && !childError;
 
   const handleSubmit = () => {
-    if (!person || !spouse || !validForm()) return;
+    if (!person || !spouse || !validForm) return;
 
     const marriage = person.marriages.find(
       (m: Marriage) => m.spouse.id === spouse.id
@@ -142,7 +142,7 @@ function ModalAddChild({
         )}
       </ModalBody>
       <ModalFooter>
-        <Button disabled={!validForm()} onClick={handleSubmit}>
+        <Button disabled={!validForm} onClick={handleSubmit}>
           Submit
         </Button>
       </ModalFooter>

diff --git a/src/components/ModalAddSpouse.tsx b/src/components/ModalAddSpouse.tsx
@@ -48,10 +48,10 @@ function ModalAddSpouse({
     }
   };
 
-  const validForm = () => person && spouse && !spouseError;
+  const validForm = person && spouse && !spouseError;
 
   const handleSubmit = () => {
-    if (!person || !validForm()) return;
+    if (!person || !validForm) return;
 
     const spousePerson: Person = {
       id: spouse,
@@ -105,7 +105,7 @@ function ModalAddSpouse({
         )}
       </ModalBody>
       <ModalFooter>
-        <Button disabled={!validForm()} onClick={handleSubmit}>
+        <Button disabled={!validForm} onClick={handleSubmit}>
           Submit
         </Button>
       </ModalFooter>

diff --git a/src/components/ModalAddTree.tsx b/src/components/ModalAddTree.tsx
@@ -33,10 +33,10 @@ function ModalAddTree({ isOpen, toggle }: ModalAddTreeProps) {
     }
   };
 
-  const validForm = () => child && !childError;
+  const validForm = child && !childError;
 
   const handleSubmit = () => {
-    if (!validForm()) return;
+    if (!validForm) return;
 
     const tree: Person = {
       id: child,
@@ -67,7 +67,7 @@ function ModalAddTree({ isOpen, toggle }: ModalAddTreeProps) {
         </FormGroup>
       </ModalBody>
       <ModalFooter>
-        <Button disabled={!validForm()} onClick={handleSubmit}>
+        <Button disabled={!validForm} onClick={handleSubmit}>
           Submit
         </Button>
       </ModalFooter>

diff --git a/src/components/ModalEditYaml.tsx b/src/components/ModalEditYaml.tsx
@@ -1,6 +1,13 @@
-import { useContext, useMemo } from 'react';
+import {
+  useContext,
+  useDeferredValue,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import {
   Button,
+  FormFeedback,
   FormGroup,
   Input,
   Label,
@@ -9,6 +16,7 @@ import {
   ModalFooter,
   ModalHeader,
 } from 'reactstrap';
+import { enrichTreeData } from '../family.util';
 import { parse } from 'yaml';
 import AppContext from './AppContext';
 
@@ -29,19 +37,39 @@ function ModalDeletePerson({
   toggle,
 }: ModalDeletePersonProps) {
   const { setTreesValue } = useContext(AppContext);
+  const [yamlError, setYamlError] = useState('');
+  const deferredTreeYaml = useDeferredValue(treeYaml);
+  const loading = deferredTreeYaml !== treeYaml;
+
+  const validForm = treeYaml && !yamlError;
+
+  useEffect(() => {
+    try {
+      // test parsing the yaml
+      enrichTreeData(parse(deferredTreeYaml), []);
+      if (yamlError !== '') {
+        setYamlError('');
+      }
+    } catch (e: any) {
+      setYamlError(e.message);
+    }
+  }, [deferredTreeYaml, yamlError]);
 
   const rows = useMemo(() => {
     const lines = treeYaml.split('\n').length;
     if (lines < MIN_ROW) return MIN_ROW;
     if (lines > MAX_ROW) return MAX_ROW;
     return lines;
   }, [treeYaml]);
+
   const handleTreeYamlChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const treeYaml = event.target.value;
     setTreeYaml(treeYaml);
   };
 
   const handleSubmit = () => {
+    if (loading || !validForm) return;
+
     const trees = parse(treeYaml);
     setTreesValue(trees);
     toggle();
@@ -60,11 +88,17 @@ function ModalDeletePerson({
             onChange={handleTreeYamlChange}
             rows={rows}
             style={{ fontFamily: 'monospace' }}
+            invalid={!validForm}
           />
+          {yamlError !== '' && (
+            <FormFeedback>
+              <pre>{yamlError}</pre>
+            </FormFeedback>
+          )}
         </FormGroup>
       </ModalBody>
       <ModalFooter>
-        <Button color="warning" disabled={!treeYaml} onClick={handleSubmit}>
+        <Button color="warning" disabled={!validForm} onClick={handleSubmit}>
           Update!
         </Button>
       </ModalFooter>