module6-task1

src/components/app/app.tsx

@@ -9,17 +9,13 @@ import { AppRoute, AuthorizationStatus } from '../../const.ts';
 import { Offer } from '../../types/offer';
 import { OFFERS } from '../../mocks/offers.ts';
 
-type AppScreenProps = {
-  placesCount: number;
-}
-
-function App({placesCount}: AppScreenProps): JSX.Element {
+function App(): JSX.Element {
   const favourites: Offer[] = OFFERS.filter((o) => o.isFavorite);
   return (
     <BrowserRouter>
       <Routes>
         <Route path="*" element={<NotFoundScreen/>} />
-        <Route path={AppRoute.Main} element={<MainScreen placesCount={placesCount} offers={OFFERS}/>} />
+        <Route path={AppRoute.Main} element={<MainScreen/>} />
         <Route
           path={AppRoute.Favorites}
           element={
@@ -29,7 +25,7 @@ function App({placesCount}: AppScreenProps): JSX.Element {
           }
         />
         <Route path={AppRoute.Login} element={<LoginScreen/>} />
-        <Route path={AppRoute.Offer} element={<OfferScreen offer={OFFERS[2]}/>} />
+        <Route path={AppRoute.Offer} element={<OfferScreen offer={OFFERS[0]}/>} />
       </Routes>
     </BrowserRouter>
   );

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

@@ -0,0 +1,28 @@
+import { City } from '../../types/city';
+import { useAppDispatch } from '../../hooks';
+import { changeCity } from '../../store/action';
+import { CITIES } from '../../mocks/cities';
+
+type CityListProps = {
+  chosenCity: City;
+}
+
+function CityList({chosenCity}: CityListProps): JSX.Element {
+  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}>
+          <a className={`locations__item-link tabs__item ${(city === chosenCity) ? 'tabs__item--active' : ''}`} onClick={() => {handleCityChange(city)}}>
+            <span>{city.title}</span>
+          </a>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export default CityList;

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

@@ -6,7 +6,7 @@ type OfferProps = {
   cardType: string;
 }
 
-function CityCard({offer, cardType}: OfferProps): JSX.Element {
+function OfferCard({offer, cardType}: OfferProps): JSX.Element {
   return (
     <article className={cardType}>
       {offer.isPremium ? (
@@ -46,4 +46,4 @@ function CityCard({offer, cardType}: OfferProps): JSX.Element {
     </article>
   );
 }
-export default CityCard;
+export default OfferCard;

src/components/offer-list/offer-list.tsx

@@ -1,6 +1,6 @@
 import { listToCard, typeOfCardList } from '../../const';
 import { Offer } from '../../types/offer';
-import CityCard from '../city-card/city-card';
+import OfferCard from '../offer-card/offer-card';
 
 type OfferListProps = {
   offers: Offer[];
@@ -12,7 +12,7 @@ function OfferList({offers, listType}: OfferListProps): JSX.Element {
   return (
     <div className={(listType)}>
       {offers.map((offer) => (
-        <CityCard key={offer.id} offer={offer} cardType={(type !== undefined) ? type : 'cities__card place-card'}/>
+        <OfferCard key={offer.id} offer={offer} cardType={(type !== undefined) ? type : 'cities__card place-card'}/>
       ))}
     </div>
   );

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/index.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './components/app/app';
-import { Settings } from './const';
+import { Provider } from 'react-redux';
+import { store } from './store';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 
 root.render(
   <React.StrictMode>
-    <App placesCount={Settings.placesCount}/>
+    <Provider store = {store}>
+      <App/>
+    </Provider>
   </React.StrictMode>
 );

src/mocks/cities.ts

@@ -1,7 +1,34 @@
 import { City } from '../types/city';
 
-export const AMSTERDAM: City = {
-  title: 'Amsterdam',
-  lat: 52.3740300,
-  lng: 4.8896900
-};
+export const CITIES: City[] = [
+  {
+    title: 'Paris',
+    lat: 52.3740300,
+    lng: 4.8896900
+  },
+  {
+    title: 'Brussels',
+    lat: 52.3740300,
+    lng: 4.8896900
+  },
+  {
+    title: 'Cologne',
+    lat: 52.3740300,
+    lng: 4.8896900
+  },
+  {
+    title: 'Amsterdam',
+    lat: 52.3740300,
+    lng: 4.8896900
+  },
+  {
+    title: 'Hamburg',
+    lat: 52.3740300,
+    lng: 4.8896900
+  },
+  {
+    title: 'Dusseldorf',
+    lat: 52.3740300,
+    lng: 4.8896900
+  },
+];

src/mocks/offers.ts

@@ -1,4 +1,6 @@
 import { Offer } from '../types/offer';
+import { CITIES } from './cities';
+import { POINTS } from './points';
 import { REVIEWS } from './reviews';
 
 export const OFFERS: Offer[] = [
@@ -11,7 +13,9 @@ export const OFFERS: Offer[] = [
     type: 'Apartment',
     isFavorite: false,
     rating: 4,
-    reviews: [REVIEWS[0]]
+    reviews: [REVIEWS[0], REVIEWS[1]],
+    city: CITIES[0],
+    point: POINTS[0]
   },
   {
     id: '2',
@@ -22,7 +26,9 @@ export const OFFERS: Offer[] = [
     type: 'Room',
     isFavorite: true,
     rating: 4,
-    reviews: [REVIEWS[1]]
+    reviews: [REVIEWS[1]],
+    city: CITIES[1],
+    point: POINTS[1]
   },
   {
     id: '3',
@@ -33,7 +39,9 @@ export const OFFERS: Offer[] = [
     type: 'Apartment',
     isFavorite: false,
     rating: 4.7,
-    reviews: [REVIEWS[2]]
+    reviews: [REVIEWS[2]],
+    city: CITIES[0],
+    point: POINTS[2]
   },
   {
     id: '4',
@@ -44,6 +52,8 @@ export const OFFERS: Offer[] = [
     type: 'Apartment',
     isFavorite: true,
     rating: 5,
-    reviews: [REVIEWS[3]]
+    reviews: [REVIEWS[3]],
+    city: CITIES[3],
+    point: POINTS[3]
   },
 ];

src/pages/main-screen/main-screen.tsx

@@ -1,17 +1,15 @@
-import { Offer } from '../../types/offer';
 import OfferList from '../../components/offer-list/offer-list';
 import { Link } from 'react-router-dom';
 import Map from '../../components/map/map';
-import { POINTS } from '../../mocks/points';
-import { AMSTERDAM } from '../../mocks/cities';
 import { typeOfCardList } from '../../const';
+import { useAppSelector } from '../../hooks';
+import CityList from '../../components/city-list/city-list';
 
-type MainScreenProps = {
-    placesCount: number;
-    offers: Offer[];
-  }
-
-function MainScreen({placesCount, offers}: MainScreenProps): JSX.Element {
+function MainScreen(): JSX.Element {
+  const [city, offers] = useAppSelector((state) => [state.city, state.offers]);
+  const chosenOffers = offers.filter((offer) => offer.city === city);
+  const points = chosenOffers.map((offer) => offer.point);
+  const favoriteOffers = offers.filter((offer) => offer.isFavorite);
   return (
     <div className="page page--gray page--main">
       <header className="header">
@@ -30,7 +28,7 @@ function MainScreen({placesCount, offers}: MainScreenProps): JSX.Element {
                     </div>
                     <span className="header__user-name user__name">[email protected]</span>
                     <Link to="/favorites">
-                      <span className="header__favorite-count">3</span>
+                      <span className="header__favorite-count">{favoriteOffers.length}</span>
                     </Link>
                   </a>
                 </li>
@@ -49,45 +47,14 @@ function MainScreen({placesCount, offers}: MainScreenProps): JSX.Element {
         <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>
+            <CityList chosenCity={city}/>
           </section>
         </div>
         <div className="cities">
           <div className="cities__places-container container">
             <section className="cities__places places">
               <h2 className="visually-hidden">Places</h2>
-              <b className="places__found">{placesCount} places to stay in Amsterdam</b>
+              <b className="places__found">{chosenOffers.length} places to stay in {city.title}</b>
               <form className="places__sorting" action="#" method="get">
                 <span className="places__sorting-caption">Sort by</span>
                 <span className="places__sorting-type" tabIndex={0}>
@@ -103,11 +70,11 @@ function MainScreen({placesCount, offers}: MainScreenProps): JSX.Element {
                   <li className="places__option" tabIndex={0}>Top rated first</li>
                 </ul>
               </form>
-              <OfferList offers={offers} listType={typeOfCardList.standart}/>
+              <OfferList offers={chosenOffers} listType={typeOfCardList.standart}/>
             </section>
             <div className="cities__right-section">
               <section className="cities__map map">
-                <Map points={POINTS} city={AMSTERDAM} selectedPoint={undefined}/>
+                <Map points={points} city={city} selectedPoint={undefined}/>
               </section>
             </div>
           </div>

src/pages/offer-screen/offer-screen.tsx

@@ -2,7 +2,7 @@ import { Link } from 'react-router-dom';
 import ReviewsList from '../../components/reviews-list/reviews-list';
 import { OFFERS } from '../../mocks/offers';
 import { Offer } from '../../types/offer';
-import { AMSTERDAM } from '../../mocks/cities';
+import { CITIES } from '../../mocks/cities';
 import { POINTS } from '../../mocks/points';
 import Map from '../../components/map/map';
 import OfferList from '../../components/offer-list/offer-list';
@@ -168,7 +168,7 @@ function OfferScreen({offer}: OfferScreenProps): JSX.Element {
             </div>
           </div>
           <section className="offer__map map">
-            <Map points={[POINTS[0], POINTS[1], POINTS[2]]} city={AMSTERDAM} selectedPoint={undefined}/>
+            <Map points={[POINTS[0], POINTS[1], POINTS[2]]} city={CITIES[1]} selectedPoint={undefined}/>
           </section>
         </section>
         <div className="container">

src/store/action.ts

@@ -0,0 +1,8 @@
+import { createAction } from "@reduxjs/toolkit";
+import { City } from "../types/city";
+
+export const getOffers = createAction('OFFERS_GET')
+
+export const changeCity = createAction('CITY_CHANGE', (value: City) => ({
+  payload: value
+}));

src/store/index.ts

@@ -0,0 +1,4 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { reducer } from './reducer';
+
+export const store = configureStore({reducer});

src/store/reducer.ts

@@ -0,0 +1,28 @@
+import { createReducer } from '@reduxjs/toolkit';
+import { CITIES } from '../mocks/cities';
+import { OFFERS } from '../mocks/offers';
+import { City } from '../types/city';
+import { Offer } from '../types/offer';
+import { changeCity, getOffers } from './action';
+
+type StateType = {
+    city: City;
+    offers: Offer[]
+  }
+
+const initialState: StateType = {
+    city: CITIES[0],
+    offers: OFFERS
+  };
+
+const reducer = createReducer(initialState, (builder) => {
+    builder
+    .addCase(getOffers, (state) => {
+      state.offers = OFFERS;
+    })
+    .addCase(changeCity, (state, action) => {
+      state.city = action.payload;
+    });
+});
+
+export {reducer};

src/types/offer.ts

@@ -1,4 +1,6 @@
+import { Point } from './point';
 import { Review } from '../types/review';
+import { City } from './city';
 
 export type Offer = {
   id: string;
@@ -10,4 +12,6 @@ export type Offer = {
   isFavorite: boolean;
   rating: number;
   reviews: Review[];
+  city: City;
+  point: Point;
 };

src/types/state.ts

@@ -0,0 +1,5 @@
+import { store } from '../store/index.js';
+
+export type State = ReturnType<typeof store.getState>;
+
+export type AppDispatch = typeof store.dispatch;