forms

src/components/LoginForm/LoginForm.jsx

@@ -2,10 +2,11 @@ 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';
+import { selectAuthIsLoading, selectAuthError } from 'redux/auth/selectors';
 
 export const LoginForm = ({ onData }) => {
   const isLoading = useSelector(selectAuthIsLoading);
+  const status = useSelector(selectAuthError);
 
   const handleSubmit = e => {
     e.preventDefault();
@@ -14,8 +15,9 @@ export const LoginForm = ({ onData }) => {
       email: form.elements.email.value,
       password: form.elements.password.value,
     });
-
-    form.reset();
+    if (!isLoading && status !== null) {
+      form.reset();
+    }
   };
 
   return (

src/components/RegisterForm/RegisterForm.jsx

@@ -1,12 +1,13 @@
 import { Puff } from 'react-loading-icons';
 import { useSelector } from 'react-redux';
-import { selectAuthIsLoading } from 'redux/auth/selectors';
+import { selectAuthIsLoading, selectAuthError } from 'redux/auth/selectors';
 
 import { Form } from './RegisterForm.styled';
 import { Button, TextField, Box, Container } from '@mui/material';
 
 export const RegisterForm = ({ onData }) => {
   const isLoading = useSelector(selectAuthIsLoading);
+  const status = useSelector(selectAuthError);
 
   const handleSubmit = e => {
     e.preventDefault();
@@ -16,8 +17,9 @@ export const RegisterForm = ({ onData }) => {
       email: form.elements.email.value,
       password: form.elements.password.value,
     });
-
-    form.reset();
+    if (!isLoading && status !== null) {
+      form.reset();
+    }
   };
 
   return (

src/pages/Login.js

@@ -3,18 +3,23 @@ import toast from 'react-hot-toast';
 import { useSelector } from 'react-redux';
 import { selectAuthError } from 'redux/auth/selectors';
 import { useDispatch } from 'react-redux';
-import { logIn } from 'redux/auth/operations';
+import { logIn, clearAuthError } from 'redux/auth/operations';
+import { useEffect } from 'react';
 
 export default function Login() {
   const dispatch = useDispatch();
   const status = useSelector(selectAuthError);
 
-  const onRegister = data => {
+  useEffect(() => {
     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!'
       );
+      dispatch(clearAuthError());
     }
+  }, [status, dispatch]);
+
+  const onRegister = data => {
     dispatch(logIn(data));
   };
 

src/pages/Register.js

@@ -3,18 +3,23 @@ import toast from 'react-hot-toast';
 import { useSelector } from 'react-redux';
 import { selectAuthError } from 'redux/auth/selectors';
 import { useDispatch } from 'react-redux';
-import { register } from 'redux/auth/operations';
+import { register, clearAuthError } from 'redux/auth/operations';
+import { useEffect } from 'react';
 
 export default function Register() {
   const dispatch = useDispatch();
   const status = useSelector(selectAuthError);
 
-  const onRegister = data => {
+  useEffect(() => {
     if (status === 'Request failed with status code 400') {
       toast.success(
         'You or someone else is already registered with such data!'
       );
+      dispatch(clearAuthError());
     }
+  }, [status, dispatch]);
+
+  const onRegister = data => {
     dispatch(register(data));
   };
 

src/redux/auth/operations.js

@@ -89,3 +89,7 @@ export const refreshUser = createAsyncThunk(
     }
   }
 );
+
+export const clearAuthError = () => ({
+  type: 'auth/clearError',
+});

src/redux/auth/slice.js

@@ -1,5 +1,11 @@
 import { createSlice } from '@reduxjs/toolkit';
-import { register, logIn, logOut, refreshUser } from './operations';
+import {
+  register,
+  logIn,
+  logOut,
+  refreshUser,
+  // clearAuthError,
+} from './operations';
 
 export const initialState = {
   user: { name: null, email: null },
@@ -65,6 +71,12 @@ const authSlice = createSlice({
       state.isRefreshing = false;
     },
   },
+  reducers: {
+    clearError: state => {
+      state.error = null;
+    },
+  },
 });
+export const { clearError } = authSlice.actions;
 
 export const authReducer = authSlice.reducer;