From 6b63d93d355d01da0b14812ff468dc65c7869c95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=92=D0=BB=D0=B0=D0=B4=D0=B8=D1=81=D0=BB=D0=B0=D0=B2=20?=
 =?UTF-8?q?=D0=9C=D0=B5=D0=B4=D0=B2=D0=B5=D0=B4=D0=B5=D0=B2=D1=81=D0=BA?=
 =?UTF-8?q?=D0=B8=D0=B9?= <miedviedievskii@mail.ru>
Date: Sun, 19 May 2024 21:45:32 +0500
Subject: [PATCH] new files

---
 src/components/cities-tabs/city-tab.tsx | 30 +++++++++++++++++++++++++
 src/hooks/redux.ts                      |  4 ++++
 src/store/acions.ts                     |  4 ++++
 src/store/index.tsx                     |  6 +++++
 src/store/reducer.ts                    | 24 ++++++++++++++++++++
 src/types/point.ts                      |  8 +++++++
 6 files changed, 76 insertions(+)
 create mode 100644 src/components/cities-tabs/city-tab.tsx
 create mode 100644 src/hooks/redux.ts
 create mode 100644 src/store/acions.ts
 create mode 100644 src/store/index.tsx
 create mode 100644 src/store/reducer.ts
 create mode 100644 src/types/point.ts

diff --git a/src/components/cities-tabs/city-tab.tsx b/src/components/cities-tabs/city-tab.tsx
new file mode 100644
index 0000000..0a1408d
--- /dev/null
+++ b/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;
diff --git a/src/hooks/redux.ts b/src/hooks/redux.ts
new file mode 100644
index 0000000..6c3fce7
--- /dev/null
+++ b/src/hooks/redux.ts
@@ -0,0 +1,4 @@
+import {TypedUseSelectorHook, useSelector} from 'react-redux';
+import {RootState} from '../store';
+
+export const useAppSelector : TypedUseSelectorHook<RootState> = useSelector;
diff --git a/src/store/acions.ts b/src/store/acions.ts
new file mode 100644
index 0000000..cdd968d
--- /dev/null
+++ b/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');
diff --git a/src/store/index.tsx b/src/store/index.tsx
new file mode 100644
index 0000000..8d63a0e
--- /dev/null
+++ b/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>;
diff --git a/src/store/reducer.ts b/src/store/reducer.ts
new file mode 100644
index 0000000..7643a2a
--- /dev/null
+++ b/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;
+    });
+});
diff --git a/src/types/point.ts b/src/types/point.ts
new file mode 100644
index 0000000..88ff49a
--- /dev/null
+++ b/src/types/point.ts
@@ -0,0 +1,8 @@
+import {Location} from './location.ts';
+
+export type Point = {
+  id: string;
+  location: Location;
+}
+
+export type Points = Point[];