Enable delete person

src/components/App.tsx

@@ -4,7 +4,8 @@ import { Person } from '../family.interface';
 import Family from './Family';
 import ModalAddChild from './ModalAddChild';
 import ModalAddSpouse from './ModalAddSpouse';
-import { enrichTreeData, treesToRecord } from '../family.util';
+import ModalDeletePerson from './ModalDeletePerson';
+import { deletePerson, enrichTreeData, treesToRecord } from '../family.util';
 
 interface AppProps {
   trees: Person[];
@@ -34,13 +35,24 @@ function App(props: AppProps) {
     setShowModalAddSpouse(true);
   };
 
+  const [showModalDeletePerson, setShowModalDeletePerson] = useState(false);
+  const toggleModalDeletePerson = () => setShowModalDeletePerson(!showModalDeletePerson);
+  const openModalDeletePerson = () => {
+    setModalPerson(null);
+    setShowModalDeletePerson(true);
+  };
+
   const record = useMemo(() => treesToRecord(trees), [trees]);
 
   const setTreeValue = function (person: Person) {
     const personData: Record<string, Person> = { [person.id]: person };
     setTreesValue(enrichTreeData(trees, personData));
   };
 
+  const deleteTreePerson = (person: Person) => {
+    setTreesValue(deletePerson(trees, person.id));
+  };
+
   return (
     <div className="App">
       <Container fluid="sm">
@@ -82,11 +94,14 @@ function App(props: AppProps) {
             <Button size="sm" onClick={() => openModalChild(trees[0])}>
               Add child
             </Button>
-          </FormGroup>
-          <FormGroup>
+            {' '}
             <Button size="sm" onClick={() => openModalAddSpouse(trees[0])}>
               Add spouse
             </Button>
+            {' '}
+            <Button size="sm" onClick={() => openModalDeletePerson()} color="danger">
+              Delete person
+            </Button>
           </FormGroup>
         </Form>
 
@@ -116,6 +131,14 @@ function App(props: AppProps) {
         setPerson={setModalPerson}
         setTreeValue={setTreeValue}
       />
+      <ModalDeletePerson
+        isOpen={showModalDeletePerson}
+        toggle={toggleModalDeletePerson}
+        record={record}
+        person={modalPerson}
+        setPerson={setModalPerson}
+        deleteTreePerson={deleteTreePerson}
+      />
     </div>
   );
 }

src/components/ModalAddChild.tsx

@@ -6,6 +6,7 @@ import {
   Label,
   Modal,
   ModalBody,
+  ModalFooter,
   ModalHeader,
 } from 'reactstrap';
 import { Dispatch, useState } from 'react';
@@ -141,10 +142,12 @@ function ModalAddChild({
             {childError !== '' && <FormFeedback>{childError}</FormFeedback>}
           </FormGroup>
         )}
+      </ModalBody>
+      <ModalFooter>
         <Button disabled={!validForm()} onClick={handleSubmit}>
           Submit
         </Button>
-      </ModalBody>
+      </ModalFooter>
     </Modal>
   );
 }

src/components/ModalAddSpouse.tsx

@@ -6,6 +6,7 @@ import {
   Label,
   Modal,
   ModalBody,
+  ModalFooter,
   ModalHeader,
 } from 'reactstrap';
 import { Dispatch, useState } from 'react';
