Skip to content

Commit

Permalink
big refractor
Browse files Browse the repository at this point in the history
  • Loading branch information
@mgmman
mgmman committed Nov 6, 2024
1 parent e1decbd commit b67cbc0
Show file tree
Hide file tree
Showing 24 changed files with 353 additions and 150 deletions.
1 change: 1 addition & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>6 cities</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="src/pages/not-found-page/not-found-page.css">
</head>

<body>
Expand Down
9 changes: 4 additions & 5 deletions src/Pages/main-page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,8 +90,7 @@ export function MainPage({ offers }: MainPageProps): React.JSX.Element {
<OffersList
offers={offers}
onActiveOfferChange={(offer: Nullable<Offer>) =>
setActiveOffer(offer)
}
setActiveOffer(offer)}
isOnMainPage
/>
</section>
Expand All @@ -105,9 +104,9 @@ export function MainPage({ offers }: MainPageProps): React.JSX.Element {
selectedPoint={
activeOffer
? {
location: activeOffer?.location,
id: activeOffer?.id,
}
location: activeOffer?.location,
id: activeOffer?.id,
}
: undefined
}
isOnMainPage
Expand Down
8 changes: 4 additions & 4 deletions .../not-found-page/not-found-page.module.css → src/Pages/not-found-page/not-found-page.css
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
.container {
.not-found-page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.title {
.not-found-page__title {
text-align: center;
}

.link {
.not-found-page__link {
color: skyblue;
margin: 10px;
font-style: italic;
}

.link:hover {
.not-found-page__link:hover {
text-decoration: underline;
font-weight: bold;
}
8 changes: 4 additions & 4 deletions src/Pages/not-found-page/not-found-page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
import { Link } from 'react-router-dom';
import styles from './not-found-page.module.css';
import { Helmet } from 'react-helmet-async';
import {AppRoutes} from '../../dataTypes/enums/app-routes.ts';

export function NotFoundPage(): React.JSX.Element {
return (
<main className={styles.container}>
<main className='not-found-page'>
<Helmet>
<title>404 - not found</title>
</Helmet>
<h1>404 - Page Not Found</h1>
<p className={styles.title}>
<p className='not-found-page__title'>
The page you are looking for might have been removed or is temporarily
unavailable.
</p>
<Link to="/public" className={styles.link}>
<Link to={AppRoutes.MainPage} className='not-found-page__link'>
back to main page
</Link>
</main>
Expand Down
149 changes: 39 additions & 110 deletions src/Pages/offer-page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,74 +5,37 @@ import { offerMocks } from '../mocks/offers.ts';
import { Reviews } from '../components/reviews/reviews.tsx';
import { reviewMocks } from '../mocks/reviews.ts';
import { Map } from '../components/map/map.tsx';
import React, { useState } from 'react';
import { Nullable } from 'vitest';
import { Offer } from '../dataTypes/offer.ts';
import React from 'react';
import { useParams } from 'react-router-dom';
import { OfferInsideItems } from '../components/offer/offer-inside-items.tsx';
import { detailedOfferMocks } from '../mocks/detailed-offer.ts';
import { OfferHost } from '../components/offer/offer-host.tsx';
import { capitalize, pluralizeAndCombine } from '../utils/string-utils.ts';
import { Rating } from '../components/rating.tsx';
import { OfferGallery } from '../components/offer/offer-gallery.tsx';

export function OfferPage(): React.JSX.Element {
const [activeOffer, setActiveOffer] = useState<Nullable<Offer>>(null);
const offers = offerMocks.slice(0, 3);
const offerId = useParams().id;
const offers = offerMocks.filter((offer) => offer.id !== offerId).slice(0, 3);
const currentOffer = detailedOfferMocks.find(
(offer) => offer.id === offerId,
)!;
return (
<div className="page">
<Layout>
<main className="page__main page__main--offer">
<Helmet>6 cities - offer</Helmet>
<section className="offer">
<div className="offer__gallery-container container">
<div className="offer__gallery">
<div className="offer__image-wrapper">
<img
className="offer__image"
src="img/room.jpg"
alt="Photo studio"
/>
</div>
<div className="offer__image-wrapper">
<img
className="offer__image"
src="img/apartment-01.jpg"
alt="Photo studio"
/>
</div>
<div className="offer__image-wrapper">
<img
className="offer__image"
src="img/apartment-02.jpg"
alt="Photo studio"
/>
</div>
<div className="offer__image-wrapper">
<img
className="offer__image"
src="img/apartment-03.jpg"
alt="Photo studio"
/>
</div>
<div className="offer__image-wrapper">
<img
className="offer__image"
src="img/studio-01.jpg"
alt="Photo studio"
/>
</div>
<div className="offer__image-wrapper">
<img
className="offer__image"
src="img/apartment-01.jpg"
alt="Photo studio"
/>
</div>
</div>
</div>
<OfferGallery imageSources={currentOffer.images} />
<div className="offer__container container">
<div className="offer__wrapper">
<div className="offer__mark">
<span>Premium</span>
</div>
{currentOffer.isPremium && (
<div className="offer__mark">
<span>Premium</span>
</div>
)}
<div className="offer__name-wrapper">
<h1 className="offer__name">
Beautiful &amp; luxurious studio at great location
</h1>
<h1 className="offer__name">{currentOffer.title}</h1>
<button
className="offer__bookmark-button button"
type="button"
Expand All @@ -87,58 +50,31 @@ export function OfferPage(): React.JSX.Element {
<span className="visually-hidden">To bookmarks</span>
</button>
</div>
<div className="offer__rating rating">
<div className="offer__stars rating__stars">
<span style={{ width: '80%' }}></span>
<span className="visually-hidden">Rating</span>
</div>
<span className="offer__rating-value rating__value">4.8</span>
</div>
<Rating
rating={currentOffer.rating}
usePlace="offer"
isInOffer
/>
<ul className="offer__features">
<li className="offer__feature offer__feature--entire">
Apartment
{capitalize(currentOffer.type)}
</li>
<li className="offer__feature offer__feature--bedrooms">
3 Bedrooms
{pluralizeAndCombine('bedroom', currentOffer.bedrooms)}
</li>
<li className="offer__feature offer__feature--adults">
Max 4 adults
Max {pluralizeAndCombine('adult', currentOffer.maxAdults)}
</li>
</ul>
<div className="offer__price">
<b className="offer__price-value">&euro;120</b>
<b className="offer__price-value">
&euro;{currentOffer.price}
</b>
<span className="offer__price-text">&nbsp;night</span>
</div>
<div className="offer__inside">
<h2 className="offer__inside-title">What&apos;s inside</h2>
<ul className="offer__inside-list">
<li className="offer__inside-item">Wi-Fi</li>
<li className="offer__inside-item">Washing machine</li>
<li className="offer__inside-item">Towels</li>
<li className="offer__inside-item">Heating</li>
<li className="offer__inside-item">Coffee machine</li>
<li className="offer__inside-item">Baby seat</li>
<li className="offer__inside-item">Kitchen</li>
<li className="offer__inside-item">Dishwasher</li>
<li className="offer__inside-item">Cabel TV</li>
<li className="offer__inside-item">Fridge</li>
</ul>
</div>
<OfferInsideItems items={currentOffer.goods} />
<div className="offer__host">
<h2 className="offer__host-title">Meet the host</h2>
<div className="offer__host-user user">
<div className="offer__avatar-wrapper offer__avatar-wrapper--pro user__avatar-wrapper">
<img
className="offer__avatar user__avatar"
src="img/avatar-angelina.jpg"
width="74"
height="74"
alt="Host avatar"
/>
</div>
<span className="offer__user-name">Angelina</span>
<span className="offer__user-status">Pro</span>
</div>
<OfferHost host={currentOffer.host} />
<div className="offer__description">
<p className="offer__text">
A quiet cozy and picturesque that hides behind a a river
Expand All @@ -158,18 +94,14 @@ export function OfferPage(): React.JSX.Element {
</div>
<Map
city={offers[0].city}
points={offers.map((x) => ({
points={[...offers, currentOffer].map((x) => ({
location: x.location,
id: x.id,
}))}
selectedPoint={
activeOffer
? {
location: activeOffer?.location,
id: activeOffer?.id,
}
: undefined
}
selectedPoint={{
location: currentOffer.location,
id: currentOffer.id,
}}
/>
</section>
<div className="container">
Expand All @@ -178,10 +110,7 @@ export function OfferPage(): React.JSX.Element {
Other places in the neighbourhood
</h2>
<div className="near-places__list places__list">
<OffersList
offers={offers}
onActiveOfferChange={setActiveOffer}
/>
<OffersList offers={offers} />
</div>
</section>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export function App({ offers }: AppProps): React.JSX.Element {
<Route
path={AppRoutes.Favorites}
element={
<AuthorizationWrapper isAuthorized={true}>
<AuthorizationWrapper isAuthorized={false}>
<FavoritesPage offers={offers} />
</AuthorizationWrapper>
}
Expand Down
7 changes: 4 additions & 3 deletions src/components/map/map.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,11 @@ export function Map(props: MapProps): React.JSX.Element {
<section
className={cn(
'map',
{ cities__map: isOnMainPage },
{ offer__map: !isOnMainPage },
{ 'cities__map': isOnMainPage },
{ 'offer__map': !isOnMainPage },
)}
ref={mapRef}
></section>
>
</section>
);
}
14 changes: 6 additions & 8 deletions src/components/offer/offer-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,15 @@ import { RoomType } from '../../dataTypes/enums/room-type.ts';
import { Link } from 'react-router-dom';
import { AppRoutes } from '../../dataTypes/enums/app-routes.ts';
import cn from 'classnames';
import { Rating } from '../rating.tsx';

interface PlaceCardProps {
id: string;
price: number;
type: RoomType;
image: string;
title: string;
rating: number;
onMouseEnter?: (id: string) => void;
onMouseLeave?: () => void;
isPremium?: boolean;
Expand All @@ -22,6 +24,7 @@ export function OfferCard({
type,
image,
title,
rating,
onMouseEnter,
onMouseLeave,
isPremium,
Expand All @@ -36,7 +39,7 @@ export function OfferCard({
onMouseLeave={handleMouseLeave}
className={cn(
'place-card',
{ cities__card: isOnMainPage },
{ 'cities__card': isOnMainPage },
{ 'near-places__card': !isOnMainPage },
)}
>
Expand Down Expand Up @@ -80,14 +83,9 @@ export function OfferCard({
</span>
</button>
</div>
<div className="place-card__rating rating">
<div className="place-card__stars rating__stars">
<span style={{ width: '100%' }}></span>
<span className="visually-hidden">Rating</span>
</div>
</div>
<Rating rating={rating} usePlace="place-card" />
<h2 className="place-card__name">
<Link to={`${AppRoutes.Offer}/:${id}`}>{title}</Link>
<Link to={`${AppRoutes.Offer}/${id}`}>{title}</Link>
</h2>
<p className="place-card__type">{type}</p>
</div>
Expand Down
21 changes: 21 additions & 0 deletions src/components/offer/offer-gallery.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import React from 'react';

interface OfferGalleryProps {
imageSources: string[];
}

export function OfferGallery({
imageSources,
}: OfferGalleryProps): React.JSX.Element {
return (
<div className="offer__gallery-container container">
<div className="offer__gallery">
{imageSources.map((src) => (
<div key={`${src}`} className="offer__image-wrapper">
<img className="offer__image" src={src} alt="Photo studio" />
</div>
))}
</div>
</div>
);
}
Loading

0 comments on commit b67cbc0

Please sign in to comment.