made form great again

src/App.js

@@ -4,7 +4,6 @@ import './App.css';
 import { MdWarning as WarningIcon } from 'react-icons/md'
 import { TiTree as TreeIcon } from 'react-icons/ti'
 import { FaSmileWink as WinkEmoji } from 'react-icons/fa'
-import { Button } from '@material-ui/core'
 
 const styles = {
   row: {
@@ -60,7 +59,7 @@ class App extends Component {
           <img src={require('./invite.jpeg')} alt="invite" style={styles.logo}/>
           <ChristmasForm />
         </header>
-        <Button onClick={this.testClick}> TEST </Button>
+        <br /><br /><br />
       </div>
     );
   }

src/form.js

@@ -4,17 +4,18 @@ import { withStyles } from '@material-ui/core/styles';
 import MenuItem from '@material-ui/core/MenuItem';
 import TextField from '@material-ui/core/TextField';
 import Select from '@material-ui/core/Select';
+import { Button } from '@material-ui/core'
 import { FormControl, Input, InputLabel, FormHelperText } from '@material-ui/core'
 
 
 const styles = theme => ({
   container: {
-    display: 'block',
-
+    display: 'inline',
   },
   textField: {
     marginLeft: theme.spacing.unit,
     marginRight: theme.spacing.unit,
+    display: 'inline-block',
     width: 200,
   },
   dense: {
@@ -25,22 +26,32 @@ const styles = theme => ({
   },
   fullWidth: {
     width: '100%'
+  },
+  blackText: {
+    color: 'black'
+  },
+  floatLeft: {
+    float: 'left',
+    display: 'inline'
   }
 });
 
-const foodItems = [
-  'Cake',
-  'Turkey',
-  'Roasted Dog',
-  'Turnip',
-  'Ratatouille'
+const cats = [
+  'Cool Cat',
+  'Bad Kitty',
+  'King of the Jungle',
+  'Incel cat',
+  'C-ch-at-d',
+  'Decadent feline',
+  'Trapped in the litter box',
+  'All claw and no meow'
 ]
 
 
 class TextFields extends React.Component {
   state = {
     name: 'The Grinch',
-    foodItem: '',
+    cat: '',
     significantOther: false
   };
 
@@ -51,62 +62,76 @@ class TextFields extends React.Component {
   };
 
   handleFoodSelect = (event) => {
-    console.log('FOOD', event.target.value)
-    this.setState({foodItem: event.target.value})
+    this.setState({cat: event.target.value})
   }
 
   handleSignificantOther = () => {
     this.setState({significantOther: !this.state.significantOther})
   }
 
-  FoodItems = () => {
+  Cats = () => {
     const items = []
-    for (let i = 0; i < foodItems.length; i++) {
-      items.push(<MenuItem key={i} value={foodItems[i]}>{foodItems[i]}</MenuItem>)
+    for (let i = 0; i < cats.length; i++) {
+      items.push(<MenuItem key={i} value={cats[i]}>{cats[i]}</MenuItem>)
     }
 
     return items
   }
 
+  submitForm = async () => {
+    console.log(this.state)
+    const response = await fetch('http://localhost:3002/test', {
+      method: 'get'
+    })
+    console.log(response)
+  }
+
   render() {
     const { classes } = this.props;
 
     return (
       <form className={classes.container} noValidate autoComplete="off">
-        <div style={styles.fullWidth}>
+      <div style={styles.fullWidth}>
+          <InputLabel htmlFor="attendee-name">Who do you think you are?</InputLabel>
+
           <TextField
-            id="standard-name"
+            id="attendee-name"
             label="Name"
             className={classes.textField}
             value={this.state.name}
             onChange={this.handleChange('name')}
             margin="normal"
           />
-        </div>
-        <div style={styles.fullWidth}>
-        <InputLabel htmlFor="significant-other">Bringing someone?</InputLabel>
-          <input
-              id="significant-other"
-              name="Significant Other"
-              type="checkbox"
-              checked={this.state.significantOther}
-              onChange={this.handleSignificantOther} />
-        </div>
-
-          <FormControl className='food-select' style={styles.fullWidth}>
-            <InputLabel htmlFor="food-helper">What You Got, Gangster?</InputLabel>
-            <Select style={styles.fullWidth}
+      </div>
+      <br />
+      <div style={styles.fullWidth}>
+        <InputLabel htmlFor="significant-other" style={{float: 'left'}}>Bringing someone?</InputLabel>
+        <input
+            id="significant-other"
+            name="Significant Other"
+            type="checkbox"
+            className={classes.textField}
+            style={{verticalAlign: 'top', marginLeft: '-10em'}}
+            checked={this.state.significantOther}
+            onChange={this.handleSignificantOther} />
+      </div>
+          <FormControl className='food-select'>
+            <InputLabel htmlFor="food-helper">What sort of cat are you?</InputLabel>
+            <Select
               value={this.state.foodItem}
               onChange={this.handleFoodSelect}
               input={<Input name="food" id="food-helper" value={this.state.foodItem}/>}
             >
               <MenuItem value="">
-                <em>Not a damn thing!</em>
+                <em>The hell you talking about</em>
               </MenuItem>
-              {this.FoodItems()}
+              {this.Cats()}
             </Select>
-            <FormHelperText>Bring Us Food</FormHelperText>
+            <FormHelperText>Calling all cats and jive turkeys</FormHelperText>
           </FormControl>
+          <br />
+          <Button style={{marginTop: '1.25em'}}onClick={this.submitForm}> Click to Confirm Attendance </Button>
+
       </form>
     );
   }