ProductCategoryCreate.js

import React, { useState, useEffect } from 'react';
import clsx from 'clsx';
import validate from 'validate.js';
import { makeStyles } from '@material-ui/styles';
import {
  Button,
  Card,
  CardActions,
  CardContent,
  TextField,
  Divider,
  colors
} from '@material-ui/core';
import { Grid } from '@material-ui/core';

import useRouter from 'utils/useRouter';
import { Page, CustomSnackbar } from 'components';

import { Header } from './components';
import { ProductCategoryService } from '../../services';

const validationSchema = {
  name: {
    presence: { allowEmpty: false, message: 'campo obrigatório' }
  }
};

const useStyles = makeStyles(theme => ({
  root: {
    width: theme.breakpoints.values.lg,
    maxWidth: '100%',
    margin: '0 auto',
    padding: theme.spacing(3, 3, 6, 3)
  },
  saveButton: {
    color: theme.palette.white,
    backgroundColor: colors.green[600],
    '&:hover': {
      backgroundColor: colors.green[900]
    }
  }
}));

const ProductCategoryCreate = props => {
  const { className } = props;

  const [formData, setFormData] = useState({
    isValid: false,
    values: {},
    touched: {},
    errors: {}
  });

  const [snackbar, setSnackbar] = useState({
    open: false,
    message: '',
    type: 'info',
    delay: 1500
  });
  const [showSnackbar, setShowSnackbar] = useState(false);
  const [busy, setBusy] = useState(false);

  const classes = useStyles();
  const router = useRouter();

  const handleChange = event => {
    event.persist();

    setFormData(formData => ({
      ...formData,
      values: {
        ...formData.values,
        [event.target.name]: event.target.value
      },
      touched: {
        ...formData.touched,
        [event.target.name]: true
      }
    }));
  };

  useEffect(() => {
    const errors = validate(formData.values, validationSchema);

    setFormData(formData => ({
      ...formData,
      isValid: errors ? false : true,
      errors: errors || {}
    }));
  }, [formData.values]);

  const handleSubmit = e => {
    e.preventDefault();
    setBusy(true);

    const categoryClient = new ProductCategoryService();
    categoryClient
      .create(formData.values)
      .then(r => {
        setSnackbar({
          ...snackbar,
          type: 'success',
          message: 'Categoria cadastrada com sucesso!',
          onClose: () => {
            router.history.push('/products/categories');
          }
        });
        setShowSnackbar(true);
      })
      .catch(err => {
        setSnackbar({
          ...snackbar,
          type: 'error',
          message: 'Falha ao cadastrar a categoria'
        });
        setShowSnackbar(true);
      })
      .finally(() => {
        setBusy(false);
      });
  };

  const hasError = field =>
    formData.touched[field] && formData.errors[field] ? true : false;

  return (
    <Page className={classes.root} title="Cadastrar categoria">
      <Header />
      <Grid className={clsx(classes.root, className)} container spacing={3}>
        <Grid item lg={12} md={12} xl={12} xs={12}>
          <Card className={clsx(classes.root, className)}>
            <form onSubmit={handleSubmit}>
              <CardContent>
                <TextField
                  fullWidth
                  label="Nome"
                  name="name"
                  onChange={handleChange}
                  required
                  value={formData.values.name || ''}
                  variant="outlined"
                  disabled={busy}
                  error={hasError('name')}
                  helperText={hasError('name') ? formData.errors.name[0] : null}
                />
              </CardContent>
              <Divider />
              <CardActions>
                <Button
                  className={classes.saveButton}
                  type="submit"
                  disabled={busy || !formData.isValid}
                  variant="contained">
                  Cadastrar
                </Button>
              </CardActions>
            </form>
          </Card>
        </Grid>
      </Grid>
      <CustomSnackbar message="Alerta!" open type="warning" /> */}
      {showSnackbar && <CustomSnackbar {...snackbar} />}
    </Page>
  );
};

export default ProductCategoryCreate;