diff --git a/src/components/LoginForm/LoginForm.jsx b/src/components/LoginForm/LoginForm.jsx index 3397d6c..0715fe3 100644 --- a/src/components/LoginForm/LoginForm.jsx +++ b/src/components/LoginForm/LoginForm.jsx @@ -1,25 +1,19 @@ -import { useDispatch } from 'react-redux'; -import { logIn } from 'redux/auth/operations'; import { Form } from './LoginForm.styled'; import { Button, TextField, Box, Container } from '@mui/material'; import { Puff } from 'react-loading-icons'; import { useSelector } from 'react-redux'; import { selectAuthIsLoading } from 'redux/auth/selectors'; -export const LoginForm = () => { - const dispatch = useDispatch(); +export const LoginForm = ({ onData }) => { const isLoading = useSelector(selectAuthIsLoading); const handleSubmit = e => { e.preventDefault(); const form = e.currentTarget; - - dispatch( - logIn({ - email: form.elements.email.value, - password: form.elements.password.value, - }) - ); + onData({ + email: form.elements.email.value, + password: form.elements.password.value, + }); form.reset(); }; diff --git a/src/components/RegisterForm/RegisterForm.jsx b/src/components/RegisterForm/RegisterForm.jsx index fb574b5..4f0dcb3 100644 --- a/src/components/RegisterForm/RegisterForm.jsx +++ b/src/components/RegisterForm/RegisterForm.jsx @@ -1,5 +1,3 @@ -import { useDispatch } from 'react-redux'; -import { register } from 'redux/auth/operations'; import { Puff } from 'react-loading-icons'; import { useSelector } from 'react-redux'; import { selectAuthIsLoading } from 'redux/auth/selectors'; @@ -7,21 +5,17 @@ import { selectAuthIsLoading } from 'redux/auth/selectors'; import { Form } from './RegisterForm.styled'; import { Button, TextField, Box, Container } from '@mui/material'; -export const RegisterForm = () => { - const dispatch = useDispatch(); +export const RegisterForm = ({ onData }) => { const isLoading = useSelector(selectAuthIsLoading); const handleSubmit = e => { e.preventDefault(); const form = e.currentTarget; - - dispatch( - register({ - name: form.elements.name.value, - email: form.elements.email.value, - password: form.elements.password.value, - }) - ); + onData({ + name: form.elements.name.value, + email: form.elements.email.value, + password: form.elements.password.value, + }); form.reset(); }; diff --git a/src/pages/Login.js b/src/pages/Login.js index 4b016ae..633b0bf 100644 --- a/src/pages/Login.js +++ b/src/pages/Login.js @@ -1,33 +1,28 @@ import { LoginForm } from 'components/LoginForm/LoginForm'; import toast from 'react-hot-toast'; import { useSelector } from 'react-redux'; -import { selectAuthIsLoading, selectAuthError } from 'redux/auth/selectors'; -import { useState, useEffect } from 'react'; +import { selectAuthError } from 'redux/auth/selectors'; +import { useDispatch } from 'react-redux'; +import { logIn } from 'redux/auth/operations'; export default function Login() { - const isLoading = useSelector(selectAuthIsLoading); + const dispatch = useDispatch(); const status = useSelector(selectAuthError); - const [isRequestPending, setRequestPending] = useState(true); - useEffect(() => { - setRequestPending(false); - - if ( - status === 'Request failed with status code 400' && - !isRequestPending && - !isLoading - ) { + const onRegister = data => { + if (status === 'Request failed with status code 400') { toast.error( 'You have entered an incorrect email address or password, or you have not yet registered!' ); } - }, [isRequestPending, status, isLoading]); + dispatch(logIn(data)); + }; return (
Login - +
); } diff --git a/src/pages/Register.js b/src/pages/Register.js index ca3754e..2b9623e 100644 --- a/src/pages/Register.js +++ b/src/pages/Register.js @@ -1,33 +1,28 @@ import { RegisterForm } from 'components/RegisterForm/RegisterForm'; import toast from 'react-hot-toast'; import { useSelector } from 'react-redux'; -import { selectAuthIsLoading, selectAuthError } from 'redux/auth/selectors'; -import { useState, useEffect } from 'react'; +import { selectAuthError } from 'redux/auth/selectors'; +import { useDispatch } from 'react-redux'; +import { register } from 'redux/auth/operations'; export default function Register() { - const isLoading = useSelector(selectAuthIsLoading); + const dispatch = useDispatch(); const status = useSelector(selectAuthError); - const [isRequestPending, setRequestPending] = useState(true); - useEffect(() => { - setRequestPending(false); - - if ( - status === 'Request failed with status code 400' && - !isRequestPending && - !isLoading - ) { + const onRegister = data => { + if (status === 'Request failed with status code 400') { toast.success( 'You or someone else is already registered with such data!' ); } - }, [isRequestPending, status, isLoading]); + dispatch(register(data)); + }; return (
Registration - +
); }