From 405807655d26be9d8674a94ccd2a0282520cbec1 Mon Sep 17 00:00:00 2001
From: iluvator <petrov34rus@yandex.ru>
Date: Mon, 19 Feb 2024 17:58:01 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A1=D0=BE=D0=B7=D0=B4=D0=B0=D0=BB=20=D0=BC?=
 =?UTF-8?q?=D0=B0=D1=80=D1=88=D1=80=D1=83=D1=82=D0=B8=D0=B7=D0=B0=D1=86?=
 =?UTF-8?q?=D0=B8=D1=8E=20=D0=BF=D0=BE=20=D0=BF=D1=80=D0=B8=D0=BB=D0=BE?=
 =?UTF-8?q?=D0=B6=D0=B5=D0=BD=D0=B8=D1=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                  | 15 +++++++++------
 package.json                       |  2 +-
 src/components/app.tsx             | 30 +++++++++++++++++++++++++++++-
 src/components/card.tsx            |  4 ++--
 src/components/container.tsx       |  7 ++++---
 src/components/header.tsx          |  7 +++++--
 src/components/protected-route.tsx | 17 +++++++++++++++++
 src/components/rating.tsx          |  6 ++++--
 src/const.ts                       | 12 ++++++++++++
 src/index.tsx                      |  8 +++++++-
 src/pages/main-page.tsx            |  2 +-
 src/pages/not-found-page.tsx       | 20 ++++++++++++++++++++
 12 files changed, 111 insertions(+), 19 deletions(-)
 create mode 100644 src/components/protected-route.tsx
 create mode 100644 src/const.ts
 create mode 100644 src/pages/not-found-page.tsx

diff --git a/package-lock.json b/package-lock.json
index 9e0465f..cb321af 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "dependencies": {
         "@reduxjs/toolkit": "1.9.7",
         "axios": "1.5.1",
-        "classnames": "2.3.2",
+        "clsx": "2.1.0",
         "history": "5.3.0",
         "http-status-codes": "2.3.0",
         "leaflet": "1.7.1",
@@ -2380,11 +2380,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/classnames": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
-      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
-    },
     "node_modules/clean-regexp": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/clean-regexp/-/clean-regexp-1.0.0.tgz",
