Истина где-то на сервере

src/components/app.tsx

@@ -6,8 +6,17 @@ import { Route, Routes } from 'react-router-dom';
 import { AppRoute, authorizationStatus } from '../const';
 import NotFoundPage from '../pages/not-found-page/not-found-page';
 import ProtectedRoute from './protected-route';
+import { useAppSelector } from '../hooks';
+import Loader from './loader/loader';
 
 export default function App() {
+
+  const isOffersDataLoading = useAppSelector((state) => state.isOfferDataLoadingStatus);
+
+  if (isOffersDataLoading) {
+    return <Loader />;
+  }
+
   return (
     <Routes>
       <Route path='/'>

src/components/card.tsx

@@ -2,6 +2,11 @@
 import { OfferPreviews } from '../types/offer-preview';
 import Rating from './rating';
 import { AppRoute } from '../const';
+import { fetchCommentsAction, fetchOfferAction } from '../store/api-action';
+import { chooseId } from '../store/action';
+import { useAppDispatch } from '../hooks';
+import { store } from '../store';
+
 type TCardProps = {
   offer: OfferPreviews;
   optionCard: {
@@ -14,13 +19,20 @@
 
 export default function Card({ offer, optionCard, handelPointCardMouseOver }: TCardProps) {
   const { width, height, classCard } = optionCard;
+  const dispatch = useAppDispatch();
+
+  const onTransmissionDataClick = () => {
+    dispatch(chooseId(offer.id));
+    store.dispatch(fetchCommentsAction());
+    store.dispatch(fetchOfferAction());
+  };
 
   const onPointCardMouseOver = () => {
     handelPointCardMouseOver(offer);
   };
 
   const onPointCardMouseLeave = () => {
     handelPointCardMouseOver(null);
   };
 
   return (
@@ -31,7 +43,7 @@
         </div>}
 
       <div className="cities__image-wrapper place-card__image-wrapper">
-        <Link to={`/${AppRoute.Offer}/${offer.id}`}>
+        <Link to={`/${AppRoute.Offer}/${offer.id}`} onClick={onTransmissionDataClick}>
           <img className="place-card__image" src={`${offer.previewImage}`} width={width} height={height} alt="Place image" />
         </Link>
       </div>
@@ -50,7 +62,7 @@
         </div>
         <Rating ratingClass="place-card" rating={offer.rating} />
         <h2 className="place-card__name" >
-          <Link to={`/${AppRoute.Offer}/${offer.id}`} state={offer} >{offer.title}</Link>
+          <Link to={`/${AppRoute.Offer}/${offer.id}`} state={offer} onClick={onTransmissionDataClick}>{offer.title}</Link>
         </h2>
         <p className="place-card__type" >{offer.type}</p>
       </div>

src/components/list-cards.tsx

@@ -1,10 +1,9 @@
 import { OptionCard } from '../const';
-import { Offer } from '../types/offer';
 import Card from './card';
 import { OfferPreviews } from '../types/offer-preview';
 
 type ListOfferNearbyProps = {
-  offers: Offer[];
+  offers: OfferPreviews[];
   onListItemHover: (currentCard: OfferPreviews | null) => void;
   extraClass: string;
 }

src/components/list-location.tsx

@@ -1,16 +1,18 @@
 import Location from './location';
 import { SyntheticEvent } from 'react';
+import { listLocation } from '../types/list-location';
 
 type ListLocation = {
-  listLocations: string[];
+  listLocations: listLocation;
   handleCurrentCityClick: (evt: SyntheticEvent<HTMLSpanElement>) => void;
   currentCity: string;
 }
 
 export default function ListLocation({ listLocations, handleCurrentCityClick, currentCity }: ListLocation) {
+  const listValuesLocations = Object.values(listLocations);
   return (
     <ul className="locations__list tabs__list">
-      {listLocations.map((location) => <Location key={location} city={location} isActive={currentCity === location} handleCurrentCityClick={handleCurrentCityClick} />)}
+      {listValuesLocations.map((location) => <Location key={location} city={location} isActive={currentCity === location} handleCurrentCityClick={handleCurrentCityClick} />)}
     </ul>
   );
 }

src/components/loader/loader-style.css

@@ -0,0 +1,31 @@
+.loader {
+  position: relative;
+  width: 64px;
+  height: 64px;
+  background-color: rgba(0, 0, 0, 0.5);
+  transform: rotate(45deg);
+  overflow: hidden;
+}
+.loader:after{
+  content: '';
+  position: absolute;
+  inset: 8px;
+  margin: auto;
+  background: #222b32;
+}
+.loader:before{
+  content: '';
+  position: absolute;
+  inset: -15px;
+  margin: auto;
+  background: #de3500;
+  animation: diamondLoader 2s linear infinite;
+}
+@keyframes diamondLoader {
+  0%  ,10% {
+    transform: translate(-64px , -64px) rotate(-45deg)
+  }
+  90% , 100% {
+    transform: translate(0px , 0px) rotate(-45deg)
+  }
+}

src/components/loader/loader.tsx

@@ -0,0 +1,5 @@
+import './loader-style.css';
+
+export default function Loader() {
+  return <span className="loader" />;
+}

src/components/map.tsx

@@ -1,6 +1,5 @@
 import leaflet from 'leaflet';
 import 'leaflet/dist/leaflet.css';
-import { Offer } from '../types/offer';
 import { useEffect, useRef } from 'react';
 import { URL_MARKER_DEFAULT, URL_MARKER_CURRENT } from '../const';
 import { City } from '../types/city';
@@ -10,7 +9,7 @@ import { MapSize } from '../const';
 
 type MapProps = {
   city: City;
-  offers: Offer[];
+  offers: OfferPreviews[];
   selectedOffer: OfferPreviews | null;
 };
 
@@ -40,7 +39,7 @@ export default function Map(props: MapProps): JSX.Element {
           lat: offer.location.latitude,
           lng: offer.location.longitude
         }, {
-          icon: (selectedOffer !== null && offer.title === selectedOffer.title)
+          icon: (selectedOffer !== null && offer.id === selectedOffer.id)
             ? currentCustomIcon
             : defaultCustomIcon,
         })

src/components/places-options.tsx

@@ -1,15 +1,16 @@
 import PlacesOption from './places-option';
-import { placesOption } from '../const';
+import { ListSort } from '../const';
 
 type PlacesOptionsProps = {
   isOpen: boolean;
   handelSortOfferClick: (sortType: string) => void;
 }
 
 export default function PlacesOptions({ isOpen, handelSortOfferClick }: PlacesOptionsProps) {
+  const listValuesSort = Object.values(ListSort);
   return (
     <ul className={`places__options places__options--custom ${isOpen && 'places__options--opened'}`}>
-      {placesOption.map((place) => <PlacesOption key={place} place={place} handelSortOfferClick={handelSortOfferClick} />)}
+      {listValuesSort.map((place) => <PlacesOption key={place} place={place} handelSortOfferClick={handelSortOfferClick} />)}
     </ul>
   );
 }

src/const.ts

@@ -34,7 +34,28 @@ const OptionListCard = {
   CITIES_CARD: 'cities__places-list places__list tabs__content',
 };
 
-const placesOption = ['Popular', 'Price: low to high', 'Price: high to low', 'Top rated first',];
+const ListSort = {
+  SORT_POPULAR: 'Popular',
+  SORT_PRICE_HIGH: 'Price: low to high',
+  SORT_PRICE_LOW: 'Price: high to low',
+  SORT_RATED: 'Top rated first',
+};
+
+const ListLocation = {
+  PARIS: 'Paris',
+  COLOGNE: 'Cologne',
+  BRUSSELS: 'Brussels',
+  AMSTERDAM: 'Amsterdam',
+  HAMBURG: 'Hamburg',
+  DUSSELDORF: 'Dusseldorf',
+};
+
+const APIRoute = {
+  OFFERS: '/offers',
+  FAVORITE: '/favorite',
+  COMMENTS: '/comments',
+  USER: '/login',
+};
 
 const URL_MARKER_DEFAULT = '../markup/img/pin.svg';
 
@@ -43,4 +64,4 @@ const URL_MARKER_CURRENT = '../markup/img/pin-active.svg';
 
 const CountStar: number = 5;
 
-export { CountStar, AppRoute, AuthorizationStatus as authorizationStatus, OptionCard, URL_MARKER_DEFAULT, URL_MARKER_CURRENT, OptionListCard, MapSize, placesOption };
+export { CountStar, AppRoute, AuthorizationStatus as authorizationStatus, OptionCard, URL_MARKER_DEFAULT, URL_MARKER_CURRENT, OptionListCard, MapSize, ListSort, ListLocation as LocationCity, APIRoute };

src/hooks/sort.ts

@@ -0,0 +1,25 @@
+import { OfferPreviews } from '../types/offer-preview';
+import { ListSort } from '../const';
+import { sortPriceLow, sortPriceHigh, sortRating } from '../utils/utils';
+import { LocationCity } from '../const';
+
+export function sortingOffers(action: string, state: OfferPreviews[], offers: OfferPreviews[]): OfferPreviews[] {
+  let sortOffers: OfferPreviews[] = [];
+  switch (action) {
+    case ListSort.SORT_POPULAR:
+      sortOffers = [...offers].filter((offer) => offer.city.name === LocationCity.PARIS);
+      break;
+    case ListSort.SORT_PRICE_HIGH:
+      sortOffers = state.sort(sortPriceHigh);
+      break;
+    case ListSort.SORT_PRICE_LOW:
+      sortOffers = state.sort(sortPriceLow);
+      break;
+    case ListSort.SORT_RATED:
+      sortOffers = state.sort(sortRating);
+      break;
+  }
+
+  return sortOffers;
+}
+

src/index.tsx

@@ -3,9 +3,11 @@ import ReactDOM from 'react-dom/client';
 import App from './components/app';
 import { BrowserRouter } from 'react-router-dom';
 import { HelmetProvider } from 'react-helmet-async';
-import { offers } from './mocks/offers';
 import { Provider } from 'react-redux';
 import { store } from './store';
+import { fetchOffersAction } from './store/api-action';
+
+store.dispatch(fetchOffersAction());
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
@@ -16,7 +18,7 @@ root.render(
     <Provider store={store}>
       <HelmetProvider>
         <BrowserRouter>
-          <App offers={offers} />
+          <App />
         </BrowserRouter>
       </HelmetProvider>
     </Provider>

src/pages/main-page.tsx

@@ -6,15 +6,13 @@ import { SyntheticEvent, useState } from 'react';
 import MainEmpty from '../components/main-empty';
 import { OptionListCard } from '../const';
 import { OfferPreviews } from '../types/offer-preview';
-import { locations } from '../mocks/locations';
+import { LocationCity } from '../const';
 import ListLocation from '../components/list-location';
 import { useAppDispatch, useAppSelector } from '../hooks';
 import { selectCity, sortOffer } from '../store/action';
-import { offers } from '../mocks/offers';
 import PlacesOptions from '../components/places-options';
 
 export default function MainPage() {
-  const baseOffers = offers;
   const selectOffers = useAppSelector((state) => state.offers);
   const currentCity = useAppSelector((state) => state.city);
   const dispatch = useAppDispatch();
@@ -54,7 +52,7 @@ export default function MainPage() {
   const handleCurrentCityClick = (evt: SyntheticEvent<HTMLSpanElement>) => {
     evt.preventDefault();
 
-    const currentOffer = baseOffers.find((offer) => offer.city.name === evt.currentTarget.textContent);
+    const currentOffer = selectOffers.find((offer) => offer.city.name === evt.currentTarget.textContent);
 
 
     if (currentOffer !== undefined) {
@@ -74,7 +72,7 @@ export default function MainPage() {
       <h1 className="visually-hidden">Cities</h1>
       <div className="tabs">
         <section className="locations container">
-          <ListLocation listLocations={locations} handleCurrentCityClick={handleCurrentCityClick} currentCity={selectedLocation} />
+          <ListLocation listLocations={LocationCity} handleCurrentCityClick={handleCurrentCityClick} currentCity={selectedLocation} />
         </section>
       </div>
       <div className="cities">