module7-task1

src/components/app/app.tsx

@@ -6,11 +6,20 @@ import NotFoundScreen from '../../pages/not-found-screen/not-found-screen.tsx';
 import OfferScreen from '../../pages/offer-screen/offer-screen.tsx';
 import PrivateRoute from '../private-route/private-route.tsx';
 import { AppRoute, AuthorizationStatus } from '../../const.ts';
-import { Offer } from '../../types/offer';
-import { OFFERS } from '../../mocks/offers.ts';
+import { useAppSelector } from '../../hooks/index.ts';
+import LoadingScreen from '../../pages/loading-screen/loading-screen.tsx';
+
 
 function App(): JSX.Element {
-  const favourites: Offer[] = OFFERS.filter((o) => o.isFavorite);
+
+  const isQuestionsDataLoading = useAppSelector((state) => state.isQuestionsDataLoading);
+
+  if (isQuestionsDataLoading) {
+    return (
+      <LoadingScreen />
+    );
+  }
+
   return (
     <BrowserRouter>
       <Routes>
@@ -20,12 +29,12 @@ function App(): JSX.Element {
           path={AppRoute.Favorites}
           element={
             <PrivateRoute authorizationStatus={AuthorizationStatus.Auth} >
-              <FavoritesScreen offers={favourites}/>
+              <FavoritesScreen />
             </PrivateRoute>
           }
         />
         <Route path={AppRoute.Login} element={<LoginScreen/>} />
-        <Route path={AppRoute.Offer} element={<OfferScreen offer={OFFERS[0]}/>} />
+        <Route path={AppRoute.Offer} element={<OfferScreen/>} />
       </Routes>
     </BrowserRouter>
   );

src/components/city-list/city-list.tsx

@@ -1,26 +1,24 @@
-import { City } from '../../types/city';
-import { useAppDispatch } from '../../hooks';
+import { City } from '../../types/location';
+import { useAppDispatch, useAppSelector } from '../../hooks';
 import { changeCity } from '../../store/action';
-import { CITIES } from '../../mocks/cities';
+import { CITIES } from '../../const';
 
-type CityListProps = {
-  chosenCity: City;
-}
 
-function CityList({chosenCity}: CityListProps): JSX.Element {
+function CityList(): JSX.Element {
+  const chosenCity = useAppSelector((state) => state.city);
   const dispatch = useAppDispatch();
   const handleCityChange = (city: City) => {
     dispatch(changeCity(city));
   };
   return(
     <ul className="locations__list tabs__list">
       {CITIES.map((city) => (
-        <li className="locations__item" key={city.title}>
+        <li className="locations__item" key={city.name}>
           <a className={`locations__item-link tabs__item ${(city === chosenCity) ? 'tabs__item--active' : ''}`} onClick={() => {
             handleCityChange(city);
           }}
           >
-            <span>{city.title}</span>
+            <span>{city.name}</span>
           </a>
         </li>
       ))}

src/components/error-message/error-message.css

@@ -0,0 +1,9 @@
+.error-message {
+    position: fixed;
+    top: 30px;
+    right: 30px;
+    padding: 10px;
+    background-color: #d96666;
+    color: white;
+    border-radius: 5px;
+  }

src/components/error-message/error-message.tsx

@@ -0,0 +1,13 @@
+import {useAppSelector} from '../../hooks';
+import './error-message.css';
+
+function ErrorMessage(): JSX.Element | null {
+  const error = useAppSelector((state) => state.error);
+
+  return (error)
+    ? <div className='error-message'>{error}</div>
+    : null;
+
+}
+
+export default ErrorMessage;

src/components/map/map.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { Icon, Marker, layerGroup } from 'leaflet';
 import useMap from '../../hooks/use-map';
-import { Point } from '../../types/point';
+import { Point } from '../../types/location';
 import 'leaflet/dist/leaflet.css';
 import { useAppSelector } from '../../hooks';
 import { URL_MARKER_CURRENT, URL_MARKER_STANDART } from '../../const';
@@ -35,8 +35,8 @@ function Map(props: MapProps): JSX.Element {
       const markerLayer = layerGroup().addTo(map);
       points.forEach((point) => {
         const marker = new Marker({
-          lat: point.lat,
-          lng: point.lng
+          lat: point.latitude,
+          lng: point.longitude
         });
         let icon;
         if (point === highlightedMarker) {
@@ -48,7 +48,7 @@ function Map(props: MapProps): JSX.Element {
           .setIcon(icon)
           .addTo(markerLayer);
       });
-      map.setView([city.lat, city.lng], 11);
+      map.setView([city.location.latitude, city.location.longitude], city.location.zoom);
       return () => {
         map.removeLayer(markerLayer);
       };

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

@@ -2,6 +2,7 @@ import { useAppDispatch } from '../../hooks';
 import { changeHighlightedMarker } from '../../store/action';
 import { Offer } from '../../types/offer';
 import { Link } from 'react-router-dom';
+import { ratingPercentage } from '../../utils';
 
 type OfferProps = {
   offer: Offer;
@@ -12,7 +13,7 @@ function OfferCard({offer, cardType}: OfferProps): JSX.Element {
   const dispatch = useAppDispatch();
   return (
     <article className={cardType}
-      onMouseEnter={() => dispatch(changeHighlightedMarker(offer.point))}
+      onMouseEnter={() => dispatch(changeHighlightedMarker(offer.location))}
       onMouseLeave={() => dispatch(changeHighlightedMarker(undefined))}
     >
       {offer.isPremium ? (
@@ -22,7 +23,7 @@ function OfferCard({offer, cardType}: OfferProps): JSX.Element {
       ) : null}
       <div className="cities__image-wrapper place-card__image-wrapper">
         <a href="#">
-          <img className="place-card__image" src={offer.image[0]} width="260" height="200" alt="Place image"/>
+          <img className="place-card__image" src={offer.previewImage} width="260" height="200" alt="Place image"/>
         </a>
       </div>
       <div className="place-card__info">
@@ -40,7 +41,7 @@ function OfferCard({offer, cardType}: OfferProps): JSX.Element {
         </div>
         <div className="place-card__rating rating">
           <div className="place-card__stars rating__stars">
-            <span style={{width: `${(offer.rating / 5) * 100}%`}}></span>
+            <span style={{width: ratingPercentage(offer.rating)}}></span>
             <span className="visually-hidden">Rating</span>
           </div>
         </div>

src/const.ts

@@ -1,3 +1,5 @@
+import { City } from "./types/location";
+
 export enum AppRoute {
   Main = '/',
   Login = '/login',
@@ -16,3 +18,60 @@ export const URL_MARKER_CURRENT =
 
 export const URL_MARKER_STANDART =
   '/img/pin.svg';
+
+export enum APIRoute {
+  Offers = '/offers',
+}
+
+export const CITIES: City[] = [
+  {
+    name: 'Paris',
+    location: {
+      latitude: 48.864716,
+      longitude: 2.349014,
+      zoom: 11,
+    },
+  },
+  {
+    name: 'Brussels',
+    location: {
+      latitude: 50.85034,
+      longitude: 4.35171,
+      zoom: 11,
+    },
+  },
+  {
+    name: 'Cologne',
+    location: {
+      latitude: 50.935173,
+      longitude: 6.953101,
+      zoom: 11,
+    },
+  },
+  {
+    name: 'Amsterdam',
+    location: {
+      latitude: 52.3740300,
+      longitude: 4.8896900,
+      zoom: 11,
+    },
+  },
+  {
+    name: 'Hamburg',
+    location: {
+      latitude: 53.551086,
+      longitude: 9.993682,
+      zoom: 11,
+    },
+  },
+  {
+    name: 'Dusseldorf',
+    location: {
+      latitude: 51.233334,
+      longitude: 6.783333,
+      zoom: 11,
+    },
+  },
+];
+
+export const TIMEOUT_SHOW_ERROR = 2000;

src/hooks/use-map.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState, MutableRefObject, useRef } from 'react';
 import { Map, TileLayer } from 'leaflet';
-import { City } from '../types/city';
+import { City } from '../types/location';
 
 function useMap(
   mapRef: MutableRefObject<HTMLElement | null>,
@@ -13,8 +13,8 @@ function useMap(
     if (mapRef.current && !isRenderedRef.current) {
       const instance = new Map(mapRef.current, {
         center: {
-          lat: city.lat,
-          lng: city.lng
+          lat: city.location.latitude,
+          lng: city.location.longitude
         },
         zoom: 10
       });

src/index.tsx

@@ -3,6 +3,10 @@ import ReactDOM from 'react-dom/client';
 import App from './components/app/app';
 import { Provider } from 'react-redux';
 import { store } from './store';
+import { fetchOffersAction } from './store/api-actions';
+import ErrorMessage from './components/error-message/error-message';
+
+store.dispatch(fetchOffersAction());
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
@@ -11,6 +15,7 @@ const root = ReactDOM.createRoot(
 root.render(
   <React.StrictMode>
     <Provider store = {store}>
+      <ErrorMessage />
       <App/>
     </Provider>
   </React.StrictMode>