notifications

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();
   };

src/components/RegisterForm/RegisterForm.jsx

@@ -1,27 +1,21 @@
-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';
 
 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();
   };

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 (
     <div>
       <title>Login</title>
 
-      <LoginForm />
+      <LoginForm onData={onRegister} />
     </div>
   );
 }

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 (
     <div>
       <title>Registration</title>
 
-      <RegisterForm />
+      <RegisterForm onData={onRegister} />
     </div>
   );
 }