From aa21e56ff414375f89b924db187ac6f234795515 Mon Sep 17 00:00:00 2001
From: Anastasia-front <palitsanastasia3.ap@gmail.com>
Date: Sun, 14 May 2023 20:56:54 +0300
Subject: [PATCH] pathes

---
 src/components/App.jsx                        | 18 +++++---
 src/components/NotFoundPage/NotFoundPage.jsx  | 44 +++++++++++++++++++
 .../NotFoundPage/NotFoundPage.styled.js       | 18 ++++++++
 src/components/PrivateRoute.js                |  5 ++-
 src/components/RestrictedRoute.js             |  5 ++-
 5 files changed, 81 insertions(+), 9 deletions(-)
 create mode 100644 src/components/NotFoundPage/NotFoundPage.jsx
 create mode 100644 src/components/NotFoundPage/NotFoundPage.styled.js

diff --git a/src/components/App.jsx b/src/components/App.jsx
index 900443f..c5b0564 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -12,6 +12,9 @@ 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')
+);
 
 export const App = () => {
   const dispatch = useDispatch();
@@ -37,32 +40,33 @@ export const App = () => {
   ) : (
     <>
       <Routes>
-        <Route path="/" element={<Layout />}>
+        <Route path="/goit-react-hw-08-phonebook" element={<Layout />}>
           <Route index element={<HomePage />} />
           <Route
-            path="/register"
+            path="register"
             element={
               <RestrictedRoute
-                redirectTo="/contacts"
+                redirectTo="contacts"
                 component={<RegisterPage />}
               />
             }
           />
           <Route
-            path="/login"
+            path="login"
             element={
               <RestrictedRoute
-                redirectTo="/contacts"
+                redirectTo="contacts"
                 component={<LoginPage />}
               />
             }
           />
           <Route
-            path="/contacts"
+            path="contacts"
             element={
-              <PrivateRoute redirectTo="/login" component={<ContactsPage />} />
+              <PrivateRoute redirectTo="login" component={<ContactsPage />} />
             }
           />
+          <Route path="*" element={<NotFoundPage />} />
         </Route>
       </Routes>
       <Toaster
diff --git a/src/components/NotFoundPage/NotFoundPage.jsx b/src/components/NotFoundPage/NotFoundPage.jsx
new file mode 100644
index 0000000..4edf9cd
--- /dev/null
+++ b/src/components/NotFoundPage/NotFoundPage.jsx
@@ -0,0 +1,44 @@
+import { Center, Title, Description } from './NotFoundPage.styled';
+import React, { useState, useEffect } from 'react';
+
+function RedirectingPage() {
+  const [secondsLeft, setSecondsLeft] = useState(5);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setSecondsLeft(seconds => seconds - 1);
+    }, 1000);
+
+    const timeout = setTimeout(() => {
+      window.location.replace('/goit-react-hw-08-phonebook');
+    }, 5000);
+
+    return () => {
+      clearInterval(interval);
+      clearTimeout(timeout);
+    };
+  }, []);
+
+  return (
+    <div>
+      <Title>Redirecting...</Title>
+      <Description>
+        You will be redirected to the home page in {secondsLeft} seconds.
+      </Description>
+    </div>
+  );
+}
+
+function NotFoundPage() {
+  return (
+    <Center>
+      <Title>404 Not Found</Title>
+      <Description>
+        Sorry, the page you are looking for could not be found.
+      </Description>
+      <RedirectingPage />
+    </Center>
+  );
+}
+
+export default NotFoundPage;
diff --git a/src/components/NotFoundPage/NotFoundPage.styled.js b/src/components/NotFoundPage/NotFoundPage.styled.js
new file mode 100644
index 0000000..94f3e1a
--- /dev/null
+++ b/src/components/NotFoundPage/NotFoundPage.styled.js
@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+export const Center = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+`;
+
+export const Title = styled.h1`
+  font-size: 30px;
+  font-weight: 700;
+`;
+export const Description = styled.p`
+  font-size: 20px;
+  font-weight: 500;
+`;
diff --git a/src/components/PrivateRoute.js b/src/components/PrivateRoute.js
index 72e1336..f8604d3 100644
--- a/src/components/PrivateRoute.js
+++ b/src/components/PrivateRoute.js
@@ -6,7 +6,10 @@ import { useAuth } from 'hooks';
  * - Otherwise render <Navigate> to redirectTo
  */
 
-export const PrivateRoute = ({ component: Component, redirectTo = '/' }) => {
+export const PrivateRoute = ({
+  component: Component,
+  redirectTo = '/goit-react-hw-08-phonebook',
+}) => {
   const { isLoggedIn, isRefreshing } = useAuth();
   const shouldRedirect = !isLoggedIn && !isRefreshing;
 
diff --git a/src/components/RestrictedRoute.js b/src/components/RestrictedRoute.js
index bdf82dc..0f71b9b 100644
--- a/src/components/RestrictedRoute.js
+++ b/src/components/RestrictedRoute.js
@@ -6,7 +6,10 @@ import { Navigate } from 'react-router-dom';
  * - Otherwise render the component
  */
 
-export const RestrictedRoute = ({ component: Component, redirectTo = '/' }) => {
+export const RestrictedRoute = ({
+  component: Component,
+  redirectTo = '/goit-react-hw-08-phonebook',
+}) => {
   const { isLoggedIn } = useAuth();
 
   return isLoggedIn ? <Navigate to={redirectTo} /> : Component;