From 7719672d1d9dc6692a4a4ea3a2e48023d330e4e1 Mon Sep 17 00:00:00 2001
From: Meghan McLaughlin <meghan-l-mclaughlin@uiowa.edu>
Date: Wed, 22 Apr 2020 16:17:38 -0500
Subject: [PATCH] added actual grouping and list headers for groups

---
 pwa/src/components/DiagnosisForm.tsx | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx
index 5807dac..f707741 100644
--- a/pwa/src/components/DiagnosisForm.tsx
+++ b/pwa/src/components/DiagnosisForm.tsx
@@ -33,7 +33,7 @@ var diagnosisFields = data.diagnoses
 export default function Form(): ReactElement {
     return (
         <div>
-            <List renderHeader={() => 'Patient Diagnosis'}>
+            {/* <List renderHeader={() => 'Patient Diagnosis'}> */}
                 {diagnosisFields.map((field) => {
                     const formElements: ReactElement[] = []
 
@@ -63,16 +63,11 @@ export default function Form(): ReactElement {
                     }
 
                     if (field.group != null) {
-                        if(field["group-title"] != null){
-                            formElements.push(
-                                <List
-                                renderHeader={() => field['group-title']}
-                                >
-                                </List>
-                            )
-                        }
+                        const groupElements: ReactElement[] = []
+
+                        // add each group element to the internalElement arrat
                         field.group.forEach((ele) => {
-                            formElements.push(
+                            groupElements.push(
                                 <CheckboxItem
                                     id={`${ele.toLowerCase()}-checkbox`}
                                     key={ele.toLowerCase()}
@@ -81,12 +76,23 @@ export default function Form(): ReactElement {
                                 </CheckboxItem>)
 
                         })
+
+                        // Render the entire list with the internal elements
+                        if(field["group-title"] != null){
+                            formElements.push(
+                                <List
+                                renderHeader={() => field['group-title']}
+                                >{groupElements}
+                                </List>
+                            )
+                        }
+
                         formElements.push(<WhiteSpace size="lg"/>)
                     }
 
                     return <> {formElements} </>
                 })}
-            </List>
+            {/* </List> */}
         </div>
     )
 }