From 171919e2c129c831d6f032615c2158a52735e025 Mon Sep 17 00:00:00 2001 From: Anastasia-front Date: Mon, 15 May 2023 18:52:38 +0300 Subject: [PATCH] done --- src/components/App.jsx | 12 +++++------- src/components/LoginForm/LoginForm.jsx | 15 +++++++-------- .../NotFoundPage.jsx => NotFound/NotFound.jsx} | 2 +- .../NotFound.styled.js} | 0 src/components/PrivateRoute.js | 5 +---- src/components/RegisterForm/RegisterForm.jsx | 17 ++++++++--------- src/components/RestrictedRoute.js | 5 +---- src/index.js | 2 +- src/pages/Login.js | 14 ++++++++++---- src/pages/Register.js | 18 +++++++++++++----- src/redux/auth/slice.js | 1 + 11 files changed, 48 insertions(+), 43 deletions(-) rename src/components/{NotFoundPage/NotFoundPage.jsx => NotFound/NotFound.jsx} (93%) rename src/components/{NotFoundPage/NotFoundPage.styled.js => NotFound/NotFound.styled.js} (100%) diff --git a/src/components/App.jsx b/src/components/App.jsx index c5b0564..3b37fa1 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -12,9 +12,7 @@ const HomePage = lazy(() => import('../pages/Home')); const RegisterPage = lazy(() => import('../pages/Register')); const LoginPage = lazy(() => import('../pages/Login')); const ContactsPage = lazy(() => import('../pages/Contacts')); -const NotFoundPage = lazy(() => - import('../components/NotFoundPage/NotFoundPage') -); +const NotFoundPage = lazy(() => import('../components/NotFound/NotFound')); export const App = () => { const dispatch = useDispatch(); @@ -40,13 +38,13 @@ export const App = () => { ) : ( <> - }> + }> } /> } /> } @@ -55,7 +53,7 @@ export const App = () => { path="login" element={ } /> } @@ -63,7 +61,7 @@ export const App = () => { } /> + } /> } /> } /> diff --git a/src/components/LoginForm/LoginForm.jsx b/src/components/LoginForm/LoginForm.jsx index e520efd..3397d6c 100644 --- a/src/components/LoginForm/LoginForm.jsx +++ b/src/components/LoginForm/LoginForm.jsx @@ -6,20 +6,19 @@ import { Puff } from 'react-loading-icons'; import { useSelector } from 'react-redux'; import { selectAuthIsLoading } from 'redux/auth/selectors'; -export const LoginForm = ({ onData }) => { +export const LoginForm = () => { const dispatch = useDispatch(); const isLoading = useSelector(selectAuthIsLoading); const handleSubmit = e => { e.preventDefault(); const form = e.currentTarget; - onData( - dispatch( - logIn({ - email: form.elements.email.value, - password: form.elements.password.value, - }) - ) + + dispatch( + logIn({ + email: form.elements.email.value, + password: form.elements.password.value, + }) ); form.reset(); diff --git a/src/components/NotFoundPage/NotFoundPage.jsx b/src/components/NotFound/NotFound.jsx similarity index 93% rename from src/components/NotFoundPage/NotFoundPage.jsx rename to src/components/NotFound/NotFound.jsx index 4edf9cd..92ca0ee 100644 --- a/src/components/NotFoundPage/NotFoundPage.jsx +++ b/src/components/NotFound/NotFound.jsx @@ -1,4 +1,4 @@ -import { Center, Title, Description } from './NotFoundPage.styled'; +import { Center, Title, Description } from './NotFound.styled'; import React, { useState, useEffect } from 'react'; function RedirectingPage() { diff --git a/src/components/NotFoundPage/NotFoundPage.styled.js b/src/components/NotFound/NotFound.styled.js similarity index 100% rename from src/components/NotFoundPage/NotFoundPage.styled.js rename to src/components/NotFound/NotFound.styled.js diff --git a/src/components/PrivateRoute.js b/src/components/PrivateRoute.js index f8604d3..72e1336 100644 --- a/src/components/PrivateRoute.js +++ b/src/components/PrivateRoute.js @@ -6,10 +6,7 @@ import { useAuth } from 'hooks'; * - Otherwise render to redirectTo */ -export const PrivateRoute = ({ - component: Component, - redirectTo = '/goit-react-hw-08-phonebook', -}) => { +export const PrivateRoute = ({ component: Component, redirectTo = '/' }) => { const { isLoggedIn, isRefreshing } = useAuth(); const shouldRedirect = !isLoggedIn && !isRefreshing; diff --git a/src/components/RegisterForm/RegisterForm.jsx b/src/components/RegisterForm/RegisterForm.jsx index 6f965a3..fb574b5 100644 --- a/src/components/RegisterForm/RegisterForm.jsx +++ b/src/components/RegisterForm/RegisterForm.jsx @@ -7,21 +7,20 @@ import { selectAuthIsLoading } from 'redux/auth/selectors'; import { Form } from './RegisterForm.styled'; import { Button, TextField, Box, Container } from '@mui/material'; -export const RegisterForm = ({ onData }) => { +export const RegisterForm = () => { const dispatch = useDispatch(); const isLoading = useSelector(selectAuthIsLoading); const handleSubmit = e => { e.preventDefault(); const form = e.currentTarget; - onData( - dispatch( - register({ - name: form.elements.name.value, - email: form.elements.email.value, - password: form.elements.password.value, - }) - ) + + dispatch( + register({ + name: form.elements.name.value, + email: form.elements.email.value, + password: form.elements.password.value, + }) ); form.reset(); diff --git a/src/components/RestrictedRoute.js b/src/components/RestrictedRoute.js index 0f71b9b..bdf82dc 100644 --- a/src/components/RestrictedRoute.js +++ b/src/components/RestrictedRoute.js @@ -6,10 +6,7 @@ import { Navigate } from 'react-router-dom'; * - Otherwise render the component */ -export const RestrictedRoute = ({ - component: Component, - redirectTo = '/goit-react-hw-08-phonebook', -}) => { +export const RestrictedRoute = ({ component: Component, redirectTo = '/' }) => { const { isLoggedIn } = useAuth(); return isLoggedIn ? : Component; diff --git a/src/index.js b/src/index.js index 20ef9cb..da084e2 100644 --- a/src/index.js +++ b/src/index.js @@ -14,7 +14,7 @@ ReactDOM.createRoot(document.getElementById('root')).render( - + diff --git a/src/pages/Login.js b/src/pages/Login.js index faf6693..4b016ae 100644 --- a/src/pages/Login.js +++ b/src/pages/Login.js @@ -2,26 +2,32 @@ 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'; export default function Login() { const isLoading = useSelector(selectAuthIsLoading); const status = useSelector(selectAuthError); + const [isRequestPending, setRequestPending] = useState(true); + + useEffect(() => { + setRequestPending(false); - const onRegister = () => { if ( status === 'Request failed with status code 400' && - isLoading === false + !isRequestPending && + !isLoading ) { toast.error( 'You have entered an incorrect email address or password, or you have not yet registered!' ); } - }; + }, [isRequestPending, status, isLoading]); + return (
Login - +
); } diff --git a/src/pages/Register.js b/src/pages/Register.js index afe1a59..ca3754e 100644 --- a/src/pages/Register.js +++ b/src/pages/Register.js @@ -2,24 +2,32 @@ 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'; export default function Register() { const isLoading = useSelector(selectAuthIsLoading); const status = useSelector(selectAuthError); - const onRegister = () => { + const [isRequestPending, setRequestPending] = useState(true); + + useEffect(() => { + setRequestPending(false); + if ( status === 'Request failed with status code 400' && - isLoading === false + !isRequestPending && + !isLoading ) { - toast.success('You are already authorized!'); + toast.success( + 'You or someone else is already registered with such data!' + ); } - }; + }, [isRequestPending, status, isLoading]); return (
Registration - +
); } diff --git a/src/redux/auth/slice.js b/src/redux/auth/slice.js index 385a807..91cce1a 100644 --- a/src/redux/auth/slice.js +++ b/src/redux/auth/slice.js @@ -11,6 +11,7 @@ export const initialState = { }; const handlePending = state => { + state.error = null; state.isLoading = true; };