new files

src/components/cities-tabs/city-tab.tsx

@@ -0,0 +1,30 @@
+import {Link} from 'react-router-dom';
+import {AppRoute} from '../../const.ts';
+import classNames from 'classnames';
+import {useDispatch} from 'react-redux';
+import {setActiveCity} from '../../store/acions.ts';
+import {City} from '../../types/city.ts';
+
+type CityTabProps = {
+  city: City;
+  isActive: boolean;
+}
+
+function CityTab({city, isActive}: CityTabProps): JSX.Element {
+  const dispatch = useDispatch();
+  const handleTabClick = () => dispatch(setActiveCity(city));
+  const linkClassName = classNames('locations__item-link tabs__item', {'tabs__item--active': isActive});
+  return (
+    <li className="locations__item" key={city.name}>
+      <Link
+        to={AppRoute.Main}
+        className={linkClassName}
+        onClick={handleTabClick}
+      >
+        <span>{city.name}</span>
+      </Link>
+    </li>
+  );
+}
+
+export default CityTab;

src/hooks/redux.ts

@@ -0,0 +1,4 @@
+import {TypedUseSelectorHook, useSelector} from 'react-redux';
+import {RootState} from '../store';
+
+export const useAppSelector : TypedUseSelectorHook<RootState> = useSelector;

src/store/acions.ts

@@ -0,0 +1,4 @@
+import {createAction} from '@reduxjs/toolkit';
+import {City} from '../types/city.ts';
+
+export const setActiveCity = createAction<City>('setCity');

src/store/index.tsx

@@ -0,0 +1,6 @@
+import {configureStore} from '@reduxjs/toolkit';
+import {reducer} from './reducer.ts';
+
+export const store = configureStore({reducer});
+
+export type RootState = ReturnType<typeof store.getState>;

src/store/reducer.ts

@@ -0,0 +1,24 @@
+import {AvailableCities} from '../const.ts';
+import {mockOffersShort} from '../moks/offers-short.ts';
+import {OffersShort} from '../types/offers/offer-short.ts';
+import {createReducer} from '@reduxjs/toolkit';
+import {setActiveCity} from './acions.ts';
+import {City} from '../types/city.ts';
+import {mockCities} from '../moks/cities.ts';
+
+type AppState = {
+  activeCity: City;
+  offers: OffersShort;
+}
+
+const initialState : AppState = {
+  activeCity: mockCities[AvailableCities.Paris],
+  offers: mockOffersShort,
+};
+
+export const reducer = createReducer(initialState, (builder) => {
+  builder
+    .addCase(setActiveCity, (state, action) => {
+      state.activeCity = action.payload;
+    });
+});

src/types/point.ts

@@ -0,0 +1,8 @@
+import {Location} from './location.ts';
+
+export type Point = {
+  id: string;
+  location: Location;
+}
+
+export type Points = Point[];