text: import React, { useEffect } from 'react';
  import axios from 'axios';
  import PropTypes from 'prop-types';
  import { connect } from 'react-redux';
  import { signIn } from '../../actions';
  import { NavLink, useNavigate } from 'react-router-dom';
  import Avatar from '@mui/material/Avatar';
  import Button from '@mui/material/Button';
  import CssBaseline from '@mui/material/CssBaseline';
  import TextField from '@mui/material/TextField';
  import Link from '@mui/material/Link';
  import Grid from '@mui/material/Grid';
  import Box from '@mui/material/Box';
  import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
  import Typography from '@mui/material/Typography';
  import Container from '@mui/material/Container';
  import { createTheme, ThemeProvider } from '@mui/material/styles';
  
  function Copyright(props) {
      return (
          <Typography
              variant="body2"
              color="text.secondary"
              align="center"
              {...props}
          >
              {'Copyright © '}
              <Link color="inherit" href="/">
                  Social Distribution
              </Link>{' '}
              {new Date().getFullYear()}
              {'.'}
          </Typography>
      );
  }
  
  const theme = createTheme();
  
  const SignUp = (props) => {
      useEffect(() => {
          document.title = 'Sign Up';
      }, []);
  
      let navigate = useNavigate();
      SignUp.propTypes = {
          props: PropTypes.object,
          signIn: PropTypes.func,
      };
      console.log(props);
      //sumbit form
      const handleSubmit = (event) => {
          event.preventDefault();
          const data = new FormData(event.currentTarget);
          signUp(
              data.get('email'),
              data.get('password'),
              data.get('displayName')
          );
      };
      //sign up
      const signUp = (email, password, displayName) => {
          axios
              .post(
                  `/register`,
                  {
                      email: email,
                      password: password,
                      displayName: displayName,
                  },
                  { withCredentials: true }
              )
              .then((response) => {
                  console.log(response);
                  if (response.status === 201) {
                      //to profile
                      navigate(`/`);
                  }
              })
              .catch((error) => {
                  alert(error.response.data.error);
              });
      };
      return (
          <ThemeProvider theme={theme}>
              <Container component="main" maxWidth="xs">
                  <CssBaseline />
                  <Box
                      sx={{
                          marginTop: 8,
                          display: 'flex',
                          flexDirection: 'column',
                          alignItems: 'center',
                      }}
                  >
                      <Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
                          <LockOutlinedIcon />
                      </Avatar>
                      <Typography component="h1" variant="h5">
                          Sign up
                      </Typography>
                      <Box
                          component="form"
                          noValidate
                          onSubmit={handleSubmit}
                          sx={{ mt: 3 }}
                      >
                          <Grid container spacing={2}>
                              <Grid item xs={12}>
                                  <TextField
                                      autoComplete="given-name"
                                      name="displayName"
                                      required
                                      fullWidth
                                      id="displayName"
                                      label="Name"
                                      autoFocus
                                  />
                              </Grid>
                              <Grid item xs={12}>
                                  <TextField
                                      required
                                      fullWidth
                                      id="email"
                                      label="Email Address"
                                      name="email"
                                      autoComplete="email"
                                  />
                              </Grid>
                              <Grid item xs={12}>
                                  <TextField
                                      required
                                      fullWidth
                                      name="password"
                                      label="Password"
                                      type="password"
                                      id="password"
                                      autoComplete="new-password"
                                  />
                              </Grid>
                          </Grid>
                          <Button
                              type="submit"
                              fullWidth
                              variant="contained"
                              sx={{ mt: 3, mb: 2 }}
                          >
                              Sign Up
                          </Button>
                          <Grid container justifyContent="flex-end">
                              <Grid item>
                                  <NavLink to="/">
                                      Already have an account? Sign in
                                  </NavLink>
                              </Grid>
                          </Grid>
                      </Box>
                  </Box>
                  <Copyright sx={{ mt: 5 }} />
              </Container>
          </ThemeProvider>
      );
  };
  const mapStateToProps = (state) => ({
      isSignedIn: state.auth.isSignedIn,
      author: state.auth.author,
  });
  
  export default connect(mapStateToProps, { signIn })(SignUp);
  