text: import React, { useState } from "react";
  import { useSnackbar } from "notistack";
  import Slide from "@material-ui/core/Slide";
  import Button from "@material-ui/core/Button";
  import CssBaseline from "@material-ui/core/CssBaseline";
  import Paper from "@material-ui/core/Paper";
  import Box from "@material-ui/core/Box";
  import Avatar from "@material-ui/core/Avatar";
  import Grid from "@material-ui/core/Grid";
  import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
  import Typography from "@material-ui/core/Typography";
  import { makeStyles, useTheme } from "@material-ui/core/styles";
  import { Formik, Form, Field } from "formik";
  import { TextField } from "formik-material-ui";
  import * as yup from "yup";
  import { useDispatch } from "react-redux";
  import { useHistory } from "react-router-dom";
  import Copyright from "../Copyright";
  import { forgotPasswordUser } from "../../redux/slices/user";
  import { unwrapResult } from "@reduxjs/toolkit";
  
  const useStyles = makeStyles((theme) => ({
    root: {
      height: "100vh",
    },
    image: {
      backgroundImage: "url(https://source.unsplash.com/random)",
      backgroundRepeat: "no-repeat",
      backgroundColor:
        theme.palette.type === "light"
          ? theme.palette.grey[50]
          : theme.palette.grey[900],
      backgroundSize: "cover",
      backgroundPosition: "center",
    },
    paper: {
      margin: theme.spacing(8, 4),
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
    },
    avatar: {
      margin: theme.spacing(1),
      backgroundColor: theme.palette.secondary.main,
    },
    form: {
      width: "100%", // Fix IE 11 issue.
      marginTop: theme.spacing(1),
    },
    submit: {
      margin: theme.spacing(3, 0, 2),
    },
  }));
  
  export default function ForgotPassword() {
    const theme = useTheme();
    const classes = useStyles(theme);
  
    const dispatch = useDispatch();
    const history = useHistory();
  
    const { enqueueSnackbar } = useSnackbar();
  
    const handleSubmit = async (values) => {
      await dispatch(forgotPasswordUser(values))
        .then(unwrapResult)
        .then((res) =>
          enqueueSnackbar(res, {
            variant: "success",
            anchorOrigin: {
              vertical: "top",
              horizontal: "center",
            },
            TransitionComponent: Slide,
          })
        )
        .then(() => history.push("/login"))
        .catch((err) =>
          enqueueSnackbar("Something went wrong.", {
            variant: "error",
            anchorOrigin: {
              vertical: "top",
              horizontal: "center",
            },
            TransitionComponent: Slide,
          })
        );
    };
  
    return (
      <Grid container component="main" className={classes.root}>
        <CssBaseline />
        <Grid item xs={false} sm={4} md={7} className={classes.image} />
        <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
          <div className={classes.paper}>
            <Avatar className={classes.avatar}>
              <LockOutlinedIcon />
            </Avatar>
            <Typography component="h1" variant="h5">
              FORGOT PASSWORD
            </Typography>
            <Formik
              initialValues={{
                email: "",
              }}
              validationSchema={yup.object({
                email: yup.string().email("Invalid email").required("Required"),
              })}
              onSubmit={handleSubmit}
            >
              <Form className={classes.form}>
                <Field
                  component={TextField}
                  variant="outlined"
                  margin="normal"
                  required
                  fullWidth
                  id="email"
                  label="Email"
                  name="email"
                />
                <Button
                  type="submit"
                  fullWidth
                  variant="contained"
                  color="primary"
                  className={classes.submit}
                >
                  SEND EMAIL
                </Button>
                <Box mt={5}>
                  <Copyright />
                </Box>
              </Form>
            </Formik>
          </div>
        </Grid>
      </Grid>
    );
  }
  