htmlacademy-univer-javascript-3 · AlSudar · Nov 12, 2024 · Nov 11, 2024
diff --git a/src/Pages/main-page.tsx b/src/Pages/main-page.tsx
@@ -5,61 +5,31 @@ import { Layout } from '../components/layout.tsx';
 import { Helmet } from 'react-helmet-async';
 import { Nullable } from 'vitest';
 import { Map } from '../components/map/map.tsx';
+import { useAppSelector } from '../store/store.ts';
+import { CitiesList } from '../components/cities-list.tsx';
+import { pluralizeAndCombine } from '../utils/string-utils.ts';
 
-interface MainPageProps {
-  offers: Offer[];
-}
-
-export function MainPage({ offers }: MainPageProps): React.JSX.Element {
+export function MainPage(): React.JSX.Element {
   const [activeOffer, setActiveOffer] = useState<Nullable<Offer>>(null);
+  const city = useAppSelector((state) => state.city);
+  const offers = useAppSelector((state) => state.offers).filter(
+    (offer) => offer.city.name === city.name,
+  );
+
   return (
     <div className="page page--gray page--main">
       <Layout showFooter>
         <main className="page__main page__main--index">
           <Helmet>6 cities</Helmet>
           <h1 className="visually-hidden">Cities</h1>
-          <div className="tabs">
-            <section className="locations container">
-              <ul className="locations__list tabs__list">
-                <li className="locations__item">
-                  <a className="locations__item-link tabs__item" href="#">
-                    <span>Paris</span>
-                  </a>
-                </li>
-                <li className="locations__item">
-                  <a className="locations__item-link tabs__item" href="#">
-                    <span>Cologne</span>
-                  </a>
-                </li>
-                <li className="locations__item">
-                  <a className="locations__item-link tabs__item" href="#">
-                    <span>Brussels</span>
-                  </a>
-                </li>
-                <li className="locations__item">
-                  <a className="locations__item-link tabs__item tabs__item--active">
-                    <span>Amsterdam</span>
-                  </a>
-                </li>
-                <li className="locations__item">
-                  <a className="locations__item-link tabs__item" href="#">
-                    <span>Hamburg</span>
-                  </a>
-                </li>
-                <li className="locations__item">
-                  <a className="locations__item-link tabs__item" href="#">
-                    <span>Dusseldorf</span>
-                  </a>
-                </li>
-              </ul>
-            </section>
-          </div>
+          <CitiesList activeCityName={city.name} />
           <div className="cities">
             <div className="cities__places-container container">
               <section className="cities__places places">
                 <h2 className="visually-hidden">Places</h2>
                 <b className="places__found">
-                  {offers.length} places to stay in Amsterdam
+                  {pluralizeAndCombine('place', offers.length)} to stay in{' '}
+                  {city.name}
                 </b>
                 <form className="places__sorting" action="#" method="get">
                   <span className="places__sorting-caption">Sort by</span>
@@ -96,7 +66,7 @@ export function MainPage({ offers }: MainPageProps): React.JSX.Element {
               </section>
               <div className="cities__right-section">
                 <Map
-                  city={offers[0].city}
+                  city={city}
                   points={offers.map((x) => ({
                     location: x.location,
                     id: x.id,

diff --git a/src/components/app.tsx b/src/components/app.tsx
@@ -8,33 +8,34 @@ import { AuthorizationWrapper } from './authorization-wrapper.tsx';
 import { AppRoutes } from '../dataTypes/enums/app-routes.ts';
 import { HelmetProvider } from 'react-helmet-async';
 import { Offer } from '../dataTypes/offer.ts';
+import { Provider } from 'react-redux';
+import { store } from '../store/store.ts';
 
 interface AppProps {
   offers: Offer[];
 }
 
 export function App({ offers }: AppProps): React.JSX.Element {
   return (
-    <HelmetProvider>
-      <BrowserRouter>
-        <Routes>
-          <Route
-            path={AppRoutes.MainPage}
-            element={<MainPage offers={offers} />}
-          />
-          <Route path={AppRoutes.Login} element={<LoginPage />} />
-          <Route
-            path={AppRoutes.Favorites}
-            element={
-              <AuthorizationWrapper isAuthorized={false}>
-                <FavoritesPage offers={offers} />
-              </AuthorizationWrapper>
-            }
-          />
-          <Route path={`${AppRoutes.Offer}/:id`} element={<OfferPage />} />
-          <Route path="*" element={<NotFoundPage />} />
-        </Routes>
-      </BrowserRouter>
-    </HelmetProvider>
+    <Provider store={store}>
+      <HelmetProvider>
+        <BrowserRouter>
+          <Routes>
+            <Route path={AppRoutes.MainPage} element={<MainPage />} />
+            <Route path={AppRoutes.Login} element={<LoginPage />} />
+            <Route
+              path={AppRoutes.Favorites}
+              element={
+                <AuthorizationWrapper isAuthorized={false}>
+                  <FavoritesPage offers={offers} />
+                </AuthorizationWrapper>
+              }
+            />
+            <Route path={`${AppRoutes.Offer}/:id`} element={<OfferPage />} />
+            <Route path="*" element={<NotFoundPage />} />
+          </Routes>
+        </BrowserRouter>
+      </HelmetProvider>
+    </Provider>
   );
 }
diff --git a/src/components/cities-list.tsx b/src/components/cities-list.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { CITIES } from '../consts/cities.ts';
+import { City } from '../dataTypes/city.ts';
+import { useAppDispatch } from '../store/store.ts';
+import { changeCity } from '../store/actions.ts';
+
+interface CitiesListProps {
+  activeCityName: string;
+}
+
+export function CitiesList({
+  activeCityName,
+}: CitiesListProps): React.JSX.Element {
+  const dispatch = useAppDispatch();
+  return (
+    <div className="tabs">
+      <section className="locations container">
+        <ul className="locations__list tabs__list">
+          {CITIES.map((city: City) => (
+            <li key={city.name} className="locations__item">
+              {city.name === activeCityName ? (
+                <a className="locations__item-link tabs__item tabs__item--active">
+                  <span>{city.name}</span>
+                </a>
+              ) : (
+                <a
+                  className="locations__item-link tabs__item"
+                  onClick={() => dispatch(changeCity(city))}
+                >
+                  <span>{city.name}</span>
+                </a>
+              )}
+            </li>
+          ))}
+        </ul>
+      </section>
+    </div>
+  );
+}
diff --git a/src/components/map/icons.ts b/src/components/map/icons.ts
@@ -0,0 +1,13 @@
+import { Icon } from 'leaflet';
+
+export const defaultCustomIcon = new Icon({
+  iconUrl: 'public/img/pin.svg',
+  iconSize: [40, 40],
+  iconAnchor: [20, 40],
+});
+
+export const currentCustomIcon = new Icon({
+  iconUrl: 'public/img/pin-active.svg',
+  iconSize: [40, 40],
+  iconAnchor: [20, 40],
+});
diff --git a/src/components/map/map.tsx b/src/components/map/map.tsx
@@ -1,10 +1,11 @@
 import React, { useRef, useEffect } from 'react';
-import { Icon, Marker, layerGroup } from 'leaflet';
+import { Marker, layerGroup } from 'leaflet';
 import 'leaflet/dist/leaflet.css';
-import { useMap } from './use-map.ts';
+import { useMap } from '../../hooks/use-map.ts';
 import { City } from '../../dataTypes/city.ts';
 import { Point } from '../../dataTypes/point.ts';
 import cn from 'classnames';
+import { currentCustomIcon, defaultCustomIcon } from './icons.ts';
 
 interface MapProps {
   city: City;
@@ -13,18 +14,6 @@ interface MapProps {
   isOnMainPage?: boolean;
 }
 
-const defaultCustomIcon = new Icon({
-  iconUrl: 'public/img/pin.svg',
-  iconSize: [40, 40],
-  iconAnchor: [20, 40],
-});
-
-const currentCustomIcon = new Icon({
-  iconUrl: 'public/img/pin-active.svg',
-  iconSize: [40, 40],
-  iconAnchor: [20, 40],
-});
-
 export function Map(props: MapProps): React.JSX.Element {
   const { city, points, selectedPoint, isOnMainPage } = props;
 

diff --git a/src/consts/cities.ts b/src/consts/cities.ts
@@ -0,0 +1,64 @@
+import { City } from '../dataTypes/city.ts';
+
+export const PARIS: City = {
+  name: 'Paris',
+  location: {
+    latitude: 48.864716,
+    longitude: 2.349014,
+    zoom: 12,
+  },
+};
+
+export const COLOGNE: City = {
+  name: 'Cologne',
+  location: {
+    latitude: 50.935173,
+    longitude: 6.953101,
+    zoom: 12,
+  },
+};
+
+export const BRUSSELS: City = {
+  name: 'Brussels',
+  location: {
+    latitude: 50.85045,
+    longitude: 4.34878,
+    zoom: 12,
+  },
+};
+
+export const AMSTERDAM: City = {
+  name: 'Amsterdam',
+  location: {
+    latitude: 52.377956,
+    longitude: 4.89707,
+    zoom: 12,
+  },
+};
+
+export const HAMBURG: City = {
+  name: 'Hamburg',
+  location: {
+    latitude: 53.551086,
+    longitude: 9.993682,
+    zoom: 12,
+  },
+};
+
+export const DUSSELDORF: City = {
+  name: 'Dusseldorf',
+  location: {
+    latitude: 51.233334,
+    longitude: 6.783333,
+    zoom: 12,
+  },
+};
+
+export const CITIES: City[] = [
+  PARIS,
+  COLOGNE,
+  BRUSSELS,
+  AMSTERDAM,
+  HAMBURG,
+  DUSSELDORF,
+];
diff --git a/src/dataTypes/city.ts b/src/dataTypes/city.ts
@@ -1,6 +1,12 @@
 import { Location } from './location.ts';
 
 export type City = {
-  name: string;
+  name:
+    | 'Paris'
+    | 'Cologne'
+    | 'Brussels'
+    | 'Amsterdam'
+    | 'Hamburg'
+    | 'Dusseldorf';
   location: Location;
 };
diff --git a/src/dataTypes/store-types.ts b/src/dataTypes/store-types.ts
@@ -0,0 +1,5 @@
+import { store } from '../store/store.ts';
+
+export type State = ReturnType<typeof store.getState>;
+
+export type AppDispatch = typeof store.dispatch;
diff --git a/src/components/map/use-map.ts → src/hooks/use-map.ts b/src/components/map/use-map.ts → src/hooks/use-map.ts
@@ -1,6 +1,6 @@
 import { useEffect, useState, MutableRefObject, useRef } from 'react';
 import { Map, TileLayer } from 'leaflet';
-import { City } from '../../dataTypes/city.ts';
+import { City } from '../dataTypes/city.ts';
 
 export function useMap(
   mapRef: MutableRefObject<HTMLElement | null>,
@@ -10,13 +10,13 @@ export function useMap(
   const isRenderedRef = useRef<boolean>(false);
 
   useEffect(() => {
-    if (mapRef.current !== null && !isRenderedRef.current) {
+    if (mapRef.current && !isRenderedRef.current) {
       const instance = new Map(mapRef.current, {
         center: {
           lat: city.location.latitude,
           lng: city.location.longitude,
         },
-        zoom: 10,
+        zoom: city.location.zoom,
       });
 
       const layer = new TileLayer(
@@ -28,10 +28,20 @@ export function useMap(
       );
 
       instance.addLayer(layer);
-
       setMap(instance);
       isRenderedRef.current = true;
     }
+    if (isRenderedRef.current) {
+      setMap((prevMap) =>
+        prevMap!.setView(
+          {
+            lat: city.location.latitude,
+            lng: city.location.longitude,
+          },
+          city.location.zoom,
+        ),
+      );
+    }
   }, [mapRef, city]);
 
   return map;

diff --git a/src/mocks/offers.ts b/src/mocks/offers.ts
@@ -1,5 +1,5 @@
-import { Offer } from '../dataTypes/offer.ts';
-import { RoomType } from '../dataTypes/enums/room-type.ts';
+import {Offer} from '../dataTypes/offer.ts';
+import {RoomType} from '../dataTypes/enums/room-type.ts';
 
 export const offerMocks: Offer[] = [
   {
@@ -54,16 +54,16 @@ export const offerMocks: Offer[] = [
     type: RoomType.Room,
     price: 14,
     city: {
-      name: 'Amsterdam',
+      name: 'Paris',
       location: {
-        latitude: 52.35514938496378,
-        longitude: 4.673877537499948,
+        latitude: 48.864716123123,
+        longitude: 2.34901412113,
         zoom: 8,
       },
     },
     location: {
-      latitude: 52.3909553943508,
-      longitude: 4.929309666406198,
+      latitude: 48.864716123123,
+      longitude: 2.34901412113,
       zoom: 8,
     },
     isFavorite: true,

diff --git a/src/store/actions.ts b/src/store/actions.ts
@@ -0,0 +1,7 @@
+import { createAction } from '@reduxjs/toolkit';
+import { City } from '../dataTypes/city.ts';
+import { Offer } from '../dataTypes/offer.ts';
+
+export const changeCity = createAction<City>('mainPage/changeCity');
+
+export const fillOffers = createAction<Offer[]>('mainPage/fillOffers');