major changes. add a lot of conditional rendering, change components,…

… add mocks, add utils

src/components/app/app.tsx

@@ -36,7 +36,7 @@ function App({rentOffersCount, offersShort, offersDetailed, allFavorites}: AppPr
         <Route
           path={AppRoute.Favourites}
           element={
-            <PrivateRoute authorizationStatus={AuthStatus.NoAuth}>
+            <PrivateRoute authorizationStatus={AuthStatus.Auth}>
               <FavoritesPage allFavorites={allFavorites}/>
             </PrivateRoute>
           }

src/components/bookmark-button/bookmark-button.tsx

@@ -0,0 +1,34 @@
+import classNames from 'classnames';
+import {useBookmarkButton} from '../../hooks/use-bookmark-button.ts';
+import {BookmarkButtonVariants} from '../../types/variants.ts';
+
+type BookmarkButtonProps = {
+  inFavorites?: boolean;
+  variant: BookmarkButtonVariants;
+}
+
+function BookmarkButton({inFavorites, variant}: BookmarkButtonProps): JSX.Element {
+  const {
+    buttonMainClassName,
+    buttonActiveClassName,
+    svgClassName,
+    svgWidth,
+    svgHeight
+  } = useBookmarkButton({variant});
+
+  const buttonFullClassName = classNames(
+    buttonMainClassName,
+    {[`${buttonActiveClassName}`]: inFavorites}
+  );
+
+  return (
+    <button className={buttonFullClassName} type="button">
+      <svg className={svgClassName} width={svgWidth} height={svgHeight}>
+        <use xlinkHref="#icon-bookmark"></use>
+      </svg>
+      <span className="visually-hidden">To bookmarks</span>
+    </button>
+  );
+}
+
+export default BookmarkButton;

src/components/cities-tabs/cities-tabs.tsx

@@ -12,7 +12,7 @@ function CitiesTabs(): JSX.Element {
               <li className="locations__item" key={city}>
                 <Link
                   to={AppRoute.Main}
-                  className={index === 3 ? linkBaseClassName.concat(' tabs__item--active') : linkBaseClassName}
+                  className={index === 0 ? linkBaseClassName.concat(' tabs__item--active') : linkBaseClassName}
                 >
                   <span>{city}</span>
                 </Link>

src/components/favorites-list/favorites-list-element.tsx

@@ -1,5 +1,7 @@
 import {OffersShort} from '../../types/offers/offer-short.ts';
-import FavoritePlaceCard from '../favorite-place-card/favorite-place-card.tsx';
+import OfferCard from '../offer/offer-card/offer-card.tsx';
+import {Link} from 'react-router-dom';
+import {AppRoute} from '../../const.ts';
 
 type FavoritesListElementProps = {
   favoritesAtCity: OffersShort;
@@ -11,14 +13,14 @@ function FavoritesListElement({favoritesAtCity, cityName}: FavoritesListElementP
     <li className="favorites__locations-items">
       <div className="favorites__locations locations locations--current">
         <div className="locations__item">
-          <a className="locations__item-link" href="#">
+          <Link className="locations__item-link" to={AppRoute.Main}>
             <span>{cityName}</span>
-          </a>
+          </Link>
         </div>
       </div>
       <div className="favorites__places">
         {favoritesAtCity.map((offer) => (
-          <FavoritePlaceCard key={offer.id} placeShortInfo={offer}/>
+          <OfferCard key={offer.id} placeShortInfo={offer} variant={'favorites'}/>
         ))}
       </div>
     </li>

src/components/header/header.tsx

@@ -1,16 +1,17 @@
-import LogoHeaderLeft from '../logo/logo-header-left.tsx';
+import LogoHeader from '../logo/logo-header.tsx';
 import HeaderNavigation from './header-navigation.tsx';
 
 type HeaderProps = {
   disableNav?: boolean;
+  isLogoActive?: boolean;
 }
 
-function Header({disableNav}: HeaderProps): JSX.Element {
+function Header({disableNav, isLogoActive}: HeaderProps): JSX.Element {
   return (
     <header className="header">
       <div className="container">
         <div className="header__wrapper">
-          <LogoHeaderLeft/>
+          <LogoHeader isActive={isLogoActive}/>
           {disableNav ? ' ' : <HeaderNavigation/>}
         </div>
       </div>

src/components/logo/logo-header.tsx

@@ -0,0 +1,20 @@
+import {Link} from 'react-router-dom';
+import {AppRoute} from '../../const.ts';
+import classNames from 'classnames';
+
+type LogoHeaderProps = {
+  isActive?: boolean;
+}
+
+function LogoHeader({isActive} : LogoHeaderProps) : JSX.Element {
+  const className = classNames('header__logo-link' , {'header__logo-link--active' : isActive});
+  return (
+    <div className="header__left">
+      <Link to={AppRoute.Main} className={className}>
+        <img className="header__logo" src="/img/logo.svg" alt="6 cities logo" width="81" height="41"/>
+      </Link>
+    </div>
+  );
+}
+
+export default LogoHeader;

src/components/main-offers-list/main-offers-list.tsx

@@ -1,5 +1,5 @@
 import {OffersShort} from '../../types/offers/offer-short.ts';
-import PlaceCard from '../place-card/place-card.tsx';
+import OfferCard from '../offer/offer-card/offer-card.tsx';
 
 type OffersListProps = {
   offers: OffersShort;
@@ -9,7 +9,7 @@ function MainOffersList({ offers } : OffersListProps) : JSX.Element {
   return (
     <div className="cities__places-list places__list tabs__content">
       {offers.map((offer) => (
-        <PlaceCard key={offer.id} placesShortInfo={offer}/>
+        <OfferCard key={offer.id} placeShortInfo={offer} variant={'main'}/>
       ))}
     </div>
   );

src/components/map/map.tsx

@@ -0,0 +1,31 @@
+import {City} from '../../types/city.ts';
+import {useEffect, useRef} from 'react';
+import useMap from '../../hooks/use-map.ts';
+import {Locations} from '../../types/location.ts';
+import leaflet from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+
+type MapProps = {
+  city: City;
+  points: Locations;
+};
+
+function Map({city, points} : MapProps) : JSX.Element {
+  const mapRef = useRef(null);
+  const map = useMap({mapRef, center:city.location});
+
+  useEffect(() => {
+    if (map) {
+      points.forEach((point) => {
+        leaflet
+          .marker({
+            lat: point.latitude,
+            lng: point.longitude,
+          }).addTo(map);
+      });
+    }
+  }, [map, points]);
+  return <section className="cities__map map" ref={mapRef}></section>;
+}
+
+export default Map;

src/components/place-card/place-card-price.tsx → src/components/offer/offer-card/offer-card-price.tsx

@@ -3,7 +3,7 @@ type PlaceCardPriceProps = {
   currencySymbol?: string;
 }
 
-function PlaceCardPrice({ price, currencySymbol = '€' } : PlaceCardPriceProps) : JSX.Element {
+function OfferCardPrice({ price, currencySymbol = '€' } : PlaceCardPriceProps) : JSX.Element {
   return (
     <div className="place-card__price">
       <b className="place-card__price-value">{`${currencySymbol}${price}`}</b>
@@ -12,4 +12,4 @@ function PlaceCardPrice({ price, currencySymbol = '€' } : PlaceCardPriceProps)
   );
 }
 
-export default PlaceCardPrice;
+export default OfferCardPrice;

src/components/place-card/place-card-title.tsx → src/components/offer/offer-card/offer-card-title.tsx

@@ -1,14 +1,15 @@
 import {Link} from 'react-router-dom';
-import {AppRoute} from '../../const.ts';
+import {AppRoute} from '../../../const.ts';
+import {capitalizeFirstLetter} from '../../../utils.ts';
 
 type PlaceCardTitleProps = {
   type: string;
   name: string;
   id: string;
 }
 
-function PlaceCardTitle({ type, name, id } : PlaceCardTitleProps) : JSX.Element {
-  const capitalizeFirstLetter = (word: string) : string => word.charAt(0).toUpperCase() + word.slice(1);
+function OfferCardTitle({ type, name, id } : PlaceCardTitleProps) : JSX.Element {
+
 
   return (
     <>
@@ -20,4 +21,4 @@ function PlaceCardTitle({ type, name, id } : PlaceCardTitleProps) : JSX.Element
   );
 }
 
-export default PlaceCardTitle;
+export default OfferCardTitle;

src/components/offer/offer-card/offer-card.tsx

@@ -0,0 +1,63 @@
+import {OfferShort} from '../../../types/offers/offer-short.ts';
+import PremiumSign from '../../premium-sign/premium-sign.tsx';
+import BookmarkButton from '../../bookmark-button/bookmark-button.tsx';
+import {Link} from 'react-router-dom';
+import {AppRoute} from '../../../const.ts';
+import Rating from '../../rating/rating.tsx';
+import OfferCardPrice from './offer-card-price.tsx';
+import OfferCardTitle from './offer-card-title.tsx';
+import {useOfferCard} from '../../../hooks/use-offer-card.ts';
+import {OfferCardVariants} from '../../../types/variants.ts';
+
+type PlaceCardProps = {
+  placeShortInfo: OfferShort;
+  variant: OfferCardVariants;
+}
+
+function OfferCard({placeShortInfo, variant}: PlaceCardProps): JSX.Element {
+  const {
+    id,
+    title,
+    type,
+    price,
+    isFavorite,
+    isPremium,
+    rating,
+    previewImage
+  } = placeShortInfo;
+
+  const {
+    placeCardClassName,
+    cardInfoClassName,
+    imageWrapperClassName,
+    imageWidth,
+    imageHeight
+  } = useOfferCard({variant});
+
+  return (
+    <article className={placeCardClassName}>
+      <PremiumSign show={isPremium} variant={'card'}/>
+      <div className={imageWrapperClassName}>
+        <Link to={`${AppRoute.Offer}/${id}`}>
+          <img
+            className="place-card__image"
+            src={previewImage}
+            width={imageWidth}
+            height={imageHeight}
+            alt="Place image"
+          />
+        </Link>
+      </div>
+      <div className={cardInfoClassName}>
+        <div className="place-card__price-wrapper">
+          <OfferCardPrice price={price}/>
+          <BookmarkButton inFavorites={isFavorite} variant={'card'}/>
+        </div>
+        <Rating value={rating} variant={'card'}/>
+        <OfferCardTitle type={type} name={title} id={id}/>
+      </div>
+    </article>
+  );
+}
+
+export default OfferCard;

src/components/offer/offer-gallery.tsx

@@ -0,0 +1,19 @@
+type OfferGalleryProps = {
+  images: string[];
+}
+
+function OfferGallery({ images } : OfferGalleryProps) {
+  return (
+    <div className="offer__gallery-container container">
+      <div className="offer__gallery">
+        {images.map((imageLink) => (
+          <div key={imageLink} className="offer__image-wrapper">
+            <img className="offer__image" src={imageLink} alt="Photo studio"/>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default OfferGallery;