Merge pull request #8 from antoshkaxxr/module6-task1

src/components/app/app.tsx

@@ -8,23 +8,22 @@ import {OfferPage} from '../../pages/offer-page/offer-page.tsx';
 import {NotFoundPage} from '../../pages/404-not-found-page/not-found-page.tsx';
 import {AuthorizationStatus} from '../../const.ts';
 import {FavoritesPage} from '../../pages/favorites-page/favorites-page.tsx';
-import {Offer} from '../../types/offer.ts';
+import {useAppDispatch} from '../../hooks';
+import {setOffers} from '../../store/action.ts';
+import {Offers} from '../../mocks/offers.ts';
 
-type AppScreenProps = {
-  offers: Offer[];
-}
+function App() : JSX.Element {
+  const dispatch = useAppDispatch();
+  dispatch(setOffers(Offers));
 
-function App({offers} : AppScreenProps) : JSX.Element {
   return (
     <HelmetProvider>
       <BrowserRouter>
         <Routes>
           <Route
             path={AppRoute.Main}
             element={
-              <MainPage
-                offers={offers}
-              />
+              <MainPage />
             }
           />
           <Route
@@ -37,7 +36,7 @@ function App({offers} : AppScreenProps) : JSX.Element {
               <PrivateRoute
                 authorizationStatus={AuthorizationStatus.Auth}
               >
-                <FavoritesPage offers={offers} />
+                <FavoritesPage />
               </PrivateRoute>
             }
           />

src/components/cities-list/cities-list.tsx

@@ -0,0 +1,28 @@
+type CitiesListProps = {
+  cities: string[];
+  activeCity: string;
+  onCityChange: (city: string) => void;
+};
+
+export function CitiesList({ cities, activeCity, onCityChange }: CitiesListProps): JSX.Element {
+  return (
+    <section className="locations container">
+      <ul className="locations__list tabs__list">
+        {cities.map((city) => (
+          <li className="locations__item" key={city}>
+            <a
+              className={`locations__item-link tabs__item ${city === activeCity ? 'tabs__item--active' : ''}`}
+              href="#"
+              onClick={(e) => {
+                e.preventDefault();
+                onCityChange(city);
+              }}
+            >
+              <span>{city}</span>
+            </a>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}

src/const.ts

@@ -19,3 +19,5 @@ export enum AuthorizationStatus {
 export const URL_MARKER_DEFAULT = 'https://assets.htmlacademy.ru/content/intensive/javascript-1/demo/interactive-map/pin.svg';
 
 export const URL_MARKER_CURRENT = 'https://assets.htmlacademy.ru/content/intensive/javascript-1/demo/interactive-map/main-pin.svg';
+
+export const CITIES = ['Paris', 'Cologne', 'Brussels', 'Amsterdam', 'Hamburg', 'Dusseldorf'];

src/hooks/index.ts

@@ -0,0 +1,6 @@
+import {TypedUseSelectorHook, useDispatch, useSelector} from 'react-redux';
+import type {State, AppDispatch} from '../types/state';
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+
+export const useAppSelector: TypedUseSelectorHook<State> = useSelector;

src/hooks/useMap/useMap.ts

@@ -8,26 +8,37 @@ export function useMap(mapRef: React.MutableRefObject<null>, city: City) {
   const isRenderedRef = useRef(false);
 
   useEffect(() => {
-    if (mapRef.current !== null && !isRenderedRef.current) {
-      const instance = leaflet.map(mapRef.current, {
-        center: {
-          lat: city.location.latitude,
-          lng: city.location.longitude,
-        },
-        zoom: city.location.zoom,
-      });
+    if (mapRef.current !== null) {
+      if (!isRenderedRef.current) {
+        const instance = leaflet.map(mapRef.current, {
+          center: {
+            lat: city.location.latitude,
+            lng: city.location.longitude,
+          },
+          zoom: city.location.zoom,
+        });
+
+        leaflet
+          .tileLayer(
+            'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png',
+            {
+              attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
+            },
+          )
+          .addTo(instance);
 
-      leaflet
-        .tileLayer(
-          'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png',
+        setMap(instance);
+        isRenderedRef.current = true;
+      } else {
+        map?.setView(
           {
-            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
+            lat: city.location.latitude,
+            lng: city.location.longitude,
           },
-        )
-        .addTo(instance);
+          city.location.zoom
+        );
+      }
 
-      setMap(instance);
-      isRenderedRef.current = true;
     }
   }, [mapRef, city]);
 

src/index.tsx

@@ -1,18 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './components/app/app';
-import {Data} from './const';
-import {Offers} from './mocks/offers.ts';
+import {Provider} from 'react-redux';
+import {store} from './store';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 
 root.render(
   <React.StrictMode>
-    <App
-      offersNumber={Data.OffersNumber}
-      offers = {Offers}
-    />
+    <Provider store={store}>
+      <App />
+    </Provider>
   </React.StrictMode>
 );