diff --git a/src/components/map/map.tsx b/src/components/map/map.tsx index 821d2bc..4811399 100644 --- a/src/components/map/map.tsx +++ b/src/components/map/map.tsx @@ -11,6 +11,7 @@ type MapProps = { city: typeof CITIES[number]; offers: OfferShortInfo[]; activeOffer: Nullable; + container: string; }; const defaultCustomIcon = new Icon({ @@ -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); @@ -56,7 +57,7 @@ function Map({city, offers, activeOffer}: MapProps) { } }, [city, map, offers, activeOffer]); - return
; + return
; } export default Map; diff --git a/src/components/offer-card/offer-card.tsx b/src/components/offer-card/offer-card.tsx index aa150a4..dbddd44 100644 --- a/src/components/offer-card/offer-card.tsx +++ b/src/components/offer-card/offer-card.tsx @@ -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; } @@ -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', diff --git a/src/pages/main/main.tsx b/src/pages/main/main.tsx index 6a35354..a723ffd 100644 --- a/src/pages/main/main.tsx +++ b/src/pages/main/main.tsx @@ -67,7 +67,7 @@ function Main({offers, offersCount, title = 'Main'}: MainProps) {
{ - currentCity && + currentCity && }
diff --git a/src/pages/offer/offer.tsx b/src/pages/offer/offer.tsx index 941bc62..31da4f0 100644 --- a/src/pages/offer/offer.tsx +++ b/src/pages/offer/offer.tsx @@ -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'; @@ -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; @@ -20,6 +25,8 @@ interface OfferProps { function Offer({title = 'Offer', userAuth}: OfferProps) { useDocumentTitle(title); const {offerId} = useParams(); + const [activeNearOffer, setActiveNearOffer] = useState>(null); + if (!offerId) { return ; @@ -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 (
@@ -117,110 +129,22 @@ function Offer({title = 'Offer', userAuth}: OfferProps) {
-
+ {cityFullInfo && }

Other places in the neighbourhood

- - - - - + {nearOffers.map((nearOffer) => + ( + setActiveNearOffer(nearOffer)} + /> + ) + )}
diff --git a/src/types/offer.ts b/src/types/offer.ts index a98c6ca..f88f0dd 100644 --- a/src/types/offer.ts +++ b/src/types/offer.ts @@ -8,7 +8,7 @@ interface OfferShortInfo { title: string; type: OfferType; price: number; - previewImage: string; + previewImage?: string; city: City; location: Location; isFavorite: boolean;