@@ -31,9 +32,7 @@ function ModalAddSpouse({
   const [spouse, setSpouse] = useState('');
   const [spouseError, setSpouseError] = useState('');
 
-  const marriedPeople = Object.values(record).filter(
-    person => person.marriages.length > 0
-  );
+  const people = Object.values(record);
 
   const handlePersonChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const person = record[event.target.value];
@@ -85,7 +84,7 @@ function ModalAddSpouse({
             onChange={handlePersonChange}
           >
             <option value="">Select a person</option>
-            {marriedPeople.map(person => (
+            {people.map(person => (
               <option key={person.id} value={person.id}>
                 {person.id}
               </option>
@@ -106,10 +105,12 @@ function ModalAddSpouse({
             {spouseError !== '' && <FormFeedback>{spouseError}</FormFeedback>}
           </FormGroup>
         )}
+      </ModalBody>
+      <ModalFooter>
         <Button disabled={!validForm()} onClick={handleSubmit}>
           Submit
         </Button>
-      </ModalBody>
+      </ModalFooter>
     </Modal>
   );
 }

src/components/ModalDeletePerson.tsx

@@ -0,0 +1,76 @@
+import {
+  Button,
+  FormGroup,
+  Input,
+  Label,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+} from 'reactstrap';
+import { Dispatch } from 'react';
+import { Person } from '../family.interface';
+
+interface ModalDeletePersonProps {
+  person: Person | null;
+  setPerson: Dispatch<any>;
+  isOpen: boolean;
+  toggle: () => void;
+  record: Record<string, Person>;
+  deleteTreePerson: (person: Person) => void;
+}
+
+function ModalDeletePerson({
+  person,
+  setPerson,
+  isOpen,
+  toggle,
+  record,
+  deleteTreePerson,
+}: ModalDeletePersonProps) {
+  const people = Object.values(record);
+
+  const handlePersonChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const person = record[event.target.value];
+    setPerson(person || null);
+  };
+
+  const handleSubmit = () => {
+    if (!person) return;
+
+    deleteTreePerson(person);
+    setPerson(null);
+    toggle();
+  };
+
+  return (
+    <Modal isOpen={isOpen} toggle={toggle} unmountOnClose>
+      <ModalHeader toggle={toggle}>Delete a person</ModalHeader>
+      <ModalBody>
+        <FormGroup>
+          <Label for="select-person">Person</Label>
+          <Input
+            type="select"
+            id="select-person"
+            value={person ? person.id : ''}
+            onChange={handlePersonChange}
+          >
+            <option value="">Select a person</option>
+            {people.map(person => (
+              <option key={person.id} value={person.id}>
+                {person.id}
+              </option>
+            ))}
+          </Input>
+        </FormGroup>
+      </ModalBody>
+      <ModalFooter>
+        <Button color="danger" disabled={!person} onClick={handleSubmit}>
+          Delete!
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+}
+
+export default ModalDeletePerson;

src/family.util.test.tsx

@@ -1,5 +1,6 @@
 import { Person } from './family.interface';
 import {
+  deletePerson,
   enrichTreeData,
   explodeTrees,
   treesToPersonNode,
@@ -181,3 +182,73 @@ test('convert trees to record', () => {
   // random sampling for satyr
   expect(record['satyr'].marriages[0].spouse).toEqual(record['surtr']);
 });
+
+test('delete person as root', () => {
+  const trees = enrichTreeData(familyData.trees, []);
+
+  expect(deletePerson(trees, 'satyr')).toEqual([]);
+});
+
+test('delete person as children', () => {
+  const trees = enrichTreeData(familyData.trees, []);
+
+  expect(deletePerson(trees, 'hound')).toEqual([{
+    id: 'satyr',
+    code: '1',
+    marriages: [{
+      spouse: { id: 'surtr', code: '1M1', marriages: [] },
+      children: []
+    }, {
+      spouse: { id: 'nala', code: '1M2', marriages: [] },
+      children: [{ id: 'mufasa', code: '1.201', marriages: [] }]
+    }]
+  }]);
+
+  expect(deletePerson(trees, 'ryora')).toEqual([{
+    id: 'satyr',
+    code: '1',
+    marriages: [{
+      spouse: { id: 'surtr', code: '1M1', marriages: [] },
+      children: [{
+        id: 'hound',
+        code: '1.101',
+        marriages: [{
+          spouse: { id: 'alpha', code: '1.101M', marriages: [] },
+          children: []
+        }]
+      }]
+    }, {
+      spouse: { id: 'nala', code: '1M2', marriages: [] },
+      children: [{ id: 'mufasa', code: '1.201', marriages: [] }]
+    }]
+  }]);
+});
+
+test('delete person as spouse', () => {
+  const trees = enrichTreeData(familyData.trees, []);
+
+  expect(deletePerson(trees, 'surtr')).toEqual([{
+    id: 'satyr',
+    code: '1',
+    marriages: [{
+      spouse: { id: 'nala', code: '1M2', marriages: [] },
+      children: [{ id: 'mufasa', code: '1.201', marriages: [] }]
+    }]
+  }]);
+
+  expect(deletePerson(trees, 'nala')).toEqual([{
+    id: 'satyr',
+    code: '1',
+    marriages: [{
+      spouse: { id: 'surtr', code: '1M1', marriages: [] },
+      children: [{
+        id: 'hound',
+        code: '1.101',
+        marriages: [{
+          spouse: { id: 'alpha', code: '1.101M', marriages: [] },
+          children: [{ id: 'ryora', code: '1.101.01', marriages: [] }]
+        }]
+      }]
+    }]
+  }]);
+});

src/family.util.tsx

@@ -69,6 +69,26 @@ export function treesToRecord(trees: Person[]): Record<string, Person> {
   return record;
 }
 
+// Delete person completely by id from the trees
+export function deletePerson(trees: Person[], id: string): Person[] {
+  const updatedTree: Person[] = [];
+  trees.forEach(person => {
+    if (person.id === id) return;
+
+    const updatedPerson: Person = {...person, marriages: []};
+    person.marriages.forEach(marriage => {
+      if (marriage.spouse.id === id) return;
+
+      const children = deletePerson(marriage.children, id);
+      const updatedMarriage: Marriage = {...marriage, children: children};
+      updatedPerson.marriages.push(updatedMarriage);
+    });
+    updatedTree.push(updatedPerson);
+  });
+
+  return updatedTree;
+}
+
 // create and assign default required value for Person
 function createPerson(data: any): Person {
   return {