From 33574e7218e715721619bd6cea12df29e99ee772 Mon Sep 17 00:00:00 2001
From: Anastasia-front <palitsanastasia3.ap@gmail.com>
Date: Wed, 17 May 2023 17:28:36 +0300
Subject: [PATCH] forms

---
 src/components/LoginForm/LoginForm.jsx       |  8 +++++---
 src/components/RegisterForm/RegisterForm.jsx |  8 +++++---
 src/pages/Login.js                           |  9 +++++++--
 src/pages/Register.js                        |  9 +++++++--
 src/redux/auth/operations.js                 |  4 ++++
 src/redux/auth/slice.js                      | 14 +++++++++++++-
 6 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/src/components/LoginForm/LoginForm.jsx b/src/components/LoginForm/LoginForm.jsx
index 0715fe3..5ea04a6 100644
--- a/src/components/LoginForm/LoginForm.jsx
+++ b/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 (
diff --git a/src/components/RegisterForm/RegisterForm.jsx b/src/components/RegisterForm/RegisterForm.jsx
index 4f0dcb3..c304422 100644
--- a/src/components/RegisterForm/RegisterForm.jsx
+++ b/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 (
diff --git a/src/pages/Login.js b/src/pages/Login.js
index 633b0bf..a999e6e 100644
--- a/src/pages/Login.js
+++ b/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));
   };
 
diff --git a/src/pages/Register.js b/src/pages/Register.js
index 2b9623e..0b0e210 100644
--- a/src/pages/Register.js
+++ b/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));
   };
 
diff --git a/src/redux/auth/operations.js b/src/redux/auth/operations.js
index 98b7201..436e905 100644
--- a/src/redux/auth/operations.js
+++ b/src/redux/auth/operations.js
@@ -89,3 +89,7 @@ export const refreshUser = createAsyncThunk(
     }
   }
 );
+
+export const clearAuthError = () => ({
+  type: 'auth/clearError',
+});
diff --git a/src/redux/auth/slice.js b/src/redux/auth/slice.js
index 91cce1a..46f803f 100644
--- a/src/redux/auth/slice.js
+++ b/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;