src/pages/AuthPage/AuthPage.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

import React, {useState} from 'react';
import { Authorization} from '../../types';
import SignInForm from './SignInForm';
import {makeStyles} from "@material-ui/core";
import Registration from "./Registration";

interface PropTypes {
  logIn: (name: string, password: string) => Promise<boolean>;
}

const useStyles = makeStyles(theme => ({
  authorize: {
    display: 'flex',
    width: 200,
    justifyContent: 'space-around',
    margin: '0 auto'
  }
}));

const AuthPage: React.FC<PropTypes> = ({logIn}) => {
  const classes = useStyles();
  const[authorization,setAuthorization] = useState<Authorization>({authorize: 'signUp'});

  const handleSignUp = () => {
    setAuthorization({authorize: 'signUp'});
    console.log(authorization.authorize);
  };

  const handleRegistration = () => {
    setAuthorization({authorize: 'registration'});
    console.log(authorization.authorize);
  };

  return (
    <>
      <div className={classes.authorize}>
        <div onClick={handleSignUp}>SignUp</div>
        <div>or</div>
        <div onClick={handleRegistration}>Registrate</div>
      </div>
      { authorization.authorize === 'signUp' && <SignInForm logIn={logIn} /> }
      { authorization.authorize === 'registration' && <Registration logIn={logIn} /> }
      </>
  );
};

export default AuthPage;