Added nearby places to map on OfferScreen; Refactoring

src/components/favorites-list/favorites-list.tsx → src/components/favorites-list/favorite-place-card-list.tsx

@@ -1,11 +1,11 @@
 import {Offer} from '../../types/offer.ts';
-import {PlaceCardFavorite} from '../place-card/place-card-favorite.tsx';
+import {FavoritePlaceCard} from './favorite-place-card.tsx';
 
 type FavoritesListProps = {
   offers: Offer[];
 }
 
-export function FavoritesList({offers}: FavoritesListProps) {
+export function FavoritePlaceCardList({offers}: FavoritesListProps) {
   const cities = Array.from(new Set(offers.map((offer) => offer.city.name))).toSorted();
 
   return (
@@ -28,7 +28,7 @@ export function FavoritesList({offers}: FavoritesListProps) {
                   offers
                     .filter((offer) => offer.city.name === city)
                     .map((offer) => (
-                      <PlaceCardFavorite
+                      <FavoritePlaceCard
                         key={offer.id}
                         {...offer}
                         imageSrc={offer.previewImage}

src/components/place-card/place-card-favorite.tsx → src/components/favorites-list/favorite-place-card.tsx

@@ -10,7 +10,7 @@ type PlaceCardFavoriteProps = {
   isPremium: boolean;
 }
 
-export function PlaceCardFavorite({id, title, type, imageSrc, price, isPremium}: PlaceCardFavoriteProps) {
+export function FavoritePlaceCard({id, title, type, imageSrc, price, isPremium}: PlaceCardFavoriteProps) {
   const offerUrl = AppRoute.Offer.replace(':id', id);
 
   return (
@@ -21,14 +21,14 @@ export function PlaceCardFavorite({id, title, type, imageSrc, price, isPremium}:
         </div>}
 
       <div className="favorites__image-wrapper place-card__image-wrapper">
-        <a href="#">
+        <Link to={offerUrl}>
           <img
             className="place-card__image"
             src={imageSrc}
             width="150" height="110"
             alt="Place image"
           />
-        </a>
+        </Link>
       </div>
 
       <div className="favorites__card-info place-card__info">

src/components/header/header.tsx

@@ -0,0 +1,45 @@
+import {Link} from 'react-router-dom';
+import {AppRoute} from '../../consts.ts';
+
+export function Header() {
+  return (
+    <header className="header">
+      <div className="container">
+        <div className="header__wrapper">
+          <div className="header__left">
+            <Link to={AppRoute.Main} className="header__logo-link">
+              <img
+                className="header__logo"
+                src="img/logo.svg"
+                alt="6 cities logo"
+                width={81}
+                height={41}
+              />
+            </Link>
+          </div>
+          <nav className="header__nav">
+            <ul className="header__nav-list">
+              <li className="header__nav-item user">
+                <a
+                  className="header__nav-link header__nav-link--profile"
+                  href="#"
+                >
+                  <div className="header__avatar-wrapper user__avatar-wrapper"></div>
+                  <span className="header__user-name user__name">
+                  [email protected]
+                  </span>
+                  <span className="header__favorite-count">3</span>
+                </a>
+              </li>
+              <li className="header__nav-item">
+                <a className="header__nav-link" href="#">
+                  <span className="header__signout">Sign out</span>
+                </a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+      </div>
+    </header>
+  );
+}

src/components/place-card/place-card-list.tsx

@@ -0,0 +1,69 @@
+import {Offer} from '../../types/offer.ts';
+import {PlaceCard} from './place-card.tsx';
+import {Nullable} from 'vitest';
+import {PlaceCardType} from '../../consts.ts';
+
+type GeneralPlaceCardListCommonProps = {
+  offers: Offer[];
+  onActiveItemChange?: (id: Nullable<string>) => void;
+  imageWidth: number;
+  imageHeight: number;
+  className: string;
+  placeCardType: PlaceCardType;
+};
+
+function GeneralPlaceCardList({
+  offers,
+  onActiveItemChange,
+  imageWidth,
+  imageHeight,
+  className,
+  placeCardType,
+}: GeneralPlaceCardListCommonProps) {
+  return (
+    <div className={className}>
+      {
+        offers.map((offer) => (
+          <PlaceCard
+            key={offer.id}
+            {...offer}
+            imageSrc={offer.previewImage}
+            width={imageWidth}
+            height={imageHeight}
+            placeCardType={placeCardType}
+            onActiveItemChange={onActiveItemChange}
+          />
+        ))
+      }
+    </div>
+  );
+}
+
+type PlaceCardListProps = {
+  offers: Offer[];
+  onActiveItemChange?: (id: Nullable<string>) => void;
+}
+
+export function CityPlaceCardList(props: PlaceCardListProps) {
+  return (
+    <GeneralPlaceCardList
+      {...props}
+      imageWidth={260}
+      imageHeight={200}
+      className="cities__places-list places__list tabs__content"
+      placeCardType={PlaceCardType.City}
+    />
+  );
+}
+
+export function NearPlaceCardList(props: PlaceCardListProps) {
+  return (
+    <GeneralPlaceCardList
+      {...props}
+      imageWidth={260}
+      imageHeight={200}
+      className="near-places__list places__list"
+      placeCardType={PlaceCardType.Near}
+    />
+  );
+}

src/components/place-card/place-card.tsx

@@ -1,5 +1,6 @@
 import {Link} from 'react-router-dom';
-import {AppRoute} from '../../consts.ts';
+import {AppRoute, PlaceCardType} from '../../consts.ts';
+import {Nullable} from 'vitest';
 
 type PlaceCardProps = {
   id: string;
@@ -8,30 +9,51 @@ type PlaceCardProps = {
   imageSrc: string;
   price: number;
   isPremium: boolean;
-  onMouseEnter: (id: string) => void;
-  onMouseLeave: (id: string) => void;
+  width: number;
+  height: number;
+  onActiveItemChange?: (id: Nullable<string>) => void;
+  placeCardType: PlaceCardType;
 }
 
-export function PlaceCard({id, title, type, imageSrc, price, isPremium, onMouseEnter, onMouseLeave}: PlaceCardProps) {
+export function PlaceCard({
+  id,
+  title,
+  type,
+  imageSrc,
+  price,
+  isPremium,
+  width,
+  height,
+  onActiveItemChange,
+  placeCardType,
+}: PlaceCardProps) {
   const offerUrl = AppRoute.Offer.replace(':id', id);
 
+  let classNamePrefix: string = '';
+
+  if (placeCardType === PlaceCardType.City) {
+    classNamePrefix = 'cities';
+  } else if (placeCardType === PlaceCardType.Near) {
+    classNamePrefix = 'near-places';
+  }
+
   return (
     <article
-      className="cities__card place-card"
-      onMouseEnter={() => onMouseEnter(id)}
-      onMouseLeave={() => onMouseLeave(id)}
+      className={`${classNamePrefix}__card place-card`}
+      onMouseEnter={() => onActiveItemChange?.(id)}
+      onMouseLeave={() => onActiveItemChange?.(null)}
     >
       {isPremium &&
         <div className="place-card__mark">
           <span>Premium</span>
         </div>}
 
       <Link to={offerUrl}>
-        <div className="cities__image-wrapper place-card__image-wrapper">
+        <div className={`${classNamePrefix}__image-wrapper place-card__image-wrapper`}>
           <a href="#">
             <img
               className="place-card__image"
-              src={imageSrc} width="260" height="200"
+              src={imageSrc} width={width} height={height}
               alt="Place image"
             />
           </a>

src/consts.ts

@@ -10,3 +10,8 @@ export enum AuthorizationStatus {
   NoAuth = 'NO_AUTH',
   Unknown = 'UNKNOWN'
 }
+
+export enum PlaceCardType{
+  City,
+  Near
+}

src/pages/favorites-screen/favorites-screen.tsx

@@ -1,5 +1,6 @@
 import {Offer} from '../../types/offer.ts';
-import {FavoritesList} from '../../components/favorites-list/favorites-list.tsx';
+import {FavoritePlaceCardList} from '../../components/favorites-list/favorite-place-card-list.tsx';
+import {Header} from '../../components/header/header.tsx';
 
 type FavoritesScreenProps = {
   offers: Offer[];
@@ -8,40 +9,14 @@ type FavoritesScreenProps = {
 export function FavoritesScreen({offers}: FavoritesScreenProps) {
   return (
     <div className="page">
-      <header className="header">
-        <div className="container">
-          <div className="header__wrapper">
-            <div className="header__left">
-              <a className="header__logo-link" href="main.html">
-                <img className="header__logo" src="img/logo.svg" alt="6 cities logo" width="81" height="41"/>
-              </a>
-            </div>
-            <nav className="header__nav">
-              <ul className="header__nav-list">
-                <li className="header__nav-item user">
-                  <a className="header__nav-link header__nav-link--profile" href="#">
-                    <div className="header__avatar-wrapper user__avatar-wrapper">
-                    </div>
-                    <span className="header__user-name user__name">[email protected]</span>
-                    <span className="header__favorite-count">3</span>
-                  </a>
-                </li>
-                <li className="header__nav-item">
-                  <a className="header__nav-link" href="#">
-                    <span className="header__signout">Sign out</span>
-                  </a>
-                </li>
-              </ul>
-            </nav>
-          </div>
-        </div>
-      </header>
+      <Header/>
 
       <main className="page__main page__main--favorites">
         <div className="page__favorites-container container">
           <section className="favorites">
             <h1 className="favorites__title">Saved listing</h1>
-            <FavoritesList
+
+            <FavoritePlaceCardList
               offers={offers}
             />
           </section>

src/pages/main-screen/main-screen.tsx

@@ -1,8 +1,9 @@
 import {Offer} from '../../types/offer.ts';
-import {OffersList} from '../../components/offers-list/offers-list.tsx';
 import {Map} from '../../components/map/map.tsx';
 import {useState} from 'react';
 import {Nullable} from 'vitest';
+import {Header} from '../../components/header/header.tsx';
+import {CityPlaceCardList} from '../../components/place-card/place-card-list.tsx';
 
 type MainScreenProps = {
   offers: Offer[];
@@ -18,34 +19,8 @@ export function MainScreen({offers}: MainScreenProps) {
 
   return (
     <div className="page page--gray page--main">
-      <header className="header">
-        <div className="container">
-          <div className="header__wrapper">
-            <div className="header__left">
-              <a className="header__logo-link header__logo-link--active">
-                <img className="header__logo" src="img/logo.svg" alt="6 cities logo" width="81" height="41"/>
-              </a>
-            </div>
-            <nav className="header__nav">
-              <ul className="header__nav-list">
-                <li className="header__nav-item user">
-                  <a className="header__nav-link header__nav-link--profile" href="#">
-                    <div className="header__avatar-wrapper user__avatar-wrapper">
-                    </div>
-                    <span className="header__user-name user__name">[email protected]</span>
-                    <span className="header__favorite-count">3</span>
-                  </a>
-                </li>
-                <li className="header__nav-item">
-                  <a className="header__nav-link" href="#">
-                    <span className="header__signout">Sign out</span>
-                  </a>
-                </li>
-              </ul>
-            </nav>
-          </div>
-        </div>
-      </header>
+      <Header/>
+
       <main className="page__main page__main--index">
         <h1 className="visually-hidden">Cities</h1>
         <div className="tabs">
@@ -104,9 +79,9 @@ export function MainScreen({offers}: MainScreenProps) {
                   <li className="places__option" tabIndex={0}>Top rated first</li>
                 </ul>
               </form>
-              <OffersList
+              <CityPlaceCardList
                 offers={offers}
-                onActiveOfferChange={handleActiveOfferChange}
+                onActiveItemChange={handleActiveOfferChange}
               />
             </section>