Merge pull request #8 from VartoSss/module6-task1

src/app/app.tsx

@@ -7,7 +7,6 @@ import FavoritesPage from '../components/pages/favorites-page/favorites-page';
 import OfferPage from '../components/pages/offer-page/offer-page';
 import PrivateRoute from '../components/private-route';
 import { Offer } from '../types/offer';
-
 type AppScreenProps = {
   offers: Offer[];
 };
@@ -18,19 +17,14 @@ function App(props: AppScreenProps): JSX.Element {
       <Routes>
         <Route
           path={AppRoutes.Root}
-          element={
-            <MainPage
-              rentalOffersCount={props.offers.length}
-              offers={props.offers}
-            />
-          }
+          element={<MainPage/>}
         />
         <Route path={AppRoutes.Login} element={<LoginPage />} />
         <Route path={AppRoutes.Offer} element={<OfferPage />} />
         <Route
           path={AppRoutes.Favorites}
           element={
-            <PrivateRoute authorizationStatus={AuthorizationStatus.Auth}>
+            <PrivateRoute authorizationStatus={AuthorizationStatus.NoAuth}>
               <FavoritesPage offers={props.offers} />
             </PrivateRoute>
           }

src/components/map/use-map.tsx

@@ -16,7 +16,7 @@ export function useMap(
           lat: city.location.latitude,
           lng: city.location.longitude,
         },
-        zoom: 10,
+        zoom: city.location.zoom,
       });
 
       const layer = new TileLayer(
@@ -32,7 +32,16 @@ export function useMap(
       setMap(instance);
       isRenderedRef.current = true;
     }
-  }, [mapRef, city]);
+  }, [city, mapRef]);
+
+  useEffect(() => {
+    if (map) {
+      map.setView(
+        [city.location.latitude, city.location.longitude],
+        city.location.zoom
+      );
+    }
+  }, [map, city]);
 
   return map;
 }

src/components/pages/main-page/cities-list.tsx

@@ -0,0 +1,33 @@
+import { CITY_INFO, CityData } from '../../../consts';
+import { changeCityAction } from '../../../store/actions';
+import { useAppDispatch, useAppSelector } from '../../../store/hooks';
+import { City } from '../../../types/city';
+
+function CitiesList(): JSX.Element {
+  const dispatch = useAppDispatch();
+  const currentCityName = useAppSelector((state) => state.cityName);
+  return (
+    <div className="tabs">
+      <section className="locations container">
+        <ul className="locations__list tabs__list">
+          {CITY_INFO.map((city: City) => (
+            <li key={city.name} className="locations__item">
+              <a
+                className={`locations__item-link tabs__item${
+                  currentCityName === city.name ? ' tabs__item--active' : ''
+                }`}
+                onClick={() => {
+                  dispatch(changeCityAction(CityData[city.name]));
+                }}
+              >
+                <span>{city.name}</span>
+              </a>
+            </li>
+          ))}
+        </ul>
+      </section>
+    </div>
+  );
+}
+
+export default CitiesList;

src/components/pages/main-page/main-page.tsx

@@ -3,14 +3,16 @@ import { Map } from '../../map/map';
 import { Offer } from '../../../types/offer';
 import OffersList from './offers-list';
 import { Nullable } from 'vitest';
+import CitiesList from './cities-list';
+import { useAppSelector } from '../../../store/hooks';
+import { CityData } from '../../../consts';
 
