{"size": 5239, "ext": "js", "max_stars_repo_path": "reactbrew/src/components/ItemCardCreate.js", "max_stars_repo_name": "trottmpq/brewpi", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "reactbrew/src/components/ItemCardCreate.js", "max_issues_repo_name": "trottmpq/brewpi", "max_issues_repo_issues_event_min_datetime": "2020-11-14T18:27:41.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-20T18:30:47.000Z", "max_forks_repo_path": "reactbrew/src/components/ItemCardCreate.js", "max_forks_repo_name": "trottmpq/brewpi", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 9, "max_forks_count": null, "avg_line_length": 33.5833333333, "max_line_length": 85, "alphanum_fraction": 0.4342431762}
import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import PropTypes from 'prop-types';
import Box from '@material-ui/core/Box';
import Button from '@material-ui/core/Button';
import Container from '@material-ui/core/Container';
import Divider from '@material-ui/core/Divider';
import Paper from '@material-ui/core/Paper';
import TextField from '@material-ui/core/TextField';
import Typography from '@material-ui/core/Typography';
import { Formik } from 'formik';
import * as Yup from 'yup';

const styles = theme => ({
  paper: {
    backgroundColor: theme.palette.background.paper,
    border: '0px solid #000',
    boxShadow: theme.shadows[5],
    padding: theme.spacing(2, 4, 3)
  }
});

class ItemCardCreate extends Component {
  close = () => {
    // this.props.handleClose();
  };

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

    return (
      <div>
        
        <Paper >
          <Container maxWidth="sm">
            <Formik
              initialValues={{ name: "New Name", gpio_num: 0, kettle_id : undefined}}
              validationSchema={Yup.object().shape({
                name: Yup.string()
                  .max(255)
                  .required('Name is required'),
                gpio_num: Yup.number()
                  .integer()
                  .required('GPIO Number is required'),
                  kettle_id: Yup.number()
                    .integer()
              })}
              onSubmit={(values, { setSubmitting }) => {
                console.log("Creating")
                console.log(this.props.URL)

                setTimeout(() => {
                  fetch(this.props.URL, {
                    method: 'POST',
                    body: JSON.stringify(values, null, 2),
                    headers: { 'Content-Type': 'application/json' }
                  })
                    .then(res => res.json())
                    .catch(error => console.error('Error:', error))
                    .then(response => console.log('Success:', response));
                  setSubmitting(false);
                  this.close();
                }, 400);
              }}
            >
              {({
                values,
                errors,
                touched,
                handleChange,
                handleBlur,
                handleSubmit,
                isSubmitting
                /* and other goodies */
              }) => (
                <form onSubmit={handleSubmit}>
                  <Box mb={3}>
                    <Typography color="textPrimary" variant="h2">
                      Create Item
                    </Typography>
                    <Typography
                      color="textSecondary"
                      gutterBottom
                      variant="body2"
                    >
                      Use this Form to create this item.
                    </Typography>
                  </Box>
                  <Divider />
                  <TextField
                    type="text"
                    name="name"
                    onChange={handleChange}
                    onBlur={handleBlur}
                    value={values.name}
                    error={Boolean(touched.name && errors.name)}
                    fullWidth
                    helperText={touched.name && errors.name}
                    label="Name"
                    margin="normal"
                    variant="outlined"
                  />
                  <TextField
                    type="number"
                    name="gpio_num"
                    onChange={handleChange}
                    onBlur={handleBlur}
                    value={values.gpio_num}
                    error={Boolean(touched.gpio_num && errors.gpio_num)}
                    fullWidth
                    helperText={touched.gpio_num && errors.gpio_num}
                    label="GPIO Number"
                    margin="normal"
                    variant="outlined"
                  />
                  <TextField
                    type="number"
                    name="kettle_id"
                    onChange={handleChange}
                    onBlur={handleBlur}
                    value={values.kettle_id}
                    error={Boolean(touched.kettle_id && errors.kettle_id)}
                    fullWidth
                    helperText={touched.kettle_id && errors.kettle_id}
                    label="Kettle ID"
                    margin="normal"
                    variant="outlined"
                  />

                  <Box my={2}>
                    <Button
                      color="primary"
                      disabled={isSubmitting}
                      fullWidth
                      size="large"
                      type="submit"
                      variant="contained"
                    >
                      Submit
                    </Button>
                  </Box>
                </form>
              )}
            </Formik>
          </Container>
        </Paper>
      </div>
    );
  }
}
ItemCardCreate.propTypes = {
  URL : PropTypes.string.isRequired,
  handleClose: PropTypes.func.isRequired
};
export default withStyles(styles)(ItemCardCreate);
