Merge pull request #15 from rafgugi/edit-tree-yaml

feat: enable edit tree yaml using modal

package.json

@@ -8,7 +8,8 @@
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "reactstrap": "^9.1.9"
+    "reactstrap": "^9.1.9",
+    "yaml": "^2.3.1"
   },
   "scripts": {
     "start": "craco start",

src/components/App.tsx

@@ -1,12 +1,14 @@
 import { Button, Container, Form, FormGroup, Input, Label } from 'reactstrap';
 import { useMemo, useState } from 'react';
+import { stringify } from 'yaml';
 import { Person } from '../family.interface';
 import AppContext from './AppContext';
 import Family from './Family';
 import ModalAddChild from './ModalAddChild';
 import ModalAddSpouse from './ModalAddSpouse';
-import ModalDeletePerson from './ModalDeletePerson';
 import ModalAddTree from './ModalAddTree';
+import ModalDeletePerson from './ModalDeletePerson';
+import ModalEditYaml from './ModalEditYaml';
 import { deletePerson, enrichTreeData, treesToRecord } from '../family.util';
 import { useCache } from '../useCache';
 
@@ -24,6 +26,7 @@ function App(props: AppProps) {
 
   const [modalPerson, setModalPerson] = useState(null as Person | null);
   const [modalSpouse, setModalSpouse] = useState(null as Person | null);
+  const [treeYaml, setTreeYaml] = useState('');
 
   const [showModalAddTree, setShowModalAddTree] = useState(false);
   const toggleModalAddTree = () => setShowModalAddTree(!showModalAddTree);
@@ -45,6 +48,13 @@ function App(props: AppProps) {
     setShowModalAddSpouse(true);
   };
 
+  const [showModalEditYaml, setShowModalEditYaml] = useState(false);
+  const toggleModalEditYaml = () => setShowModalEditYaml(!showModalEditYaml);
+  const openModalEditYaml = () => {
+    setTreeYaml(stringify(trees));
+    setShowModalEditYaml(true);
+  };
+
   const [showModalDeletePerson, setShowModalDeletePerson] = useState(false);
   const toggleModalDeletePerson = () =>
     setShowModalDeletePerson(!showModalDeletePerson);
@@ -55,7 +65,7 @@ function App(props: AppProps) {
 
   const treeMap = useMemo(() => treesToRecord(trees), [trees]);
 
-  const setTreeValue = (person: Person) => {
+  const upsertPerson = (person: Person) => {
     const personData: Record<string, Person> = { [person.id]: person };
     setTreesValue(enrichTreeData(trees, personData));
   };
@@ -70,9 +80,10 @@ function App(props: AppProps) {
         split,
         editMode,
         hidePersonCode,
-        setTreeValue,
-        deleteTreePerson,
         treeMap,
+        setTreesValue,
+        upsertPerson,
+        deletePerson: deleteTreePerson,
       }}
     >
       <Container className="d-print-none" fluid="sm">
@@ -120,6 +131,13 @@ function App(props: AppProps) {
             <Button size="sm" onClick={() => openModalAddSpouse(trees[0])}>
               Add spouse
             </Button>{' '}
+            <Button
+              size="sm"
+              onClick={() => openModalEditYaml()}
+              color="warning"
+            >
+              Edit tree
+            </Button>{' '}
             <Button
               size="sm"
               onClick={() => openModalDeletePerson()}
@@ -150,6 +168,12 @@ function App(props: AppProps) {
         person={modalPerson}
         setPerson={setModalPerson}
       />
+      <ModalEditYaml
+        isOpen={showModalEditYaml}
+        toggle={toggleModalEditYaml}
+        treeYaml={treeYaml}
+        setTreeYaml={setTreeYaml}
+      />
       <ModalDeletePerson
         isOpen={showModalDeletePerson}
         toggle={toggleModalDeletePerson}

src/components/AppContext.tsx

@@ -5,17 +5,19 @@ interface AppContextValue {
   split: boolean;
   editMode: boolean;
   hidePersonCode: boolean;
-  setTreeValue: (p: Person) => void;
-  deleteTreePerson: (p: Person) => void;
+  setTreesValue: (ps: Person[]) => void;
+  upsertPerson: (p: Person) => void;
+  deletePerson: (p: Person) => void;
   treeMap: Record<string, Person>;
 }
 
 const AppContext = createContext<AppContextValue>({
   split: false,
   editMode: false,
   hidePersonCode: false,
-  setTreeValue: () => {},
-  deleteTreePerson: () => {},
+  setTreesValue: () => {},
+  upsertPerson: () => {},
+  deletePerson: () => {},
   treeMap: {},
 });
 

src/components/FamilyGrid.tsx

@@ -58,11 +58,11 @@ function FamilyRows({ person, ...props }: PersonRowProps) {
 }
 
 function PersonRow({ person }: PersonRowProps) {
-  const { editMode, hidePersonCode, setTreeValue } = useContext(AppContext);
+  const { editMode, hidePersonCode, upsertPerson } = useContext(AppContext);
   const name = person.name || person.id;
 
   const updatePerson = function (e: ChangeEvent<any>, key: string) {
-    setTreeValue({ ...person, [key]: e.target.value });
+    upsertPerson({ ...person, [key]: e.target.value });
   };
 
   let inputClass = 'd-none';

src/components/ModalAddChild.tsx

@@ -9,15 +9,15 @@ import {
   ModalFooter,
   ModalHeader,
 } from 'reactstrap';
-import { Dispatch, useContext, useState } from 'react';
+import { useContext, useState } from 'react';
 import { Marriage, Person } from '../family.interface';
 import AppContext from './AppContext';
 
 interface ModalAddChildProps {
   person: Person | null;
-  setPerson: Dispatch<any>;
+  setPerson: (p: Person | null) => void;
   spouse: Person | null;
-  setSpouse: Dispatch<any>;
+  setSpouse: (p: Person | null) => void;
   isOpen: boolean;
   toggle: () => void;
 }
@@ -30,7 +30,7 @@ function ModalAddChild({
   isOpen,
   toggle,
 }: ModalAddChildProps) {
-  const { treeMap, setTreeValue } = useContext(AppContext);
+  const { treeMap, upsertPerson } = useContext(AppContext);
   const [child, setChild] = useState('');
   const [childError, setChildError] = useState('');
 
@@ -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
@@ -81,7 +81,7 @@ function ModalAddChild({
     };
     marriage.children.push(childPerson);
 
-    setTreeValue(person);
+    upsertPerson(person);
     setPerson(null);
     setSpouse(null);
     setChild('');
@@ -142,7 +142,7 @@ function ModalAddChild({
         )}
       </ModalBody>
       <ModalFooter>
-        <Button disabled={!validForm()} onClick={handleSubmit}>
+        <Button disabled={!validForm} onClick={handleSubmit}>
           Submit
         </Button>
       </ModalFooter>

src/components/ModalAddSpouse.tsx

@@ -9,13 +9,13 @@ import {
   ModalFooter,
   ModalHeader,
 } from 'reactstrap';
-import { Dispatch, useContext, useState } from 'react';
+import { useContext, useState } from 'react';
 import { Marriage, Person } from '../family.interface';
 import AppContext from './AppContext';
 
 interface ModalAddSpouseProps {
   person: Person | null;
-  setPerson: Dispatch<any>;
+  setPerson: (p: Person | null) => void;
   isOpen: boolean;
   toggle: () => void;
 }
@@ -26,7 +26,7 @@ function ModalAddSpouse({
   isOpen,
   toggle,
 }: ModalAddSpouseProps) {
-  const { treeMap, setTreeValue } = useContext(AppContext);
+  const { treeMap, upsertPerson } = useContext(AppContext);
   const [spouse, setSpouse] = useState('');
   const [spouseError, setSpouseError] = useState('');
 
@@ -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,
@@ -63,7 +63,7 @@ function ModalAddSpouse({
       children: [],
     });
 
-    setTreeValue(person);
+    upsertPerson(person);
     setPerson(null);
     setSpouse('');
     toggle();
@@ -105,7 +105,7 @@ function ModalAddSpouse({
         )}
       </ModalBody>
       <ModalFooter>
-        <Button disabled={!validForm()} onClick={handleSubmit}>
+        <Button disabled={!validForm} onClick={handleSubmit}>
           Submit
         </Button>
       </ModalFooter>

src/components/ModalAddTree.tsx

@@ -19,7 +19,7 @@ interface ModalAddTreeProps {
 }
 
 function ModalAddTree({ isOpen, toggle }: ModalAddTreeProps) {
-  const { treeMap, setTreeValue } = useContext(AppContext);
+  const { treeMap, upsertPerson } = useContext(AppContext);
   const [child, setChild] = useState('');
   const [childError, setChildError] = useState('');
 
@@ -33,18 +33,18 @@ 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,
       code: '',
       marriages: [] as Marriage[],
     };
 
-    setTreeValue(tree);
+    upsertPerson(tree);
     setChild('');
     toggle();
   };
@@ -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>