Skip to content

Commit

Permalink
на страницу Offer добавляет карту и ближайшие оферы
Browse files Browse the repository at this point in the history
  • Loading branch information
@denispan
denispan committed Mar 22, 2024
1 parent 7ae746e commit cefde87
Show file tree
Hide file tree
Showing 5 changed files with 35 additions and 106 deletions.
5 changes: 3 additions & 2 deletions src/components/map/map.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ type MapProps = {
city: typeof CITIES[number];
offers: OfferShortInfo[];
activeOffer: Nullable<OfferShortInfo>;
container: string;
};

const defaultCustomIcon = new Icon({
Expand All @@ -25,7 +26,7 @@ const currentCustomIcon = new Icon({
iconAnchor: [20, 40]
});

function Map({city, offers, activeOffer}: MapProps) {
function Map({container, city, offers, activeOffer}: MapProps) {

const mapRef = useRef(null);
const map = useMap(mapRef, city);
Expand Down Expand Up @@ -56,7 +57,7 @@ function Map({city, offers, activeOffer}: MapProps) {
}
}, [city, map, offers, activeOffer]);

return <section ref={mapRef} className="cities__map map" />;
return <section ref={mapRef} className={`${container}__map map`} />;
}

export default Map;
6 changes: 5 additions & 1 deletion src/components/offer-card/offer-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import Rating from '../rating/rating.tsx';

interface PlaceCardProps {
offer: OfferShortInfo;
componentType: 'cities' | 'favorites';
componentType: 'cities' | 'favorites' | 'near-places';
hoverHandler?: (offer?: OfferShortInfo) => void;
}

Expand All @@ -27,6 +27,10 @@ function OfferCard ({offer, componentType, hoverHandler}: PlaceCardProps) {
width: '260',
height: '200',
},
'near-places': {
width: '260',
height: '200',
},
'favorites': {
width: '150',
height: '110',
Expand Down
2 changes: 1 addition & 1 deletion src/pages/main/main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ function Main({offers, offersCount, title = 'Main'}: MainProps) {
</section>
<div className="cities__right-section">
{
currentCity && <Map city={currentCity} offers={offers} activeOffer={activeOffer} />
currentCity && <Map container="cities" city={currentCity} offers={offers} activeOffer={activeOffer} />
}
</div>
</div>
Expand Down
126 changes: 25 additions & 101 deletions src/pages/offer/offer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import Header from '../../components/header/header.tsx';
import {useDocumentTitle} from '../../hooks/document-title.ts';
import {useParams} from 'react-router-dom';
import {getOfferFullInfo} from '../../mocks/offers.ts';
import {getOfferFullInfo, getOffersShortInfo} from '../../mocks/offers.ts';
import NotFound from '../not-found/not-found.tsx';
import {getCommentsByOfferId} from '../../mocks/comments.ts';
import FavoriteButton from '../../components/favorite-button/favorite-button.tsx';
Expand All @@ -10,7 +10,12 @@ import {capitalizeFirstLetter} from '../../utils/common.ts';
import Host from '../../components/host/host.tsx';
import Review from '../../components/review/review.tsx';
import FormReview from '../../components/form-review/form-review.tsx';
import {AuthorizationStatus} from '../../const.ts';
import {AuthorizationStatus, CITIES} from '../../const.ts';
import Map from '../../components/map/map.tsx';
import OfferCard from '../../components/offer-card/offer-card.tsx';
import {useState} from 'react';
import {Nullable} from 'vitest';
import {OfferShortInfo} from '../../types/offer.ts';

interface OfferProps {
title?: string;
Expand All @@ -20,6 +25,8 @@ interface OfferProps {
function Offer({title = 'Offer', userAuth}: OfferProps) {
useDocumentTitle(title);
const {offerId} = useParams();
const [activeNearOffer, setActiveNearOffer] = useState<Nullable<OfferShortInfo>>(null);


if (!offerId) {
return <NotFound />;
Expand All @@ -44,8 +51,13 @@ function Offer({title = 'Offer', userAuth}: OfferProps) {
goods,
host,
description,
city,
id,
} = offer;

const cityFullInfo = CITIES.find((cityItem) => cityItem.name === city.name);
const nearOffers = getOffersShortInfo().filter((offerItem) => offerItem.id !== id);

return (
<div className="page">
<Header />
Expand Down Expand Up @@ -117,110 +129,22 @@ function Offer({title = 'Offer', userAuth}: OfferProps) {
</section>
</div>
</div>
<section className="offer__map map"></section>
{cityFullInfo && <Map container="offer" city={cityFullInfo} offers={nearOffers} activeOffer={activeNearOffer}/>}
</section>
<div className="container">
<section className="near-places places">
<h2 className="near-places__title">Other places in the neighbourhood</h2>
<div className="near-places__list places__list">
<article className="near-places__card place-card">
<div className="near-places__image-wrapper place-card__image-wrapper">
<a href="#">
<img className="place-card__image" src="img/room.jpg" width="260" height="200" alt="Place image"/>
</a>
</div>
<div className="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>
</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">
<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 className="visually-hidden">Rating</span>
</div>
</div>
<h2 className="place-card__name">
<a href="#">Wood and stone place</a>
</h2>
<p className="place-card__type">Room</p>
</div>
</article>

<article className="near-places__card place-card">
<div className="near-places__image-wrapper place-card__image-wrapper">
<a href="#">
<img className="place-card__image" src="img/apartment-02.jpg" width="260" height="200" alt="Place image"/>
</a>
</div>
<div className="place-card__info">
<div className="place-card__price-wrapper">
<div className="place-card__price">
<b className="place-card__price-value">&euro;132</b>
<span className="place-card__price-text">&#47;&nbsp;night</span>
</div>
<button className="place-card__bookmark-button button" type="button">
<svg className="place-card__bookmark-icon" width="18" height="19">
<use xlinkHref="#icon-bookmark"></use>
</svg>
<span className="visually-hidden">To bookmarks</span>
</button>
</div>
<div className="place-card__rating rating">
<div className="place-card__stars rating__stars">
<span style={{width: '80%',}}></span>
<span className="visually-hidden">Rating</span>
</div>
</div>
<h2 className="place-card__name">
<a href="#">Canal View Prinsengracht</a>
</h2>
<p className="place-card__type">Apartment</p>
</div>
</article>

<article className="near-places__card place-card">
<div className="place-card__mark">
<span>Premium</span>
</div>
<div className="near-places__image-wrapper place-card__image-wrapper">
<a href="#">
<img className="place-card__image" src="img/apartment-03.jpg" width="260" height="200" alt="Place image"/>
</a>
</div>
<div className="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>
</div>
<button className="place-card__bookmark-button button" type="button">
<svg className="place-card__bookmark-icon" width="18" height="19">
<use xlinkHref="#icon-bookmark"></use>
</svg>
<span className="visually-hidden">To bookmarks</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>
<h2 className="place-card__name">
<a href="#">Nice, cozy, warm big bed apartment</a>
</h2>
<p className="place-card__type">Apartment</p>
</div>
</article>
{nearOffers.map((nearOffer) =>
(
<OfferCard
key={nearOffer.id}
offer={nearOffer}
componentType="near-places"
hoverHandler={() => setActiveNearOffer(nearOffer)}
/>
)
)}
</div>
</section>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/types/offer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ interface OfferShortInfo {
title: string;
type: OfferType;
price: number;
previewImage: string;
previewImage?: string;
city: City;
location: Location;
isFavorite: boolean;
Expand Down

0 comments on commit cefde87

Please sign in to comment.