updated

src/App.css

@@ -34,3 +34,7 @@
     transform: rotate(360deg);
   }
 }
+
+#name-label {
+  line-height: 4;
+}

src/App.js

@@ -59,7 +59,7 @@ class App extends Component {
           <img src={require('./invite.jpeg')} alt="invite" style={styles.logo}/>
           <ChristmasForm />
         </header>
-        <br /><br /><br />
+
       </div>
     );
   }

src/form.js

@@ -59,12 +59,22 @@ const MakeAttendees = (attendees) => {
 
 
 class TextFields extends React.Component {
-  state = {
-    name: 'The Grinch',
-    cat: '',
-    significantOther: false,
-    attendees: undefined
-  };
+
+  constructor (props) {
+    super(props)
+    this.state = {
+      name: 'The Grinch',
+      cat: '',
+      significantOther: false,
+      attendees: undefined
+    }
+  }
+
+  async componentDidMount () {
+    this.setState({
+      attendees: MakeAttendees(await this.fetchAttendees())
+    })
+  }
 
   handleChange = name => event => {
     this.setState({
@@ -104,23 +114,23 @@ class TextFields extends React.Component {
         'Content-Type': 'application/json'
       })
     })
-    console.log(response)
+
+    if (!response.error) {
+      console.log('Success')
+      this.setState({attendees: MakeAttendees(await this.fetchAttendees())})
+    }
   }
 
   fetchAttendees = async () => {
-    return await fetch('http://localhost:3002/list', {
+    let attendees
+    await fetch('http://localhost:3002/list', {
       method: 'get',
-    })
+    }).then(data => data.json().then(finalData => attendees = finalData.attendees))
+    return attendees
   }
 
   updateAttendees = async () => {
-    const attendees = await this.fetchAttendees().then(data => {
-      data.json().then(finalData => {
-        if ('attendees' in finalData) {
-          this.setState({ attendees: MakeAttendees(finalData.attendees)})
-        }
-      })
-    })
+    this.setState({ attendees: MakeAttendees(await this.fetchAttendees())})
   }
 
   render() {
@@ -129,12 +139,12 @@ class TextFields extends React.Component {
     return (
       <div>
       <form className={classes.container} noValidate autoComplete="off">
-      <div style={styles.fullWidth}>
-          <InputLabel htmlFor="attendee-name">Who do you think you are?</InputLabel>
+      <div className='name-wrap' style={styles.fullWidth}>
+          <InputLabel id='name-label' htmlFor="attendee-name">Name</InputLabel>
 
           <TextField
             id="attendee-name"
-            label="Name"
+            label=""
             className={classes.textField}
             value={this.state.name}
             onChange={this.handleChange('name')}
@@ -158,8 +168,7 @@ class TextFields extends React.Component {
             <Select
               value={this.state.cat}
               onChange={this.handleFoodSelect}
-              input={<Input name="food" id="food-helper" value={this.state.foodItem}/>}
-            >
+              input={<Input name="food" id="food-helper" value={this.state.foodItem}/>}>
               <MenuItem value="">
                 <em>The hell you talking about</em>
               </MenuItem>
@@ -169,17 +178,12 @@ class TextFields extends React.Component {
           </FormControl>
           <br />
           <Button style={{marginTop: '1.25em'}}onClick={this.submitForm}> Click to Confirm Attendance </Button>
-
-          <br />
-          <br />
-          <Button style={{marginTop: '1.25em'}}onClick={this.updateAttendees}> Who's coming? </Button>
-
-          <br />
           <br /><br />
+          <Button style={{marginTop: '1.25em'}}onClick={this.updateAttendees}> Who's coming? </Button>
           <br /><br />
-          <br />
       </form>
-      {this.state.attendees}
+      <h3>Such lovely people, these:</h3>
+        {this.state.attendees}
       </div>
     );
   }

src/server/index.js

@@ -80,10 +80,10 @@ class App {
                 }
               }).then( attendee => {
                 console.log('Successfully updated attendee:', attendee)
+                res.json({response: 'success', code: 200, error: false})
               })
             })
           }
-          res.json({response: 'yeah we got you'})
         })
     }
 }