From 1f646377c35b65b97d6eeebb1e88f6d8307e1ef0 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Mon, 29 Jun 2020 23:59:15 +0300 Subject: feat!: create useAuth hook --- src/pages/AuthPage/AuthPage.tsx | 11 +++-------- src/pages/AuthPage/SignInForm.tsx | 10 ++++------ src/pages/AuthPage/SignUpForm.tsx | 9 ++++----- 3 files changed, 11 insertions(+), 19 deletions(-) (limited to 'src/pages/AuthPage') diff --git a/src/pages/AuthPage/AuthPage.tsx b/src/pages/AuthPage/AuthPage.tsx index d2c2eec..ad93463 100644 --- a/src/pages/AuthPage/AuthPage.tsx +++ b/src/pages/AuthPage/AuthPage.tsx @@ -3,11 +3,6 @@ import { makeStyles } from '@material-ui/core/styles'; import SignInForm from './SignInForm'; import SignUpForm from './SignUpForm'; - -interface PropTypes { - logIn: (name: string, password: string, remember?: boolean) => Promise; -} - const useStyles = makeStyles({ formTransfer: { display: 'flex', @@ -20,7 +15,7 @@ const useStyles = makeStyles({ } }); -const AuthPage: React.FC = ({ logIn }) => { +const AuthPage: React.FC = () => { const [auth, setAuth] = useState<'signIn' | 'signUp'>('signIn'); const classes = useStyles(); @@ -35,8 +30,8 @@ const AuthPage: React.FC = ({ logIn }) => { return ( <> - {auth === 'signIn' && } - {auth === 'signUp' && } + {auth === 'signIn' && } + {auth === 'signUp' && }
{footerInfo[auth][0]}
Promise; -} +import { useAuth } from '../../hooks/useAuth'; const useStyles = makeStyles(theme => ({ root: { @@ -28,12 +25,13 @@ const useStyles = makeStyles(theme => ({ } })); -const SignInForm: React.FC = ({ logIn }) => { +const SignInForm: React.FC = () => { const [error, setError] = useState(false); const [remember, setRemember] = useState(true); const classes = useStyles(); const nameRef = useRef(); const passwordRef = useRef(); + const { login } = useAuth(); const handleCheck = () => { setRemember(!remember); @@ -43,7 +41,7 @@ const SignInForm: React.FC = ({ logIn }) => { const name = nameRef.current?.value; const password = passwordRef.current?.value; if (name && password) { - logIn(name, password, remember).then(success => { + login(name, password, remember).then(success => { if (!success) setError(true); }); } diff --git a/src/pages/AuthPage/SignUpForm.tsx b/src/pages/AuthPage/SignUpForm.tsx index 25b79ff..af7a0f8 100644 --- a/src/pages/AuthPage/SignUpForm.tsx +++ b/src/pages/AuthPage/SignUpForm.tsx @@ -3,10 +3,8 @@ import { makeStyles } from '@material-ui/core/styles'; import TextField from '@material-ui/core/TextField'; import Button from '@material-ui/core/Button'; import { post } from '../../requests'; +import { useAuth } from '../../hooks/useAuth'; -interface PropTypes { - logIn: (name: string, password: string) => Promise; -} const useStyles = makeStyles(theme => ({ root: { @@ -25,12 +23,13 @@ const useStyles = makeStyles(theme => ({ } })); -const SignUpForm: React.FC = ({ logIn }) => { +const SignUpForm: React.FC = () => { const [error, setError] = useState(false); const classes = useStyles(); const usernameRef = useRef(); const emailRef = useRef(); const passwordRef = useRef(); + const { login } = useAuth(); const onClick = () => { const username = usernameRef.current?.value; @@ -38,7 +37,7 @@ const SignUpForm: React.FC = ({ logIn }) => { const email = emailRef.current?.value; if (username && password) { post('/users', { username, password, email }).then(() => { - logIn(username, password); + login(username, password); }); } else setError(true); }; -- cgit v1.2.3 From b31ed66aafbe1d5dbe70d0cdfd70864204510d81 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Tue, 30 Jun 2020 01:27:39 +0300 Subject: fix: re-implement navigation logic --- src/pages/AuthPage/SignInForm.tsx | 5 ++++- src/pages/AuthPage/SignUpForm.tsx | 8 +++++--- 2 files changed, 9 insertions(+), 4 deletions(-) (limited to 'src/pages/AuthPage') diff --git a/src/pages/AuthPage/SignInForm.tsx b/src/pages/AuthPage/SignInForm.tsx index 662a312..e68483b 100644 --- a/src/pages/AuthPage/SignInForm.tsx +++ b/src/pages/AuthPage/SignInForm.tsx @@ -7,6 +7,7 @@ import { Switch } from '@material-ui/core'; import { useAuth } from '../../hooks/useAuth'; +import { useNavigate } from '../../hooks/useNavigate'; const useStyles = makeStyles(theme => ({ root: { @@ -32,6 +33,7 @@ const SignInForm: React.FC = () => { const nameRef = useRef(); const passwordRef = useRef(); const { login } = useAuth(); + const { navigate } = useNavigate(); const handleCheck = () => { setRemember(!remember); @@ -42,7 +44,8 @@ const SignInForm: React.FC = () => { const password = passwordRef.current?.value; if (name && password) { login(name, password, remember).then(success => { - if (!success) setError(true); + if (success) navigate('profile'); + else setError(true); }); } }; diff --git a/src/pages/AuthPage/SignUpForm.tsx b/src/pages/AuthPage/SignUpForm.tsx index af7a0f8..1dacd45 100644 --- a/src/pages/AuthPage/SignUpForm.tsx +++ b/src/pages/AuthPage/SignUpForm.tsx @@ -4,6 +4,7 @@ import TextField from '@material-ui/core/TextField'; import Button from '@material-ui/core/Button'; import { post } from '../../requests'; import { useAuth } from '../../hooks/useAuth'; +import { useNavigate } from '../../hooks/useNavigate'; const useStyles = makeStyles(theme => ({ @@ -30,15 +31,16 @@ const SignUpForm: React.FC = () => { const emailRef = useRef(); const passwordRef = useRef(); const { login } = useAuth(); + const { navigate } = useNavigate(); const onClick = () => { const username = usernameRef.current?.value; const password = passwordRef.current?.value; const email = emailRef.current?.value; if (username && password) { - post('/users', { username, password, email }).then(() => { - login(username, password); - }); + post('/users', { username, password, email }) + .then(() => login(username, password)) + .then(() => navigate('profile')); } else setError(true); }; -- cgit v1.2.3