From 3f0343e7fc3a112fa71c98c69e4d30ea8dd22019 Mon Sep 17 00:00:00 2001
From: uniks <uniks04@yandex.ru>
Date: Tue, 15 Oct 2024 15:42:57 +0500
Subject: [PATCH] 3 task

---
 src/components/App.tsx                  | 31 +++++++++++++++++++++++--
 src/components/Logo.tsx                 | 17 ++++++++++++++
 src/components/NotFound.tsx             | 12 ++++++++++
 src/components/pages/Favorites.tsx      | 15 +++++-------
 src/components/pages/FavoritesEmpty.tsx | 12 +++-------
 src/components/pages/Login.tsx          | 16 ++++++-------
 src/components/pages/MainEmpty.tsx      | 12 +++-------
 src/components/pages/MainScreen.tsx     | 19 +++++++--------
 src/components/pages/Offer.tsx          | 15 +++++-------
 src/components/pages/OfferNotLogged.tsx | 11 ++-------
 src/components/private-route.tsx        | 20 ++++++++++++++++
 src/const.ts                            | 14 +++++++++++
 12 files changed, 128 insertions(+), 66 deletions(-)
 create mode 100644 src/components/Logo.tsx
 create mode 100644 src/components/NotFound.tsx
 create mode 100644 src/components/private-route.tsx
 create mode 100644 src/const.ts

