refactor: use context to pass common states and vars across components

src/components/App.tsx

@@ -1,6 +1,7 @@
 import { Button, Container, Form, FormGroup, Input, Label } from 'reactstrap';
 import { useMemo, useState } from 'react';
 import { Person } from '../family.interface';
+import AppContext from './AppContext';
 import Family from './Family';
 import ModalAddChild from './ModalAddChild';
 import ModalAddSpouse from './ModalAddSpouse';
@@ -43,7 +44,7 @@ function App(props: AppProps) {
     setShowModalDeletePerson(true);
   };
 
-  const record = useMemo(() => treesToRecord(trees), [trees]);
+  const treeMap = useMemo(() => treesToRecord(trees), [trees]);
 
   const setTreeValue = function (person: Person) {
     const personData: Record<string, Person> = { [person.id]: person };
@@ -55,7 +56,16 @@ function App(props: AppProps) {
   };
 
   return (
-    <div className="App">
+    <AppContext.Provider
+      value={{
+        split,
+        editMode,
+        hidePersonCode,
+        setTreeValue,
+        deleteTreePerson,
+        treeMap,
+      }}
+    >
       <Container className="d-print-none" fluid="sm">
         <Form>
           <FormGroup switch>
@@ -110,42 +120,30 @@ function App(props: AppProps) {
       </Container>
 
       <Container className="pb-3" fluid="sm">
-        <Family
-          trees={trees}
-          split={split}
-          editMode={editMode}
-          hideCode={hidePersonCode}
-          setTreeValue={setTreeValue}
-        />
+        <Family trees={trees} />
       </Container>
 
       <ModalAddChild
         isOpen={showModalChild}
         toggle={toggleModalChild}
-        record={record}
         person={modalPerson}
         setPerson={setModalPerson}
         spouse={modalSpouse}
         setSpouse={setModalSpouse}
-        setTreeValue={setTreeValue}
       />
       <ModalAddSpouse
         isOpen={showModalAddSpouse}
         toggle={toggleModalAddSpouse}
-        record={record}
         person={modalPerson}
         setPerson={setModalPerson}
-        setTreeValue={setTreeValue}
       />
       <ModalDeletePerson
         isOpen={showModalDeletePerson}
         toggle={toggleModalDeletePerson}
-        record={record}
         person={modalPerson}
         setPerson={setModalPerson}
-        deleteTreePerson={deleteTreePerson}
       />
-    </div>
+    </AppContext.Provider>
   );
 }
 

src/components/AppContext.tsx

@@ -0,0 +1,22 @@
+import { createContext } from 'react';
+import { Person } from '../family.interface';
+
+interface AppContextValue {
+  split: boolean;
+  editMode: boolean;
+  hidePersonCode: boolean;
+  setTreeValue: (p: Person) => void;
+  deleteTreePerson: (p: Person) => void;
+  treeMap: Record<string, Person>;
+}
+
+const AppContext = createContext<AppContextValue>({
+  split: false,
+  editMode: false,
+  hidePersonCode: false,
+  setTreeValue: () => {},
+  deleteTreePerson: () => {},
+  treeMap: {},
+});
+
+export default AppContext;

src/components/Family.tsx

@@ -1,23 +1,21 @@
-import { Fragment } from 'react';
+import { Fragment, useContext } from 'react';
 import { Person } from '../family.interface';
+import AppContext from './AppContext';
 import FamilyGrid from './FamilyGrid';
 import FamilyDiagram from './FamilyDiagram';
 import { explodeTrees } from '../family.util';
 
 interface FamilyProps {
   trees: Person[];
-  split: boolean;
-  editMode: boolean;
-  hideCode: boolean;
-  setTreeValue: (p: Person) => void;
 }
 
 export default function Family(props: FamilyProps) {
-  return props.split ? <SplitFamilies {...props} /> : <BigFamily {...props} />;
+  const { split } = useContext(AppContext);
+  return split ? <SplitFamilies {...props} /> : <BigFamily {...props} />;
 }
 
-function SplitFamilies(props: FamilyProps) {
-  const people = explodeTrees(props.trees).filter(
+function SplitFamilies({ trees, ...props }: FamilyProps) {
+  const people = explodeTrees(trees).filter(
     person => person.marriages.length !== 0
   );
 
@@ -35,13 +33,13 @@ function SplitFamilies(props: FamilyProps) {
   );
 }
 
-function BigFamily(props: FamilyProps) {
+function BigFamily({ trees, ...props }: FamilyProps) {
   return (
     <Fragment>
       <hr className="d-print-none" />
       <h3 className="text-center">Family Grid</h3>
-      <FamilyDiagram trees={props.trees} />
-      <FamilyGrid {...props} />
+      <FamilyDiagram trees={trees} />
+      <FamilyGrid {...props} trees={trees} />
     </Fragment>
   );
 }

src/components/FamilyGrid.tsx

@@ -1,22 +1,21 @@
-import { ChangeEvent } from 'react';
+import { ChangeEvent, useContext } from 'react';
 import { Input, Table } from 'reactstrap';
 import { Person } from '../family.interface';
 import { explodeTrees } from '../family.util';
+import AppContext from './AppContext';
 
 interface FamilyGridProps {
   trees: Person[];
-  split: boolean;
-  editMode: boolean;
-  hideCode: boolean;
-  setTreeValue: (p: Person) => void;
 }
 
-export default function FamilyGrid(props: FamilyGridProps) {
+export default function FamilyGrid({ trees }: FamilyGridProps) {
+  const { hidePersonCode } = useContext(AppContext);
+
   return (
     <Table size="sm" bordered hover responsive>
       <thead>
         <tr>
-          <th style={{ width: '7em' }} hidden={props.hideCode}>
+          <th style={{ width: '7em' }} hidden={hidePersonCode}>
             Code
           </th>
           <th style={{ width: '15.5em' }}>Name</th>
@@ -28,15 +27,8 @@ export default function FamilyGrid(props: FamilyGridProps) {
         </tr>
       </thead>
       <tbody>
-        {props.trees.map(person => (
-          <FamilyRows
-            key={person.id}
-            person={person}
-            split={props.split}
-            editMode={props.editMode}
-            hideCode={props.hideCode}
-            setTreeValue={props.setTreeValue}
-          />
+        {trees.map(person => (
+          <FamilyRows key={person.id} person={person} />
         ))}
       </tbody>
     </Table>
@@ -45,18 +37,15 @@ export default function FamilyGrid(props: FamilyGridProps) {
 
 interface PersonRowProps {
   person: Person;
-  split?: boolean;
-  editMode: boolean;
-  hideCode: boolean;
-  setTreeValue: (p: Person) => void;
 }
 
-function FamilyRows(props: PersonRowProps) {
+function FamilyRows({ person, ...props }: PersonRowProps) {
+  const { split } = useContext(AppContext);
   var heirs: Person[];
-  if (props.split) {
-    heirs = explodeTrees([props.person], 2);
+  if (split) {
+    heirs = explodeTrees([person], 2);
   } else {
-    heirs = explodeTrees([props.person]);
+    heirs = explodeTrees([person]);
   }
 
   return (
@@ -68,26 +57,24 @@ function FamilyRows(props: PersonRowProps) {
   );
 }
 
-function PersonRow(props: PersonRowProps) {
-  const person = props.person;
+function PersonRow({ person }: PersonRowProps) {
+  const { editMode, hidePersonCode, setTreeValue } = useContext(AppContext);
   const name = person.name || person.id;
 
   const updatePerson = function (e: ChangeEvent<any>, key: string) {
-    if (props.setTreeValue) {
-      props.setTreeValue({ ...person, [key]: e.target.value });
-    }
+    setTreeValue({ ...person, [key]: e.target.value });
   };
 
   let inputClass = 'd-none';
   let spanClass = '';
-  if (props.editMode) {
+  if (editMode) {
     inputClass = 'd-print-none';
     spanClass = 'd-none d-print-block';
   }
 
   return (
     <tr>
-      <td hidden={props.hideCode}>
+      <td hidden={hidePersonCode}>
         <span>{person.code}</span>
       </td>
       <td>

src/components/ModalAddChild.tsx

@@ -9,8 +9,9 @@ import {
   ModalFooter,
   ModalHeader,
 } from 'reactstrap';
-import { Dispatch, useState } from 'react';
+import { Dispatch, useContext, useState } from 'react';
 import { Marriage, Person } from '../family.interface';
+import AppContext from './AppContext';
 
 interface ModalAddChildProps {
   person: Person | null;
@@ -19,8 +20,6 @@ interface ModalAddChildProps {
   setSpouse: Dispatch<any>;
   isOpen: boolean;
   toggle: () => void;
-  record: Record<string, Person>;
-  setTreeValue: (p: Person) => void;
 }
 
 function ModalAddChild({
@@ -30,18 +29,17 @@ function ModalAddChild({
   setSpouse,
   isOpen,
   toggle,
-  record,
-  setTreeValue,
 }: ModalAddChildProps) {
+  const { treeMap, setTreeValue } = useContext(AppContext);
   const [child, setChild] = useState('');
   const [childError, setChildError] = useState('');
 
-  const marriedPeople = Object.values(record).filter(
+  const marriedPeople = Object.values(treeMap).filter(
     person => person.marriages.length > 0
   );
 
   const handlePersonChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const person = record[event.target.value];
+    const person = treeMap[event.target.value];
     setPerson(person || null);
     setSpouse(null);
     if (person.marriages.length === 1) {
@@ -51,7 +49,7 @@ function ModalAddChild({
   };
 
   const handleSpouseChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const spouse = record[event.target.value];
+    const spouse = treeMap[event.target.value];
     setSpouse(spouse || null);
     setChild('');
   };
@@ -61,7 +59,7 @@ function ModalAddChild({
     setChild(value);
 
     setChildError('');
-    if (Object.keys(record).includes(value)) {
+    if (Object.keys(treeMap).includes(value)) {
       setChildError(value + ' is already taken');
     }
   };

src/components/ModalAddSpouse.tsx

@@ -9,33 +9,31 @@ import {
   ModalFooter,
   ModalHeader,
 } from 'reactstrap';
-import { Dispatch, useState } from 'react';
+import { Dispatch, useContext, useState } from 'react';
 import { Marriage, Person } from '../family.interface';
+import AppContext from './AppContext';
 
 interface ModalAddSpouseProps {
   person: Person | null;
   setPerson: Dispatch<any>;
   isOpen: boolean;
   toggle: () => void;
-  record: Record<string, Person>;
-  setTreeValue: (p: Person) => void;
 }
 
 function ModalAddSpouse({
   person,
   setPerson,
   isOpen,
   toggle,
-  record,
-  setTreeValue,
 }: ModalAddSpouseProps) {
+  const { treeMap, setTreeValue } = useContext(AppContext);
   const [spouse, setSpouse] = useState('');
   const [spouseError, setSpouseError] = useState('');
 
-  const people = Object.values(record);
+  const people = Object.values(treeMap);
 
   const handlePersonChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const person = record[event.target.value];
+    const person = treeMap[event.target.value];
     setPerson(person || null);
     setSpouse('');
   };
@@ -45,7 +43,7 @@ function ModalAddSpouse({
     setSpouse(event.target.value);
 
     setSpouseError('');
-    if (Object.keys(record).includes(value)) {
+    if (Object.keys(treeMap).includes(value)) {
       setSpouseError(value + ' is already taken');
     }
   };

src/components/ModalDeletePerson.tsx

@@ -8,30 +8,28 @@ import {
   ModalFooter,
   ModalHeader,
 } from 'reactstrap';
-import { Dispatch } from 'react';
+import { Dispatch, useContext } from 'react';
 import { Person } from '../family.interface';
+import AppContext from './AppContext';
 
 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 { treeMap, deleteTreePerson } = useContext(AppContext);
+  const people = Object.values(treeMap);
 
   const handlePersonChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const person = record[event.target.value];
+    const person = treeMap[event.target.value];
     setPerson(person || null);
   };