Fix State Initialization

components/PrescriptionCreator/AddressForm.tsx

@@ -13,18 +13,21 @@ interface AddressForm {
 
 interface AddressFormProps {
   nestedFormCallback: (tag: string, form: Object) => void;
+  initForm: {[key: string]: any};
 }
+const ADDRESS_KEY = 'Address';
 
 export const AddressForm: React.FC<AddressFormProps> = ({
   nestedFormCallback,
+  initForm,
 }) => {
-  const [form, setForm] = useState<AddressForm>({});
+  const [form, setForm] = useState<AddressForm>(initForm[ADDRESS_KEY] || {});
 
   const handleTextChange = (tag: keyof AddressForm, text: string) => {
     let newForm = {...form};
     newForm[tag] = text;
     setForm(newForm);
-    nestedFormCallback('Address', newForm);
+    nestedFormCallback(ADDRESS_KEY, newForm);
   };
 
   return (

components/PrescriptionCreator/MedicineForm.tsx

@@ -12,20 +12,24 @@ interface MedicineForm {
   directions?: string;
 }
 
+const MEDICINE_KEY = 'MedicationPrescribed';
+
 interface MedicineFormProps {
   nestedFormCallback: (tag: string, form: Object) => void;
+  initForm: {[key: string]: any};
 }
 
 export const MedicineForm: React.FC<MedicineFormProps> = ({
   nestedFormCallback,
+  initForm,
 }) => {
-  const [form, setForm] = useState<MedicineForm>({});
+  const [form, setForm] = useState<MedicineForm>(initForm[MEDICINE_KEY] || {});
 
   const handleTextChange = (tag: keyof MedicineForm, text: string) => {
     let newForm = {...form};
     newForm[tag] = text;
     setForm(newForm);
-    nestedFormCallback('MedicationPrescribed', newForm);
+    nestedFormCallback(MEDICINE_KEY, newForm);
   };
 
   return (
@@ -85,7 +89,7 @@ export const MedicineForm: React.FC<MedicineFormProps> = ({
         <TextInput
           style={styles.input}
           placeholder="Enter directions"
-          value={form.refills}
+          value={form.directions}
           placeholderTextColor="white"
           onChangeText={(text: string) => handleTextChange('directions', text)}
         />

components/PrescriptionCreator/PatientForm.tsx

@@ -11,19 +11,25 @@ interface PatientForm {
 
 interface PatientFormProps {
   nestedFormCallback: (tag: string, form: Object) => void;
+  initForm: {[key: string]: any};
 }
 
+const PATIENT_KEY = 'patient';
+
 export const PatientForm: React.FC<PatientFormProps> = ({
   nestedFormCallback,
+  initForm,
 }) => {
-  const [form, setForm] = useState<PatientForm>({});
+  const [form, setForm] = useState<PatientForm>(
+    initForm[PATIENT_KEY]?.['human_patient'] || {},
+  );
   const [openDate, setOpenDate] = useState<boolean>(false);
 
   const handleTextChange = (tag: 'name' | 'date_of_birth', text: string) => {
     let newForm = {...form};
     newForm[tag] = text;
     setForm(newForm);
-    nestedFormCallback('patient', {human_patient: newForm});
+    nestedFormCallback(PATIENT_KEY, {human_patient: newForm});
   };
 
   return (
@@ -62,7 +68,7 @@ export const PatientForm: React.FC<PatientFormProps> = ({
           modal
           mode={'date'}
           open={openDate}
-          date={new Date(form.date_of_birth || '01-01-1999')}
+          date={new Date(form.date_of_birth || '1990-01-01')}
           onCancel={() => setOpenDate(false)}
           onConfirm={(date: Date) => {
             handleTextChange('date_of_birth', date.toDateString());

components/PrescriptionCreator/index.tsx

@@ -171,13 +171,22 @@ export const PrescriptionCreator = () => {
         <View style={{display: 'flex', flexDirection: 'column', width: '100%'}}>
           <Section title="Patient" collapsible={true}>
             {' '}
-            <PatientForm nestedFormCallback={nestedFormCallback} />
+            <PatientForm
+              initForm={finalJSON}
+              nestedFormCallback={nestedFormCallback}
+            />
           </Section>
           <Section title="Address" collapsible={true}>
-            <AddressForm nestedFormCallback={nestedFormCallback} />
+            <AddressForm
+              initForm={finalJSON}
+              nestedFormCallback={nestedFormCallback}
+            />
           </Section>
-          <Section title="Medicine" collapsible={true}>
+          <Section title="Medication" collapsible={true}>
-            <MedicineForm nestedFormCallback={nestedFormCallback} />
+            <MedicineForm
+              initForm={finalJSON}
+              nestedFormCallback={nestedFormCallback}
+            />
           </Section>
           <View style={{margin: 15}}>
             <Button onPress={handleButtonPress} title="Create Rx" />