done

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 = () => {
   ) : (
     <>
       <Routes>
-        <Route path="/goit-react-hw-08-phonebook" element={<Layout />}>
+        <Route path="/" element={<Layout />}>
           <Route index element={<HomePage />} />
           <Route
             path="register"
             element={
               <RestrictedRoute
-                redirectTo="contacts"
+                redirectTo="/contacts"
                 component={<RegisterPage />}
               />
             }
@@ -55,15 +53,15 @@ export const App = () => {
             path="login"
             element={
               <RestrictedRoute
-                redirectTo="contacts"
+                redirectTo="/contacts"
                 component={<LoginPage />}
               />
             }
           />
           <Route
             path="contacts"
             element={
-              <PrivateRoute redirectTo="login" component={<ContactsPage />} />
+              <PrivateRoute redirectTo="/login" component={<ContactsPage />} />
             }
           />
           <Route path="*" element={<NotFoundPage />} />

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

src/components/NotFoundPage/NotFoundPage.jsx → 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() {

src/components/PrivateRoute.js

@@ -6,10 +6,7 @@ import { useAuth } from 'hooks';
  * - Otherwise render <Navigate> 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;
 

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

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 ? <Navigate to={redirectTo} /> : Component;

src/index.js

@@ -14,7 +14,7 @@ ReactDOM.createRoot(document.getElementById('root')).render(
     <Provider store={store}>
       <PersistGate loading={null} persistor={persistor}>
         <ThemeProvider theme={theme}>
-          <BrowserRouter>
+          <BrowserRouter basename="goit-react-hw-08-phonebook">
             <App />
           </BrowserRouter>
         </ThemeProvider>

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

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

src/redux/auth/slice.js

@@ -11,6 +11,7 @@ export const initialState = {
 };
 
 const handlePending = state => {
+  state.error = null;
   state.isLoading = true;
 };