Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Больше подробностей (часть 2) #6

Merged
merged 4 commits into from
Mar 22, 2024
Merged

Больше подробностей (часть 2) #6

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a047b7c
ребейз
denispan Mar 22, 2024
cc128e7
добавляет карту
denispan Mar 22, 2024
5f10f86
на страницу Offer добавляет карту и ближайшие оферы
denispan Mar 22, 2024
2d449b6
убирает Nullable
denispan Mar 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions src/components/map/map.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Что-то лишнее

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
Open in desktop
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
Loading