From 03e84d9fb9b9b2d4cfb74d0bc91a1ec964376923 Mon Sep 17 00:00:00 2001
From: "risyanggi.faizin" <risyanggi.faizin@gojek.com>
Date: Sun, 30 Jul 2023 06:12:08 +0700
Subject: [PATCH 1/4] chore: enable edit person sex

---
 src/components/FamilyGrid.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/FamilyGrid.tsx b/src/components/FamilyGrid.tsx
index 7e94038..a12ab86 100644
--- a/src/components/FamilyGrid.tsx
+++ b/src/components/FamilyGrid.tsx
@@ -9,7 +9,7 @@ interface FamilyGridProps {
 }
 
 export default function FamilyGrid({ trees }: FamilyGridProps) {
-  const { hidePersonCode } = useContext(AppContext);
+  const { editMode, hidePersonCode } = useContext(AppContext);
 
   return (
     <Table size="sm" bordered hover responsive>
@@ -19,6 +19,7 @@ export default function FamilyGrid({ trees }: FamilyGridProps) {
             Code
           </th>
           <th style={{ width: '15.5em' }}>Name</th>
+          {editMode && <th style={{ width: '5em' }}>Sex</th>}
           <th style={{ width: '7em' }}>Birthplace</th>
           <th style={{ width: '7em' }}>Birthdate</th>
           <th style={{ width: '8.5em' }}>Phone</th>
@@ -90,6 +91,22 @@ function PersonRow({ person }: PersonRowProps) {
           {person.name && <small className="fw-light"> ({person.id})</small>}
         </span>
       </td>
+      {editMode && (
+        <td>
+          <Input
+            type="select"
+            bsSize="sm"
+            className={inputClass}
+            value={person.sex || ''}
+            onChange={e => updatePerson(e, 'sex')}
+          >
+            <option value=""></option>
+            <option value="M">Male</option>
+            <option value="F">Female</option>
+          </Input>
+          <span className={spanClass}>{person.sex}</span>
+        </td>
+      )}
       <td>
         <Input
           bsSize="sm"

From cf96c94c1c03dfa45f01346ce59425998a7a080d Mon Sep 17 00:00:00 2001
From: "risyanggi.faizin" <risyanggi.faizin@gojek.com>
Date: Tue, 1 Aug 2023 07:01:50 +0700
Subject: [PATCH 2/4] chore: using sex map

---
 src/components/FamilyGrid.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/FamilyGrid.tsx b/src/components/FamilyGrid.tsx
index a12ab86..e4a91e8 100644
--- a/src/components/FamilyGrid.tsx
+++ b/src/components/FamilyGrid.tsx
@@ -72,6 +72,10 @@ function PersonRow({ person }: PersonRowProps) {
     inputClass = 'd-print-none';
     spanClass = 'd-none d-print-block';
   }
+  const sexMap: Record<string, string> = {
+    F: 'Female',
+    M: 'Male',
+  };
 
   return (
     <tr>
@@ -101,10 +105,10 @@ function PersonRow({ person }: PersonRowProps) {
             onChange={e => updatePerson(e, 'sex')}
           >
             <option value=""></option>
-            <option value="M">Male</option>
-            <option value="F">Female</option>
+            <option value="M">{sexMap.M}</option>
+            <option value="F">{sexMap.F}</option>
           </Input>
-          <span className={spanClass}>{person.sex}</span>
+          <span className={spanClass}>{person.sex ? sexMap[person.sex] || '' : ''}</span>
         </td>
       )}
       <td>

From bc4095fd67ac11cebecb912300d0e96a80c106f3 Mon Sep 17 00:00:00 2001
From: "risyanggi.faizin" <risyanggi.faizin@gojek.com>
Date: Tue, 1 Aug 2023 06:44:56 +0700
Subject: [PATCH 3/4] refactor: rename hideCode to showCode

---
 src/components/App.tsx        | 18 +++++++++---------
 src/components/AppContext.tsx |  4 ++--
 src/components/FamilyGrid.tsx | 12 ++++--------
 3 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index f43e543..9abc6b8 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -21,7 +21,7 @@ function App(props: AppProps) {
   const [trees, setTreesValue] = useCache('trees', props.trees);
 
   const [split, setSplitValue] = useCache('split', !!props.split);
-  const [hidePersonCode, setHideCode] = useCache('hideCode', false);
+  const [showPersonCode, setShowCode] = useCache('showPersonCode', true);
   const [editMode, setEditModeValue] = useState(false);
 
   const [modalPerson, setModalPerson] = useState(null as Person | null);
@@ -79,7 +79,7 @@ function App(props: AppProps) {
       value={{
         split,
         editMode,
-        hidePersonCode,
+        showPersonCode,
         treeMap,
         setTreesValue,
         upsertPerson,
@@ -96,18 +96,18 @@ function App(props: AppProps) {
               onChange={() => setSplitValue(!split)}
             />
             <Label for="split-switch" check>
-              Split Family
+              Split family
             </Label>
           </FormGroup>
           <FormGroup switch>
             <Input
               type="switch"
-              checked={hidePersonCode}
-              id="hidePersonCode-switch"
-              onChange={() => setHideCode(!hidePersonCode)}
+              checked={showPersonCode}
+              id="showPersonCode-switch"
+              onChange={() => setShowCode(!showPersonCode)}
             />
-            <Label for="hidePersonCode-switch" check>
-              Hide Code
+            <Label for="showPersonCode-switch" check>
+              Show person code
             </Label>
           </FormGroup>
           <FormGroup switch>
@@ -118,7 +118,7 @@ function App(props: AppProps) {
               onChange={() => setEditModeValue(!editMode)}
             />
             <Label for="editMode-switch" check>
-              Edit Mode
+              Edit mode
             </Label>
           </FormGroup>
           <FormGroup>
diff --git a/src/components/AppContext.tsx b/src/components/AppContext.tsx
index 44e10b9..715f43a 100644
--- a/src/components/AppContext.tsx
+++ b/src/components/AppContext.tsx
@@ -4,7 +4,7 @@ import { Person } from '../family.interface';
 interface AppContextValue {
   split: boolean;
   editMode: boolean;
-  hidePersonCode: boolean;
+  showPersonCode: boolean;
   setTreesValue: (ps: Person[]) => void;
   upsertPerson: (p: Person) => void;
   deletePerson: (p: Person) => void;
@@ -14,7 +14,7 @@ interface AppContextValue {
 const AppContext = createContext<AppContextValue>({
   split: false,
   editMode: false,
-  hidePersonCode: false,
+  showPersonCode: false,
   setTreesValue: () => {},
   upsertPerson: () => {},
   deletePerson: () => {},
diff --git a/src/components/FamilyGrid.tsx b/src/components/FamilyGrid.tsx
index e4a91e8..69b1ec5 100644
--- a/src/components/FamilyGrid.tsx
+++ b/src/components/FamilyGrid.tsx
@@ -9,15 +9,13 @@ interface FamilyGridProps {
 }
 
 export default function FamilyGrid({ trees }: FamilyGridProps) {
-  const { editMode, hidePersonCode } = useContext(AppContext);
+  const { editMode, showPersonCode } = useContext(AppContext);
 
   return (
     <Table size="sm" bordered hover responsive>
       <thead>
         <tr>
-          <th style={{ width: '7em' }} hidden={hidePersonCode}>
-            Code
-          </th>
+          {showPersonCode && (<th style={{ width: '7em' }}>Code</th>)}
           <th style={{ width: '15.5em' }}>Name</th>
           {editMode && <th style={{ width: '5em' }}>Sex</th>}
           <th style={{ width: '7em' }}>Birthplace</th>
@@ -59,7 +57,7 @@ function FamilyRows({ person, ...props }: PersonRowProps) {
 }
 
 function PersonRow({ person }: PersonRowProps) {
-  const { editMode, hidePersonCode, upsertPerson } = useContext(AppContext);
+  const { editMode, showPersonCode, upsertPerson } = useContext(AppContext);
   const name = person.name || person.id;
 
   const updatePerson = function (e: ChangeEvent<any>, key: string) {
@@ -79,9 +77,7 @@ function PersonRow({ person }: PersonRowProps) {
 
   return (
     <tr>
-      <td hidden={hidePersonCode}>
-        <span>{person.code}</span>
-      </td>
+      {showPersonCode && (<td><span>{person.code}</span></td>)}
       <td>
         <Input
           bsSize="sm"

From 05ffd9142d07c162d3f0e4938187cd43c15e1242 Mon Sep 17 00:00:00 2001
From: "risyanggi.faizin" <risyanggi.faizin@gojek.com>
Date: Tue, 1 Aug 2023 07:03:05 +0700
Subject: [PATCH 4/4] chore: enable controlling showing person sex and death
 date

---
 src/components/App.tsx        | 28 ++++++++++++++++++++++++
 src/components/AppContext.tsx |  4 ++++
 src/components/FamilyGrid.tsx | 40 +++++++++++++++++++++++++++--------
 3 files changed, 63 insertions(+), 9 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 9abc6b8..440ea53 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -22,6 +22,8 @@ function App(props: AppProps) {
 
   const [split, setSplitValue] = useCache('split', !!props.split);
   const [showPersonCode, setShowCode] = useCache('showPersonCode', true);
+  const [showSex, setShowSex] = useCache('showSex', false);
+  const [showDeathdate, setShowDeathdate] = useCache('showDeathdate', false);
   const [editMode, setEditModeValue] = useState(false);
 
   const [modalPerson, setModalPerson] = useState(null as Person | null);
@@ -80,6 +82,8 @@ function App(props: AppProps) {
         split,
         editMode,
         showPersonCode,
+        showSex,
+        showDeathdate,
         treeMap,
         setTreesValue,
         upsertPerson,
@@ -110,6 +114,30 @@ function App(props: AppProps) {
               Show person code
             </Label>
           </FormGroup>
+          <FormGroup switch>
+            <Input
+              type="switch"
+              checked={editMode || showSex}
+              id="showSex-switch"
+              disabled={editMode}
+              onChange={() => setShowSex(!showSex)}
+            />
+            <Label for="showSex-switch" check>
+              Show person sex
+            </Label>
+          </FormGroup>
+          <FormGroup switch>
+            <Input
+              type="switch"
+              checked={editMode || showDeathdate}
+              id="showDeathdate-switch"
+              disabled={editMode}
+              onChange={() => setShowDeathdate(!showDeathdate)}
+            />
+            <Label for="showDeathdate-switch" check>
+              Show person death date
+            </Label>
+          </FormGroup>
           <FormGroup switch>
             <Input
               type="switch"
diff --git a/src/components/AppContext.tsx b/src/components/AppContext.tsx
index 715f43a..a901aee 100644
--- a/src/components/AppContext.tsx
+++ b/src/components/AppContext.tsx
@@ -5,6 +5,8 @@ interface AppContextValue {
   split: boolean;
   editMode: boolean;
   showPersonCode: boolean;
+  showSex: boolean;
+  showDeathdate: boolean;
   setTreesValue: (ps: Person[]) => void;
   upsertPerson: (p: Person) => void;
   deletePerson: (p: Person) => void;
@@ -15,6 +17,8 @@ const AppContext = createContext<AppContextValue>({
   split: false,
   editMode: false,
   showPersonCode: false,
+  showSex: false,
+  showDeathdate: false,
   setTreesValue: () => {},
   upsertPerson: () => {},
   deletePerson: () => {},
diff --git a/src/components/FamilyGrid.tsx b/src/components/FamilyGrid.tsx
index 69b1ec5..72eb608 100644
--- a/src/components/FamilyGrid.tsx
+++ b/src/components/FamilyGrid.tsx
@@ -9,17 +9,21 @@ interface FamilyGridProps {
 }
 
 export default function FamilyGrid({ trees }: FamilyGridProps) {
-  const { editMode, showPersonCode } = useContext(AppContext);
+  const { editMode, showPersonCode, showSex, showDeathdate } =
+    useContext(AppContext);
 
   return (
     <Table size="sm" bordered hover responsive>
       <thead>
         <tr>
-          {showPersonCode && (<th style={{ width: '7em' }}>Code</th>)}
+          {showPersonCode && <th style={{ width: '7em' }}>Code</th>}
           <th style={{ width: '15.5em' }}>Name</th>
-          {editMode && <th style={{ width: '5em' }}>Sex</th>}
-          <th style={{ width: '7em' }}>Birthplace</th>
-          <th style={{ width: '7em' }}>Birthdate</th>
+          {(editMode || showSex) && <th style={{ width: '5em' }}>Sex</th>}
+          <th style={{ width: '7em' }}>Birth place</th>
+          <th style={{ width: '7em' }}>Birth date</th>
+          {(editMode || showDeathdate) && (
+            <th style={{ width: '7em' }}>Death date</th>
+          )}
           <th style={{ width: '8.5em' }}>Phone</th>
           <th style={{ width: '18.5em' }}>Address</th>
           <th style={{ width: '8.5em' }}>IG</th>
@@ -57,7 +61,8 @@ function FamilyRows({ person, ...props }: PersonRowProps) {
 }
 
 function PersonRow({ person }: PersonRowProps) {
-  const { editMode, showPersonCode, upsertPerson } = useContext(AppContext);
+  const { editMode, showPersonCode, showSex, showDeathdate, upsertPerson } =
+    useContext(AppContext);
   const name = person.name || person.id;
 
   const updatePerson = function (e: ChangeEvent<any>, key: string) {
@@ -77,7 +82,11 @@ function PersonRow({ person }: PersonRowProps) {
 
   return (
     <tr>
-      {showPersonCode && (<td><span>{person.code}</span></td>)}
+      {showPersonCode && (
+        <td>
+          <span>{person.code}</span>
+        </td>
+      )}
       <td>
         <Input
           bsSize="sm"
@@ -91,7 +100,7 @@ function PersonRow({ person }: PersonRowProps) {
           {person.name && <small className="fw-light"> ({person.id})</small>}
         </span>
       </td>
-      {editMode && (
+      {(editMode || showSex) && (
         <td>
           <Input
             type="select"
@@ -104,7 +113,9 @@ function PersonRow({ person }: PersonRowProps) {
             <option value="M">{sexMap.M}</option>
             <option value="F">{sexMap.F}</option>
           </Input>
-          <span className={spanClass}>{person.sex ? sexMap[person.sex] || '' : ''}</span>
+          <span className={spanClass}>
+            {person.sex ? sexMap[person.sex] || '' : ''}
+          </span>
         </td>
       )}
       <td>
@@ -125,6 +136,17 @@ function PersonRow({ person }: PersonRowProps) {
         />
         <span className={spanClass}>{person.birthdate}</span>
       </td>
+      {(editMode || showDeathdate) && (
+        <td>
+          <Input
+            bsSize="sm"
+            className={inputClass}
+            value={person.deathdate || ''}
+            onChange={e => updatePerson(e, 'deathdate')}
+          />
+          <span className={spanClass}>{person.deathdate}</span>
+        </td>
+      )}
       <td>
         <Input
           bsSize="sm"