select.tsx

import React, { useCallback } from 'react';
import { Formik, Form } from 'formik';
import * as Yup from 'yup';
import { makeStyles } from '@material-ui/core/styles';
import { Container, Grid, Typography } from '@material-ui/core';

import { useAuth } from '../../hooks/auth';
import api from '../../services/api';

import MiniDrawer from '../../components/Drawer';
import Select from '../../components/FormsUI/Select';
import Button from '../../components/FormsUI/Button';

const useStyles = makeStyles(theme => ({
  formWrapper: {
    marginTop: theme.spacing(5),
    marginBottom: theme.spacing(5),
  },
}));

const INITIAL_FORM_STATE = {
  course: '',
  company: '',
};

const FORM_VALIDATION = Yup.object().shape({
  course: Yup.string().required('Selecione um curso'),
  company: Yup.string().required('Selecione uma empresa'),
});

const Dashboard: React.FC = () => {
  const { user } = useAuth();
  const { courses, companies } = user;

  const getUnits = useCallback(e => {
    alert('test');
    console.log(e.target.value);
  }, []);

  const classes = useStyles();

  return (
    <>
      <MiniDrawer />
      <Grid item xs={12}>
        <Container maxWidth="md">
          <div className={classes.formWrapper}>
            <Formik
              initialValues={{ ...INITIAL_FORM_STATE }}
              validationSchema={FORM_VALIDATION}
              onSubmit={values => {
                console.log(values);
              }}
            >
              <Form>
                <Grid container spacing={2}>
                  <Grid item xs={12}>
                    <Typography>
                      Relação de Alunos Cadastrados - EaD Fabet.
                    </Typography>
                  </Grid>

                  <Grid item xs={12}>
                    <Select
                      name="course"
                      label="Selecione um Curso"
                      options={courses}
                      size="small"
                    />
                  </Grid>
                  <Grid item xs={6}>
                    <Select
                      name="company"
                      label="Selecione uma Empresa"
                      options={companies}
                      size="small"
                      onChange={e => getUnits(e)}
                    />
                  </Grid>

                  <Grid item xs={12}>
                    <Button>Enviar</Button>
                  </Grid>
                </Grid>
              </Form>
            </Formik>
          </div>
        </Container>
      </Grid>
    </>
  );
};

export default Dashboard;