christmas/src/form.js

import React from 'react';
import PropTypes from 'prop-types';
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: 'inline',
  },
  textField: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit,
    display: 'inline-block',
    width: 200,
  },
  dense: {
    marginTop: 19,
  },
  menu: {
    width: 200,
  },
  fullWidth: {
    width: '100%'
  },
  blackText: {
    color: 'black'
  },
  floatLeft: {
    float: 'left',
    display: 'inline'
  }
});

const cats = [
  'Cool Cat',
  'Bad Kitty',
  'King of the Jungle',
  'Incel cat',
  'C-ch-at-d',
  'Sabretooth Bro',
  'Higher order being',
  'Decadent feline',
  'Trapped in the litter box',
  'All claw and no meow'
]

const MakeAttendees = (attendees) => {
  const items = []
  for (let i = 0; i < attendees.length; i++) {
    items.push(<div style={{flex: 1}}key={i}>{i+1}: <div><bold>Name:</bold> {attendees[i].name}</div><div><bold>Type: </bold>{attendees[i].cat ? attendees[i].cat : 'Incel, for sure'}</div><div><bold>Lonely: </bold>{attendees[i].guest ? 'Probably' : 'Very!'}</div><br /><br /></div>)
  }
  return (<div style={{display: 'block', color: 'black', fontSize: '50%'}}>{items}</div>)
}


class TextFields extends React.Component {

  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({
      [name]: event.target.value,
    });
  };

  handleFoodSelect = (event) => {
    this.setState({cat: event.target.value})
  }

  handleSignificantOther = () => {
    this.setState({significantOther: !this.state.significantOther})
  }

  Cats = () => {
    const items = []
    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 body = JSON.stringify({
      name: this.state.name,
      cat: this.state.cat,
      guest: this.state.significantOther,
    })

    const response = await fetch('http://localhost:3002/attendee', {
      method: 'post',
      body: body,
      headers: new Headers({
        'Content-Type': 'application/json'
      })
    })

    if (!response.error) {
      console.log('Success')
      this.setState({attendees: MakeAttendees(await this.fetchAttendees())})
    }
  }

  fetchAttendees = async () => {
    let attendees
    await fetch('http://localhost:3002/list', {
      method: 'get',
    }).then(data => {
      data.json().then(finalData => {
          attendees = finalData.attendees
      })
    })
    return attendees
  }

  updateAttendees = async () => {
    this.setState({ attendees: MakeAttendees(await this.fetchAttendees())})
  }

  render() {
    const { classes } = this.props;

    return (
      <div>
      <form className={classes.container} noValidate autoComplete="off">
      <div className='name-wrap' style={styles.fullWidth}>
          <InputLabel id='name-label' htmlFor="attendee-name">Name</InputLabel>

          <TextField
            id="attendee-name"
            label=""
            className={classes.textField}
            value={this.state.name}
            onChange={this.handleChange('name')}
            margin="normal"
          />
      </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.cat}
              onChange={this.handleFoodSelect}
              input={<Input name="food" id="food-helper" value={this.state.foodItem}/>}>
              <MenuItem value="">
                <em>The hell you talking about</em>
              </MenuItem>
              {this.Cats()}
            </Select>
            <FormHelperText>Calling all cats and jive turkeys</FormHelperText>
          </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 />
      </form>
      <h3>Such lovely people, these:</h3>
        {this.state.attendees}
      </div>
    );
  }
}

TextFields.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(TextFields);