diff --git a/src/components/App.tsx b/src/components/App.tsx
index bb1f2c0..40b4a5c 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1,11 +1,38 @@
-import {MainScreen} from './pages/MainScreen';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { HelmetProvider } from 'react-helmet-async';
+import MainScreen from './pages/MainScreen';
+import Login from './pages/Login';
+import Favorites from './pages/Favorites';
+import Offer from './pages/Offer';
+import NotFound from './NotFound';
+import AppRoute, { AuthorizationStatus } from '../const';
+import PrivateRoute from './private-route';
 
 type AppScreenProps = {
   placesCount: number;
 }
 function App({placesCount}: AppScreenProps){
   return (
-    <MainScreen placesCount={placesCount}/>
+    <HelmetProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route path ={AppRoute.Root} element = {<MainScreen placesCount={placesCount} />} />
+          <Route path={AppRoute.Login} element={<Login/>}/>
+          <Route
+            path={AppRoute.Favorites}
+            element = {
+              <PrivateRoute
+                authorizationStatus={AuthorizationStatus.NoAuth}
+              >
+                <Favorites/>
+              </PrivateRoute>
+            }
+          />
+          <Route path={AppRoute.Offer} element={<Offer/>}/>
+          <Route path="*" element={<NotFound/>}/>
+        </Routes>
+      </BrowserRouter>
+    </HelmetProvider>
   );
 }
 export default App;
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
new file mode 100644
index 0000000..527daa1
--- /dev/null
+++ b/src/components/Logo.tsx
@@ -0,0 +1,17 @@
+import { Link } from 'react-router-dom';
+
+function Logo(){
+  return(
+    <Link className="header__logo-link header__logo-link--active" to={'/'}>
+      <img
+        className="header__logo"
+        src="img/logo.svg"
+        alt="6 cities logo"
+        width={81}
+        height={41}
+      />
+    </Link>
+  );
+}
+
+export default Logo;
diff --git a/src/components/NotFound.tsx b/src/components/NotFound.tsx
new file mode 100644
index 0000000..493c6c1
--- /dev/null
+++ b/src/components/NotFound.tsx
@@ -0,0 +1,12 @@
+import { Link } from 'react-router-dom';
+
+function NotFound() {
+  return (
+    <div>
+      <h1>404 Not Found</h1>
+      <Link to="/">Go to Home Page</Link>
+    </div>
+  );
+}
+
+export default NotFound;
diff --git a/src/components/pages/Favorites.tsx b/src/components/pages/Favorites.tsx
index 3b51022..dc32816 100644
--- a/src/components/pages/Favorites.tsx
+++ b/src/components/pages/Favorites.tsx
@@ -1,19 +1,16 @@
+import Logo from '../Logo';
+import { Helmet } from 'react-helmet-async';
 function Favorites(){
   return (
     <div className="page">
+      <Helmet>
+        <title>Избранное</title>
+      </Helmet>
       <header className="header">
         <div className="container">
           <div className="header__wrapper">
             <div className="header__left">
-              <a className="header__logo-link" href="main.html">
-                <img
-                  className="header__logo"
-                  src="img/logo.svg"
-                  alt="6 cities logo"
-                  width={81}
-                  height={41}
-                />
-              </a>
+              <Logo/>
             </div>
             <nav className="header__nav">
               <ul className="header__nav-list">
diff --git a/src/components/pages/FavoritesEmpty.tsx b/src/components/pages/FavoritesEmpty.tsx
index 311e5c6..92f238a 100644
--- a/src/components/pages/FavoritesEmpty.tsx
+++ b/src/components/pages/FavoritesEmpty.tsx
@@ -1,3 +1,5 @@
+import Logo from '../Logo';
+
 function FavoritesEmpty(){
   return (
     <div className="page page--favorites-empty">
@@ -5,15 +7,7 @@ function FavoritesEmpty(){
         <div className="container">
           <div className="header__wrapper">
             <div className="header__left">
-              <a className="header__logo-link" href="main.html">
-                <img
-                  className="header__logo"
-                  src="img/logo.svg"
-                  alt="6 cities logo"
-                  width={81}
-                  height={41}
-                />
-              </a>
+              <Logo/>
             </div>
             <nav className="header__nav">
               <ul className="header__nav-list">
diff --git a/src/components/pages/Login.tsx b/src/components/pages/Login.tsx
index d2b9e2e..e895c81 100644
--- a/src/components/pages/Login.tsx
+++ b/src/components/pages/Login.tsx
@@ -1,19 +1,17 @@
+import Logo from '../Logo';
+import { Helmet } from 'react-helmet-async';
+
 function Login(){
   return (
     < div className="page page--gray page--login">
+      <Helmet>
+        <title>Авторизация</title>
+      </Helmet>
       <header className="header">
         <div className="container">
           <div className="header__wrapper">
             <div className="header__left">
-              <a className="header__logo-link" href="main.html">
-                <img
-                  className="header__logo"
-                  src="img/logo.svg"
-                  alt="6 cities logo"
-                  width={81}
-                  height={41}
-                />
-              </a>
+              <Logo/>
             </div>
           </div>
         </div>
diff --git a/src/components/pages/MainEmpty.tsx b/src/components/pages/MainEmpty.tsx
index 71d9aed..608b03f 100644
--- a/src/components/pages/MainEmpty.tsx
+++ b/src/components/pages/MainEmpty.tsx
@@ -1,3 +1,5 @@
+import Logo from '../Logo';
+
 function MainEmpty(){
   return (
     <div className="page page--gray page--main">
@@ -5,15 +7,7 @@ function MainEmpty(){
         <div className="container">
           <div className="header__wrapper">
             <div className="header__left">
-              <a className="header__logo-link header__logo-link--active">
-                <img
-                  className="header__logo"
-                  src="img/logo.svg"
-                  alt="6 cities logo"
-                  width={81}
-                  height={41}
-                />
-              </a>
+              <Logo/>
             </div>
             <nav className="header__nav">
               <ul className="header__nav-list">
diff --git a/src/components/pages/MainScreen.tsx b/src/components/pages/MainScreen.tsx
index 85d5035..186f88f 100644
--- a/src/components/pages/MainScreen.tsx
+++ b/src/components/pages/MainScreen.tsx
@@ -1,23 +1,22 @@
 import Card from './Card';
+import Logo from '../Logo';
+import { Helmet } from 'react-helmet-async';
+
 type MainScreenProps = {
     placesCount: number;
 }
-export function MainScreen({placesCount}: MainScreenProps){
+
+function MainScreen({placesCount}: MainScreenProps){
   return (
     <div className="page page--gray page--main">
+      <Helmet>
+        <title>6 Городов</title>
+      </Helmet>
       <header className="header">
         <div className="container">
           <div className="header__wrapper">
             <div className="header__left">
-              <a className="header__logo-link header__logo-link--active">
-                <img
-                  className="header__logo"
-                  src="img/logo.svg"
-                  alt="6 cities logo"
-                  width={81}
-                  height={41}
-                />
-              </a>
+              <Logo/>
             </div>
             <nav className="header__nav">
               <ul className="header__nav-list">
diff --git a/src/components/pages/Offer.tsx b/src/components/pages/Offer.tsx
index cf43e62..fcd5b8e 100644
--- a/src/components/pages/Offer.tsx
+++ b/src/components/pages/Offer.tsx
@@ -1,19 +1,16 @@
+import Logo from '../Logo';
+import { Helmet } from 'react-helmet-async';
 function Offer(){
   return (
     <div className="page">
+      <Helmet>
+        <title>Предложение</title>
+      </Helmet>
       <header className="header">
         <div className="container">
           <div className="header__wrapper">
             <div className="header__left">
-              <a className="header__logo-link" href="main.html">
-                <img
-                  className="header__logo"
-                  src="img/logo.svg"
-                  alt="6 cities logo"
-                  width={81}
-                  height={41}
-                />
-              </a>
+              <Logo/>
             </div>
             <nav className="header__nav">
               <ul className="header__nav-list">
diff --git a/src/components/pages/OfferNotLogged.tsx b/src/components/pages/OfferNotLogged.tsx
index 8dbbb20..11b411f 100644
--- a/src/components/pages/OfferNotLogged.tsx
+++ b/src/components/pages/OfferNotLogged.tsx
@@ -1,3 +1,4 @@
+import Logo from '../Logo';
 function OfferNotLogged(){
   return (
     <div className="page">
@@ -5,15 +6,7 @@ function OfferNotLogged(){
         <div className="container">
           <div className="header__wrapper">
             <div className="header__left">
-              <a className="header__logo-link" href="main.html">
-                <img
-                  className="header__logo"
-                  src="img/logo.svg"
-                  alt="6 cities logo"
-                  width={81}
-                  height={41}
-                />
-              </a>
+              <Logo/>
             </div>
             <nav className="header__nav">
               <ul className="header__nav-list">
diff --git a/src/components/private-route.tsx b/src/components/private-route.tsx
new file mode 100644
index 0000000..4a4272f
--- /dev/null
+++ b/src/components/private-route.tsx
@@ -0,0 +1,20 @@
+import {Navigate} from 'react-router-dom';
+import AppRoute from '../const';
+import { AuthorizationStatus } from '../const';
+
+type PrivateRouteProps = {
+  authorizationStatus: AuthorizationStatus;
+  children: JSX.Element;
+}
+
+function PrivateRoute(props: PrivateRouteProps): JSX.Element {
+  const {authorizationStatus, children} = props;
+
+  return (
+    authorizationStatus === AuthorizationStatus.Auth
+      ? children
+      : <Navigate to={AppRoute.Login} />
+  );
+}
+
+export default PrivateRoute;
diff --git a/src/const.ts b/src/const.ts
new file mode 100644
index 0000000..15ec495
--- /dev/null
+++ b/src/const.ts
@@ -0,0 +1,14 @@
+enum AppRoute{
+    Root = '/',
+    Login = '/login',
+    Favorites = '/favorites',
+    Offer = '/offer/:id'
+}
+
+export enum AuthorizationStatus {
+    Auth = 'AUTH',
+    NoAuth = 'NO_AUTH',
+    Unknown = 'UNKNOWN',
+}
+
+export default AppRoute;