@material-ui/core#MobileStepper JavaScript Examples

The following examples show how to use @material-ui/core#MobileStepper. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Register.js    From neighborhood-chef-fe with MIT License 4 votes vote down vote up 
Register = () => {
  const history = useHistory();
  const currentPage = useSelector((state) => state.page);
  const cardClass = cardStyles();
  const [errMessage, setErrMessage] = useState("");

  return (
    <div>
      <AuthHeader />
      <div className="landing-page-container">
        <div className="landing-page-left">
          <Card
            className={`${cardClass.root} ${cardClass.landingPage}`}
            style={{ overflowY: "auto" }}
          >
            <CardContent style={{ marginTop: "2%" }}>
              <Typography variant="h4">Create a new account with us</Typography>
              <Typography variant="caption" color="textSecondary">
                Start eating well while making friends!
              </Typography>
              <Formik
                initialValues={{
                  allergens: [],
                  dietaryRestrictions: [],
                  dietaryPreferences: [],
                  children: [],
                  pets: [],
                }}
                validate={(values) => {
                  const errors = {};
                  if (!values.email) {
                    errors.email = "Required";
                  } else if (
                    !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(
                      values.email
                    )
                  ) {
                    errors.email = "Invalid email address";
                  }
                  if (!values.firstName) {
                    errors.firstName = "Required";
                  }
                  if (!values.lastName) {
                    errors.lastName = "Required";
                  }
                  if (!values.location.latitude) {
                    errors.latitude = "Required";
                  }
                  if (!values.location.longitude) {
                    errors.longitude = "Required";
                  }
                  if (!values.location.address) {
                    errors.address = "Required";
                  }
                  return errors;
                }}
                onSubmit={(values, { setSubmitting }) => {
                  const userValues = {
                    email: values.email,
                    firstName: values.firstName,
                    lastName: values.lastName,
                    latitude: values.location.latitude,
                    longitude: values.location.longitude,
                    gender: values.gender,
                    address: values.location.address,
                    photo: values.photo,
                    allergens: JSON.stringify(values.allergens),
                    dietaryRestrictions: JSON.stringify(
                      values.dietaryRestrictions
                    ),
                    dietaryPreferences: JSON.stringify(
                      values.dietaryPreferences
                    ),
                    children: JSON.stringify(values.children),
                    pets: JSON.stringify(values.pets),
                  };
                  axios
                    .post(
                      `${process.env.REACT_APP_BASE_URL}/auth/register`,
                      userValues
                    )
                    .then((res) => {
                      setSubmitting(false);
                      history.push("/register-check-email");
                    })
                    .catch((err) => {
                      setSubmitting(false);
                      setErrMessage(err.response.data.message);
                      console.dir({
                        err,
                        message: err.message,
                        stack: err.stack,
                      });
                    });
                }}
              >
                {({ isSubmitting, setFieldValue, values }) => (
                  <Form style={{ display: "flex", flexDirection: "column" }}>
                    {currentPage === 1 && <AuthFields />}
                    {currentPage === 2 && (
                      <ProfileFields
                        submitting={isSubmitting}
                        setFieldValue={setFieldValue}
                        values={values}
                        errMessage={errMessage}
                      />
                    )}
                  </Form>
                )}
              </Formik>
            </CardContent>
            <CardActions
              style={{
                display: "flex",
                justifyContent: "center",
              }}
            >
              <MobileStepper
                style={{ background: "white" }}
                variant="dots"
                steps={2}
                position="static"
                activeStep={currentPage - 1}
              />
            </CardActions>
          </Card>
        </div>
        <div className="landing-page-right" style={{ overflow: "hidden" }}>
          <img src={food} alt="food community" height="100%" />
        </div>
      </div>
    </div>
  );
}