Skip to content

Commit

Permalink
Merge pull request #3 from Takiera/module3-task1
Browse files Browse the repository at this point in the history
  • Loading branch information
keksobot authored Aug 28, 2024
2 parents c75b7e5 + fee72eb commit 091bffd
Show file tree
Hide file tree
Showing 11 changed files with 601 additions and 331 deletions.
33 changes: 28 additions & 5 deletions src/components/app/app.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,36 @@
import MainPage from '../../pages/main-page';
import FavoritesPage from '../../pages/favorites-page';
import LoginPage from '../../pages/login-page';
import OfferPage from '../../pages/offer-page';
import NotFoundPage from '../../pages/not-found-page';
import PrivateRoute from '../private-route/private-route';
import { Route, BrowserRouter, Routes } from 'react-router-dom';
import { AppRoute, AuthorizationStatus } from '../../consts';

type AppProps = {
offersCount: number;
}
};

export default function App({offersCount}: AppProps): JSX.Element {
export default function App({ offersCount }: AppProps): JSX.Element {
return (
<MainPage
offersCount = {offersCount}
/>
<BrowserRouter>
<Routes>
<Route
path={AppRoute.Main}
element={<MainPage offersCount={offersCount} />}
/>
<Route
path={AppRoute.Favorites}
element={
<PrivateRoute authorizationStatus={AuthorizationStatus.Auth}>
<FavoritesPage />
</PrivateRoute>
}
/>
<Route path={AppRoute.Login} element={<LoginPage />} />
<Route path={AppRoute.Offer} element={<OfferPage />} />
<Route path="*" element={<NotFoundPage />} />
</Routes>
</BrowserRouter>
);
}
42 changes: 42 additions & 0 deletions src/components/header/header.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
export default function Header() {
return (
<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>
</div>
<nav className="header__nav">
<ul className="header__nav-list">
<li className="header__nav-item user">
<a
className="header__nav-link header__nav-link--profile"
href="#"
>
<div className="header__avatar-wrapper user__avatar-wrapper"></div>
<span className="header__user-name user__name">
Oliver.conner@gmail.com
</span>
<span className="header__favorite-count">3</span>
</a>
</li>
<li className="header__nav-item">
<a className="header__nav-link" href="#">
<span className="header__signout">Sign out</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
);
}
19 changes: 19 additions & 0 deletions src/components/private-route/private-route.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { Navigate } from 'react-router-dom';
import { AppRoute, AuthorizationStatus } from '../../consts';

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;
12 changes: 12 additions & 0 deletions src/consts.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
export enum AppRoute {
Main = '/',
Login = '/login',
Favorites = '/favorites',
Offer = '/offer/:id'
}

export enum AuthorizationStatus {
Auth = 'AUTH',
NoAuth = 'NO_AUTH',
Unknown = 'UNKNOWN',
}
44 changes: 13 additions & 31 deletions src/pages/favorites-empty-page.tsx
Original file line number Diff line number Diff line change
@@ -1,49 +1,31 @@
import Header from '../components/header/header';

export default function FavoritesEmptyPage(): JSX.Element {
return (
<div className="page page--favorites-empty">
<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>
</div>
<nav className="header__nav">
<ul className="header__nav-list">
<li className="header__nav-item user">
<a className="header__nav-link header__nav-link--profile" href="#">
<div className="header__avatar-wrapper user__avatar-wrapper">
</div>
<span className="header__user-name user__name">Oliver.conner@gmail.com</span>
<span className="header__favorite-count">0</span>
</a>
</li>
<li className="header__nav-item">
<a className="header__nav-link" href="#">
<span className="header__signout">Sign out</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</header>

<Header />
<main className="page__main page__main--favorites page__main--favorites-empty">
<div className="page__favorites-container container">
<section className="favorites favorites--empty">
<h1 className="visually-hidden">Favorites (empty)</h1>
<div className="favorites__status-wrapper">
<b className="favorites__status">Nothing yet saved.</b>
<p className="favorites__status-description">Save properties to narrow down search or plan your future trips.</p>
<p className="favorites__status-description">
Save properties to narrow down search or plan your future trips.
</p>
</div>
</section>
</div>
</main>
<footer className="footer">
<a className="footer__logo-link" href="main.html">
<img className="footer__logo" src="img/logo.svg" alt="6 cities logo" width="64" height="33" />
<img
className="footer__logo"
src="img/logo.svg"
alt="6 cities logo"
width="64"
height="33"
/>
</a>
</footer>
</div>
Expand Down
114 changes: 70 additions & 44 deletions src/pages/favorites-page.tsx
Original file line number Diff line number Diff line change
@@ -1,34 +1,9 @@
import Header from '../components/header/header';

export default function FavoritesPage(): JSX.Element {
return (
<div className="page">
<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>
</div>
<nav className="header__nav">
<ul className="header__nav-list">
<li className="header__nav-item user">
<a className="header__nav-link header__nav-link--profile" href="#">
<div className="header__avatar-wrapper user__avatar-wrapper">
</div>
<span className="header__user-name user__name">Oliver.conner@gmail.com</span>
<span className="header__favorite-count">3</span>
</a>
</li>
<li className="header__nav-item">
<a className="header__nav-link" href="#">
<span className="header__signout">Sign out</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<Header />

<main className="page__main page__main--favorites">
<div className="page__favorites-container container">
Expand All @@ -50,25 +25,40 @@ export default function FavoritesPage(): JSX.Element {
</div>
<div className="favorites__image-wrapper place-card__image-wrapper">
<a href="#">
<img className="place-card__image" src="img/apartment-small-03.jpg" width="150" height="110" alt="Place image" />
<img
className="place-card__image"
src="img/apartment-small-03.jpg"
width="150"
height="110"
alt="Place image"
/>
</a>
</div>
<div className="favorites__card-info place-card__info">
<div className="place-card__price-wrapper">
<div className="place-card__price">
<b className="place-card__price-value">&euro;180</b>
<span className="place-card__price-text">&#47;&nbsp;night</span>
<span className="place-card__price-text">
&#47;&nbsp;night
</span>
</div>
<button className="place-card__bookmark-button place-card__bookmark-button--active button" type="button">
<svg className="place-card__bookmark-icon" width="18" height="19">
<button
className="place-card__bookmark-button place-card__bookmark-button--active button"
type="button"
>
<svg
className="place-card__bookmark-icon"
width="18"
height="19"
>
<use xlinkHref="#icon-bookmark"></use>
</svg>
<span className="visually-hidden">In bookmarks</span>
</button>
</div>
<div className="place-card__rating rating">
<div className="place-card__stars rating__stars">
<span style={{width: '100%'}}></span>
<span style={{ width: '100%' }}></span>
<span className="visually-hidden">Rating</span>
</div>
</div>
Expand All @@ -82,25 +72,40 @@ export default function FavoritesPage(): JSX.Element {
<article className="favorites__card place-card">
<div className="favorites__image-wrapper place-card__image-wrapper">
<a href="#">
<img className="place-card__image" src="img/room-small.jpg" width="150" height="110" alt="Place image" />
<img
className="place-card__image"
src="img/room-small.jpg"
width="150"
height="110"
alt="Place image"
/>
</a>
</div>
<div className="favorites__card-info place-card__info">
<div className="place-card__price-wrapper">
<div className="place-card__price">
<b className="place-card__price-value">&euro;80</b>
<span className="place-card__price-text">&#47;&nbsp;night</span>
<span className="place-card__price-text">
&#47;&nbsp;night
</span>
</div>
<button className="place-card__bookmark-button place-card__bookmark-button--active button" type="button">
<svg className="place-card__bookmark-icon" width="18" height="19">
<button
className="place-card__bookmark-button place-card__bookmark-button--active button"
type="button"
>
<svg
className="place-card__bookmark-icon"
width="18"
height="19"
>
<use xlinkHref="#icon-bookmark"></use>
</svg>
<span className="visually-hidden">In bookmarks</span>
</button>
</div>
<div className="place-card__rating rating">
<div className="place-card__stars rating__stars">
<span style={{width: '80%'}}></span>
<span style={{ width: '80%' }}></span>
<span className="visually-hidden">Rating</span>
</div>
</div>
Expand All @@ -125,25 +130,40 @@ export default function FavoritesPage(): JSX.Element {
<article className="favorites__card place-card">
<div className="favorites__image-wrapper place-card__image-wrapper">
<a href="#">
<img className="place-card__image" src="img/apartment-small-04.jpg" width="150" height="110" alt="Place image" />
<img
className="place-card__image"
src="img/apartment-small-04.jpg"
width="150"
height="110"
alt="Place image"
/>
</a>
</div>
<div className="favorites__card-info place-card__info">
<div className="place-card__price-wrapper">
<div className="place-card__price">
<b className="place-card__price-value">&euro;180</b>
<span className="place-card__price-text">&#47;&nbsp;night</span>
<span className="place-card__price-text">
&#47;&nbsp;night
</span>
</div>
<button className="place-card__bookmark-button place-card__bookmark-button--active button" type="button">
<svg className="place-card__bookmark-icon" width="18" height="19">
<button
className="place-card__bookmark-button place-card__bookmark-button--active button"
type="button"
>
<svg
className="place-card__bookmark-icon"
width="18"
height="19"
>
<use xlinkHref="#icon-bookmark"></use>
</svg>
<span className="visually-hidden">In bookmarks</span>
</button>
</div>
<div className="place-card__rating rating">
<div className="place-card__stars rating__stars">
<span style={{width: '100%'}}></span>
<span style={{ width: '100%' }}></span>
<span className="visually-hidden">Rating</span>
</div>
</div>
Expand All @@ -161,7 +181,13 @@ export default function FavoritesPage(): JSX.Element {
</main>
<footer className="footer container">
<a className="footer__logo-link" href="main.html">
<img className="footer__logo" src="img/logo.svg" alt="6 cities logo" width="64" height="33" />
<img
className="footer__logo"
src="img/logo.svg"
alt="6 cities logo"
width="64"
height="33"
/>
</a>
</footer>
</div>
Expand Down
Loading

0 comments on commit 091bffd

Please sign in to comment.