refactor: use context for modals

rafgugi · Jul 6, 2023 · e760601 · e760601
1 parent b032574
commit e760601
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 32 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -44,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 };
@@ -57,7 +57,14 @@ function App(props: AppProps) {
 
   return (
     <AppContext.Provider
-      value={{ split, editMode, hidePersonCode, setTreeValue }}
+      value={{
+        split,
+        editMode,
+        hidePersonCode,
+        setTreeValue,
+        deleteTreePerson,
+        treeMap,
+      }}
     >
       <Container fluid="sm">
         <Form className="d-print-none">
@@ -116,28 +123,22 @@ function App(props: AppProps) {
       <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}
       />
     </AppContext.Provider>
   );

diff --git a/src/components/AppContext.tsx b/src/components/AppContext.tsx
@@ -6,13 +6,17 @@ interface AppContextValue {
   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;
diff --git a/src/components/ModalAddChild.tsx b/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');
     }
   };

diff --git a/src/components/ModalAddSpouse.tsx b/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');
     }
   };

diff --git a/src/components/ModalDeletePerson.tsx b/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);
   };