From 69e2fb8ff7b00b6f2952c1fda531e5f3841016b8 Mon Sep 17 00:00:00 2001 From: Denis P <34074159+denispan@users.noreply.github.com> Date: Fri, 22 Mar 2024 17:36:43 +0100 Subject: [PATCH] =?UTF-8?q?=D0=91=D0=BE=D0=BB=D1=8C=D1=88=D0=B5=20=D0=BF?= =?UTF-8?q?=D0=BE=D0=B4=D1=80=D0=BE=D0=B1=D0=BD=D0=BE=D1=81=D1=82=D0=B5?= =?UTF-8?q?=D0=B9=20(=D1=87=D0=B0=D1=81=D1=82=D1=8C=C2=A02)=20(#6)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ребейз * добавляет карту * на страницу Offer добавляет карту и ближайшие оферы * убирает Nullable --- src/components/map/map.tsx | 10 +- src/components/offer-card/offer-card.tsx | 6 +- src/pages/main/main.tsx | 5 +- src/pages/offer/offer.tsx | 125 +++++------------------ src/types/offer.ts | 2 +- 5 files changed, 37 insertions(+), 111 deletions(-) diff --git a/src/components/map/map.tsx b/src/components/map/map.tsx index 821d2bc..62e8d92 100644 --- a/src/components/map/map.tsx +++ b/src/components/map/map.tsx @@ -5,12 +5,12 @@ import {CITIES, URL_MARKER_CURRENT, URL_MARKER_DEFAULT} from '../../const'; import 'leaflet/dist/leaflet.css'; import useMap from '../../hooks/use-map.tsx'; import {OfferShortInfo} from '../../types/offer.ts'; -import {Nullable} from 'vitest'; type MapProps = { city: typeof CITIES[number]; offers: OfferShortInfo[]; - activeOffer: Nullable; + activeOffer: OfferShortInfo | null; + container: string; }; const defaultCustomIcon = new Icon({ @@ -25,7 +25,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); @@ -41,7 +41,7 @@ function Map({city, offers, activeOffer}: MapProps) { marker .setIcon( - activeOffer !== undefined && activeOffer !== null && offer.id === activeOffer.id + activeOffer !== null && offer.id === activeOffer.id ? currentCustomIcon : defaultCustomIcon ) @@ -56,7 +56,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..5f7fa40 100644 --- a/src/pages/main/main.tsx +++ b/src/pages/main/main.tsx @@ -3,7 +3,6 @@ import Header from '../../components/header/header.tsx'; import LocationTab from '../../components/location-tab/location-tab.tsx'; import {OfferShortInfo} from '../../types/offer.ts'; import {useDocumentTitle} from '../../hooks/document-title.ts'; -import {Nullable} from 'vitest'; import {CITIES} from '../../const.ts'; import {useEffect, useState} from 'react'; import Map from '../../components/map/map.tsx'; @@ -17,7 +16,7 @@ export type MainProps = { function Main({offers, offersCount, title = 'Main'}: MainProps) { useDocumentTitle(title); - const [activeOffer, setActiveOffer] = useState>(null); + const [activeOffer, setActiveOffer] = useState(null); const location = useLocation(); const [citySlug, setCitySlug] = useState(location.pathname.split('/').pop()); useEffect(() => { @@ -67,7 +66,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..da78cf2 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,11 @@ 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 {OfferShortInfo} from '../../types/offer.ts'; interface OfferProps { title?: string; @@ -20,6 +24,8 @@ interface OfferProps { function Offer({title = 'Offer', userAuth}: OfferProps) { useDocumentTitle(title); const {offerId} = useParams(); + const [activeNearOffer, setActiveNearOffer] = useState(null); + if (!offerId) { return ; @@ -44,8 +50,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 +128,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;