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

* ребейз * добавляет карту * на страницу Offer добавляет карту и ближайшие оферы * убирает Nullable
htmlacademy-react · Mar 22, 2024 · 69e2fb8 · 69e2fb8
1 parent 7d2d92f
commit 69e2fb8
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 111 deletions.
diff --git 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<OfferShortInfo>;
+  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 <section ref={mapRef} className="cities__map map" />;
+  return <section ref={mapRef} className={`${container}__map map`} />;
 }
 
 export default Map;
diff --git 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
@@ -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<Nullable<OfferShortInfo>>(null);
+  const [activeOffer, setActiveOffer] = useState<OfferShortInfo | null>(null);
   const location = useLocation();
   const [citySlug, setCitySlug] = useState(location.pathname.split('/').pop());
   useEffect(() => {
@@ -67,7 +66,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>

diff --git 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<OfferShortInfo | null>(null);
+
 
   if (!offerId) {
     return <NotFound />;
@@ -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 (
     <div className="page">
       <Header />
@@ -117,110 +128,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>

diff --git 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;