From 5c60a566c72a1d473db0d4c9942d21d54acfb7c5 Mon Sep 17 00:00:00 2001 From: Gurikov Maxim Date: Thu, 3 Oct 2024 23:36:42 +0500 Subject: [PATCH] done task 3 --- .gitignore | 1 + package.json | 3 +- src/DataTypes/AppRoutes.tsx | 6 + src/Pages/FavoritesPage.tsx | 108 ++++-- src/Pages/LoginPage.tsx | 36 +- src/Pages/MainPage.tsx | 88 ++++- .../NotFoundPage/NotFoundPage.module.css | 20 ++ src/Pages/NotFoundPage/NotFoundPage.tsx | 21 ++ src/Pages/OfferPage.tsx | 333 +++++++++++++----- src/components/App.tsx | 34 +- src/components/AuthorizationWrapper.tsx | 12 + src/components/PlaceCard.tsx | 29 +- src/index.tsx | 8 +- 13 files changed, 546 insertions(+), 153 deletions(-) create mode 100644 src/DataTypes/AppRoutes.tsx create mode 100644 src/Pages/NotFoundPage/NotFoundPage.module.css create mode 100644 src/Pages/NotFoundPage/NotFoundPage.tsx create mode 100644 src/components/AuthorizationWrapper.tsx diff --git a/.gitignore b/.gitignore index 374d5b5..e3555b0 100644 --- a/.gitignore +++ b/.gitignore @@ -15,6 +15,7 @@ Thumbs.db .DS_Store .env *.log* +*.lock* npm-debug.log* yarn-debug.log* diff --git a/package.json b/package.json index 57b9901..9b0c921 100644 --- a/package.json +++ b/package.json @@ -16,9 +16,10 @@ "history": "5.3.0", "http-status-codes": "2.3.0", "leaflet": "1.7.1", + "prettier": "^3.3.3", "react": "18.2.0", "react-dom": "18.2.0", - "react-helmet-async": "1.3.0", + "react-helmet-async": "^2.0.5", "react-redux": "8.1.3", "react-router-dom": "6.16.0" }, diff --git a/src/DataTypes/AppRoutes.tsx b/src/DataTypes/AppRoutes.tsx new file mode 100644 index 0000000..e03dd83 --- /dev/null +++ b/src/DataTypes/AppRoutes.tsx @@ -0,0 +1,6 @@ +export enum AppRoutes { + MainPage = '/', + Login = '/login', + Offer = '/offer/:id', + Favorites = '/favorites', +} diff --git a/src/Pages/FavoritesPage.tsx b/src/Pages/FavoritesPage.tsx index 38491fb..e8b0bbd 100644 --- a/src/Pages/FavoritesPage.tsx +++ b/src/Pages/FavoritesPage.tsx @@ -1,3 +1,5 @@ +import { Helmet } from 'react-helmet-async'; + export function FavoritesPage(): React.JSX.Element { return (
@@ -6,16 +8,26 @@ export function FavoritesPage(): React.JSX.Element {
- 6 cities logo + 6 cities logo
diff --git a/src/Pages/LoginPage.tsx b/src/Pages/LoginPage.tsx index 94d033a..923233c 100644 --- a/src/Pages/LoginPage.tsx +++ b/src/Pages/LoginPage.tsx @@ -1,3 +1,5 @@ +import { Helmet } from 'react-helmet-async'; + export function LoginPage(): React.JSX.Element { return (
@@ -6,7 +8,13 @@ export function LoginPage(): React.JSX.Element {
- 6 cities logo + 6 cities logo
@@ -14,19 +22,39 @@ export function LoginPage(): React.JSX.Element {
+ + 6 cities - login +

Sign in

- +
- +
- +
diff --git a/src/Pages/MainPage.tsx b/src/Pages/MainPage.tsx index 5bfefde..bcae313 100644 --- a/src/Pages/MainPage.tsx +++ b/src/Pages/MainPage.tsx @@ -1,12 +1,12 @@ import React from 'react'; -import {PlaceCard} from '../components/PlaceCard.tsx'; -import {RoomType} from '../DataTypes/RoomType.ts'; +import { PlaceCard } from '../components/PlaceCard.tsx'; +import { RoomType } from '../DataTypes/RoomType.ts'; interface MainPageProps { placeCount: number; } -export function MainPage({placeCount}: MainPageProps): React.JSX.Element { +export function MainPage({ placeCount }: MainPageProps): React.JSX.Element { return (
@@ -14,16 +14,26 @@ export function MainPage({placeCount}: MainPageProps): React.JSX.Element {
-

Other places in the neighbourhood

+

+ Other places in the neighbourhood +

€80 - / night + + / night +
-
- + Rating
@@ -269,17 +386,32 @@ export function OfferPage(): React.JSX.Element {
€132 - / night + + / night +
-
- + Rating
@@ -304,17 +436,32 @@ export function OfferPage(): React.JSX.Element {
€180 - / night + + / night +
-
- + Rating
diff --git a/src/components/App.tsx b/src/components/App.tsx index 15329c2..827aa5d 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -1,12 +1,40 @@ -import {MainPage} from '../Pages/MainPage.tsx'; +import { MainPage } from '../Pages/MainPage.tsx'; import React from 'react'; +import { BrowserRouter, Route, Routes } from 'react-router-dom'; +import { LoginPage } from '../Pages/LoginPage.tsx'; +import { FavoritesPage } from '../Pages/FavoritesPage.tsx'; +import { OfferPage } from '../Pages/OfferPage.tsx'; +import { NotFoundPage } from '../Pages/NotFoundPage/NotFoundPage.tsx'; +import { AuthorizationWrapper } from './AuthorizationWrapper.tsx'; +import { AppRoutes } from '../DataTypes/AppRoutes.tsx'; +import { HelmetProvider } from 'react-helmet-async'; interface AppProps { placeCount: number; } -export function App({placeCount}: AppProps): React.JSX.Element { +export function App({ placeCount }: AppProps): React.JSX.Element { return ( - + + + + } + /> + } /> + + + + } + /> + } /> + } /> + + + ); } diff --git a/src/components/AuthorizationWrapper.tsx b/src/components/AuthorizationWrapper.tsx new file mode 100644 index 0000000..b0b3603 --- /dev/null +++ b/src/components/AuthorizationWrapper.tsx @@ -0,0 +1,12 @@ +import { Navigate } from 'react-router-dom'; + +interface AuthorizationWrapperProps { + children: React.JSX.Element; +} + +export function AuthorizationWrapper({ + children, +}: AuthorizationWrapperProps): React.JSX.Element { + const isAuthorized = false; + return isAuthorized ? children : ; +} diff --git a/src/components/PlaceCard.tsx b/src/components/PlaceCard.tsx index f308086..527c1e2 100644 --- a/src/components/PlaceCard.tsx +++ b/src/components/PlaceCard.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {RoomType} from '../DataTypes/RoomType.ts'; +import { RoomType } from '../DataTypes/RoomType.ts'; interface PlaceCardProps { price: number; @@ -10,24 +10,30 @@ interface PlaceCardProps { isInBookmarks?: boolean; } - export function PlaceCard({ price, type, image, description, isPremium, - isInBookmarks + isInBookmarks, }: PlaceCardProps): React.JSX.Element { return (
- {isPremium && + {isPremium && (
Premium -
} +
+ )}
@@ -36,16 +42,21 @@ export function PlaceCard({ €{price} / night
-
- + Rating
diff --git a/src/index.tsx b/src/index.tsx index 2b57d7a..13f3c27 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,13 +1,13 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; -import {App} from './components/App.tsx'; +import { App } from './components/App.tsx'; const root = ReactDOM.createRoot( - document.getElementById('root') as HTMLElement + document.getElementById('root') as HTMLElement, ); root.render( - - + + , );