AthleteSubmissionForm

AthleteSubmissionForm.js

import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import { LocalizationProvider } from "@mui/x-date-pickers";
import Button from "@mui/material/Button";
import { Formik, Form } from "formik";
import * as React from "react";
import useFetchWithMsal from "../hooks/useFetchWithMsal";
import { protectedResources } from "../authConfig";
import { Stack } from "@mui/system";
import { DatePicker } from "@mui/x-date-pickers";
import TextField from "@mui/material/TextField";

export default function AthleteSubmissionForm(props, { setAthletes }) {
  const { error, execute } = useFetchWithMsal({
    scopes: protectedResources.apiTodoList.scopes.read,
  });

  const handleAthleteSubmission = (e) => {
    e.preventDefault();
    execute("POST", protectedResources.athletes.endpoint, {
      firstName: firstName,
      lastName: lastName,
      beltRank: belt,
    }).then((response) => {
      console.log(response);
      reset();
      setAthletes(null);
    });
  };

  const validate = (values) => {
    const errors = {};

    if (!values.firstName) {
      errors.firstName = "Required";
    } else if (values.firstName.length > 15) {
      errors.firstName = "Must be 15 characters or less";
    }

    return errors;
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <Formik
        initialValues={{
          firstName: "",
          lastName: "",
          beltRank: "",
          birthDate: new Date(),
        }}
        validate={validate}
        onSubmit={(values, { setSubmitting }) => {
          setTimeout(() => {
            setSubmitting(false);
            alert(JSON.stringify(values, null, 2));
          }, 500);
        }}
      >
        {({ submitForm, isSubmitting, getFieldProps }) => (
          <Form>
            <Stack>
              <TextField
                label="First Name"
                name="firstName"
                {...getFieldProps("firstName")}
              />

              <TextField
                label="Last Name"
                name="lastName"
                {...getFieldProps("lastName")}
              />

              <TextField
                label="Belt Rank"
                name="beltRank"
                {...getFieldProps("beltRank")}
              />

              <DatePicker
                disableFuture
                {...getFieldProps("birthDate")}
                label="Date"
              />
              <Button disabled={isSubmitting} onClick={submitForm}>
                Submit
              </Button>
            </Stack>
          </Form>
        )}
      </Formik>
    </LocalizationProvider>
  );
}