@@ -2406,6 +2401,14 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
+      "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
diff --git a/package.json b/package.json
index d1d0ee6..f255ef2 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
   "dependencies": {
     "@reduxjs/toolkit": "1.9.7",
     "axios": "1.5.1",
-    "classnames": "2.3.2",
+    "clsx": "2.1.0",
     "history": "5.3.0",
     "http-status-codes": "2.3.0",
     "leaflet": "1.7.1",
diff --git a/src/components/app.tsx b/src/components/app.tsx
index ef980b1..aae5157 100644
--- a/src/components/app.tsx
+++ b/src/components/app.tsx
@@ -1,4 +1,11 @@
 import MainPage from '../pages/main-page';
+import OfferPage from '../pages/offer-page';
+import FavoritePage from '../pages/favorite-page';
+import LoginPage from '../pages/login-page';
+import { Route, Routes } from 'react-router-dom';
+import { AppRoute, authorizationStatus } from '../const';
+import NotFoundPage from '../pages/not-found-page';
+import ProtectedRoute from './protected-route';
 
 type TAppProps = {
   count: number;
@@ -6,6 +13,27 @@ type TAppProps = {
 
 export default function App({ count }: TAppProps) {
   return (
-    <MainPage count={count} />
+    <Routes>
+      <Route
+        path={AppRoute.Main}
+        element={<MainPage count={count} />}
+      />
+      <Route
+        path={AppRoute.Offer}
+        element={<OfferPage />}
+      />
+      <Route
+        path={AppRoute.Favorites}
+        element={<ProtectedRoute hasAccess={authorizationStatus.NoAuth}><FavoritePage /></ProtectedRoute>}
+      />
+      <Route
+        path={AppRoute.Login}
+        element={<LoginPage />}
+      />
+      <Route
+        path='*'
+        element={<NotFoundPage />}
+      />
+    </Routes>
   );
 }
diff --git a/src/components/card.tsx b/src/components/card.tsx
index c9f51bc..b063e57 100644
--- a/src/components/card.tsx
+++ b/src/components/card.tsx
@@ -7,10 +7,10 @@ type TCardProps = {
 export default function Card({ cardClass, cardPremium = false }: TCardProps) {
   return (
     <article className={`${cardClass} place-card`}>
-      {cardPremium ?
+      {cardPremium &&
         <div className="place-card__mark">
           <span>Premium</span>
-        </div> : ''}
+        </div>}
 
       <div className="cities__image-wrapper place-card__image-wrapper">
         <a href="#">
diff --git a/src/components/container.tsx b/src/components/container.tsx
index b71b2d3..55b3892 100644
--- a/src/components/container.tsx
+++ b/src/components/container.tsx
@@ -1,18 +1,19 @@
 import { ReactNode } from 'react';
 import Header from './header';
+import clsx from 'clsx';
 
 type TContainerProps = {
   children: ReactNode;
   pageClass?: string;
-  mainClass?: string;
+  mainClass: string;
   navigation?: boolean;
 }
 
 export default function Container({ children, pageClass, mainClass, navigation }: TContainerProps) {
   return (
-    <div className={`page ${pageClass ? pageClass : ''}`}>
+    <div className={clsx('page', pageClass && pageClass)}>
       <Header navigation />
-      <main className={`page__main page__main--${mainClass ? mainClass : ''}`}>
+      <main className={clsx('page__main page__main--', mainClass && mainClass)}>
         {children}
       </main>
     </div>
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 5feee06..7140410 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,3 +1,6 @@
+import { Link } from 'react-router-dom';
+import { AppRoute } from '../const';
+
 type THeaderProps = {
   navigation: boolean;
 }
@@ -8,9 +11,9 @@ export default function Header({ navigation }: THeaderProps) {
       <div className="container">
         <div className="header__wrapper">
           <div className="header__left">
-            <a className="header__logo-link header__logo-link--active">
+            <Link to={AppRoute.Main} 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>
+            </Link>
           </div>
           {navigation ?
             (
diff --git a/src/components/protected-route.tsx b/src/components/protected-route.tsx
new file mode 100644
index 0000000..eb1f16a
--- /dev/null
+++ b/src/components/protected-route.tsx
@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { Navigate } from 'react-router-dom';
+import { AppRoute } from '../const';
+
+type TProtectedRouteProps = {
+  children: ReactNode;
+  hasAccess: boolean;
+}
+
+export default function ProtectedRoute({ hasAccess, children }: TProtectedRouteProps) {
+  if (hasAccess) {
+    return children;
+  }
+
+  return <Navigate to={AppRoute.Login} />;
+}
+
diff --git a/src/components/rating.tsx b/src/components/rating.tsx
index 75057f0..691e280 100644
--- a/src/components/rating.tsx
+++ b/src/components/rating.tsx
@@ -10,8 +10,10 @@ export default function Rating({ ratingClass, isRatingValue }: TRating) {
         <span style={{ width: '80%' }}></span>
         <span className="visually-hidden">Rating</span>
       </div>
-      {isRatingValue ?
-        <span className="offer__rating-value rating__value">4.8</span> : ''}
+      {isRatingValue &&
+        <span className="offer__rating-value rating__value">4.8</span>}
     </div>
+
+
   );
 }
diff --git a/src/const.ts b/src/const.ts
new file mode 100644
index 0000000..d21ad87
--- /dev/null
+++ b/src/const.ts
@@ -0,0 +1,12 @@
+export enum AppRoute {
+  Login = '/login',
+  Main = '/',
+  Favorites = '/favorites',
+  Offer = '/offer',
+}
+
+export const authorizationStatus = {
+  Auth: true,
+  NoAuth: false,
+};
+
diff --git a/src/index.tsx b/src/index.tsx
index 8cecd79..5749485 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './components/app';
+import { BrowserRouter } from 'react-router-dom';
+import { HelmetProvider } from 'react-helmet-async';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
@@ -8,6 +10,10 @@ const root = ReactDOM.createRoot(
 
 root.render(
   <React.StrictMode>
-    <App count={5} />
+    <HelmetProvider>
+      <BrowserRouter>
+        <App count={5} />
+      </BrowserRouter>
+    </HelmetProvider>
   </React.StrictMode>
 );
diff --git a/src/pages/main-page.tsx b/src/pages/main-page.tsx
index 54e931f..6c327ac 100644
--- a/src/pages/main-page.tsx
+++ b/src/pages/main-page.tsx
@@ -66,7 +66,7 @@ export default function MainPage({ count }: TMainPageProps) {
               </ul>
             </form>
             <div className="cities__places-list places__list tabs__content">
-              <Card cardClass='cities__card' />
+              <Card cardClass='cities__card' cardPremium />
               <Card cardClass='cities__card' />
               <Card cardClass='cities__card' />
               <Card cardClass='cities__card' />
diff --git a/src/pages/not-found-page.tsx b/src/pages/not-found-page.tsx
new file mode 100644
index 0000000..fe0d53b
--- /dev/null
+++ b/src/pages/not-found-page.tsx
@@ -0,0 +1,20 @@
+import { Link } from 'react-router-dom';
+import { AppRoute } from '../const';
+
+const divStyle = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  textAlign: 'center'
+};
+
+export default function NotFoundPage() {
+  return (
+    <div style={divStyle}>
+      <h1>404 Not Found</h1>
+      <Link to={AppRoute.Main}>
+        <p>На глваную страницу</p>
+      </Link>
+    </div>
+  );
+}