-type MainPageProps = {
-  rentalOffersCount: number;
-  offers: Offer[];
-};
-
-function MainPage({ rentalOffersCount, offers }: MainPageProps): JSX.Element {
+function MainPage(): JSX.Element {
   const [activeOffer, setActiveOffer] = useState<Nullable<Offer>>(null);
+  const activeCityName = useAppSelector((state) => state.cityName);
+  const offers = useAppSelector((state) => state.offerList).filter(
+    (offer) => offer.city.name === activeCityName
+  );
   return (
     <div className="page page--gray page--main">
       <header className="header">
@@ -53,48 +55,13 @@ function MainPage({ rentalOffersCount, offers }: MainPageProps): JSX.Element {
       </header>
       <main className="page__main page__main--index">
         <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 />
         <div className="cities">
           <div className="cities__places-container container">
             <section className="cities__places places">
               <h2 className="visually-hidden">Places</h2>
               <b className="places__found">
-                {rentalOffersCount} places to stay in Amsterdam
+                {offers.length} places to stay in {activeCityName}
               </b>
               <form className="places__sorting" action="#" method="get">
                 <span className="places__sorting-caption">Sort by</span>
@@ -125,12 +92,12 @@ function MainPage({ rentalOffersCount, offers }: MainPageProps): JSX.Element {
               <OffersList
                 offers={offers}
                 onActiveOfferChange={(offer: Nullable<Offer>) =>
-                  setActiveOffer(offer) }
+                  setActiveOffer(offer)}
               />
             </section>
             <div className="cities__right-section">
               <Map
-                city={offers[0].city}
+                city={CityData[activeCityName]}
                 points={offers.map((x) => ({
                   location: x.location,
                   id: x.id,

src/consts.ts

@@ -1,3 +1,5 @@
+import { City } from './types/city';
+
 export enum AppRoutes {
   Root = '/',
   Login = '/login',
@@ -10,3 +12,114 @@ export enum AuthorizationStatus {
   NoAuth = 'NO_AUTH',
   Unknown = 'UNKNOWN',
 }
+
+export enum CityName {
+  Paris = 'Paris',
+  Amsterdam = 'Amsterdam',
+  Cologne = 'Cologne',
+  Brussels = 'Brussels',
+  Hamburg = 'Hamburg',
+  Dusseldorf = 'Dusseldorf',
+}
+
+export const CITY_INFO: City[] = [
+  {
+    name: CityName.Paris,
+    location: {
+      latitude: 48.8534,
+      longitude: 2.3488,
+      zoom: 12,
+    },
+  },
+  {
+    name: CityName.Cologne,
+    location: {
+      latitude: 50.9333,
+      longitude: 6.95,
+      zoom: 12,
+    },
+  },
+  {
+    name: CityName.Brussels,
+    location: {
+      latitude: 50.8504,
+      longitude: 4.34878,
+      zoom: 12,
+    },
+  },
+  {
+    name: CityName.Amsterdam,
+    location: {
+      latitude: 52.374,
+      longitude: 4.889969,
+      zoom: 12,
+    },
+  },
+  {
+    name: CityName.Hamburg,
+    location: {
+      latitude: 53.5511,
+      longitude: 9.9937,
+      zoom: 12,
+    },
+  },
+  {
+    name: CityName.Dusseldorf,
+    location: {
+      latitude: 51.2217,
+      longitude: 6.77616,
+      zoom: 12,
+    },
+  },
+];
+
+export const CityData = {
+  [CityName.Paris]: {
+    name: CityName.Paris,
+    location: {
+      latitude: 48.8534,
+      longitude: 2.3488,
+      zoom: 12,
+    },
+  },
+  [CityName.Cologne]: {
+    name: CityName.Cologne,
+    location: {
+      latitude: 50.9333,
+      longitude: 6.95,
+      zoom: 12,
+    },
+  },
+  [CityName.Brussels]: {
+    name: CityName.Brussels,
+    location: {
+      latitude: 50.8504,
+      longitude: 4.34878,
+      zoom: 12,
+    },
+  },
+  [CityName.Amsterdam]: {
+    name: CityName.Amsterdam,
+    location: {
+      latitude: 52.374,
+      longitude: 4.889969,
+      zoom: 12,
+    },
+  },
+  [CityName.Hamburg]: {
+    name: CityName.Hamburg,
+    location: {
+      latitude: 53.5511,
+      longitude: 9.9937,
+      zoom: 12,
+    },
+  },
+  [CityName.Dusseldorf]: {
+    name: CityName.Dusseldorf,
+    location: {
+      latitude: 51.2217,
+      longitude: 6.77616,
+      zoom: 12,
+    },
+  },
+};

src/index.tsx

@@ -2,13 +2,17 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './app/app';
 import { OffersMock } from './mocks/offers';
+import { Provider } from 'react-redux';
+import { store } from './store';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 
 root.render(
   <React.StrictMode>
-    <App offers={OffersMock} />
+    <Provider store={store}>
+      <App offers={OffersMock} />
+    </Provider>
   </React.StrictMode>
 );