Merge pull request #8 from Zombe2203/module6-task1

htmlacademy-univer-javascript-3 · Dec 27, 2024 · 7e3132b · 7e3132b
2 parents 322e3e7 + e86568b
commit 7e3132b
Show file tree

Hide file tree

Showing 13 changed files with 110 additions and 69 deletions.
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -11,19 +11,17 @@ import { CardProps } from '../../recources/Types.ts';
 
 
 type AppProps = {
-  numberOfOffers: number;
-  listOfOffers: CardProps[];
   listOfFavoriteOffers: CardProps[];
   offersProps: OfferPageProps[];
 };
 
-function App({ numberOfOffers, listOfOffers, listOfFavoriteOffers, offersProps }: AppProps): JSX.Element {
+function App({ listOfFavoriteOffers, offersProps }: AppProps): JSX.Element {
   const isAuth = false;
   const tempFirstOfferProps: OfferPageProps = offersProps[0];
   return (
     <BrowserRouter>
       <Routes>
-        <Route path={AppRoute.Main} element={<MainPage numberOfOffers={numberOfOffers} listOfOffers={listOfOffers} />} />
+        <Route path={AppRoute.Main} element={<MainPage/>} />
         <Route path={AppRoute.Login} element={<LoginPage />} />
         <Route path={AppRoute.Offer} element={<OfferPage {...tempFirstOfferProps} />} />
         <Route path={AppRoute.Favorites} element={

diff --git a/src/components/CityList/CityList.tsx b/src/components/CityList/CityList.tsx
@@ -0,0 +1,29 @@
+import { useAppDispatch, useAppSelector } from '../../hooks/useAppSelector';
+import { mockOffers } from '../../mocks/offers';
+import { CITIES } from '../../recources/Cities';
+import { setCity, setOffers } from '../../store/actions';
+
+export const CityList = () => {
+  const currentCity = useAppSelector((state) => state.city);
+  const dispatch = useAppDispatch();
+
+  return (
+    <ul className="locations__list tabs__list">
+      {
+        Object.entries(CITIES).map(([cityName, city]) => (
+          <li key={cityName} className="locations__item">
+            <a className={`locations__item-link tabs__item ${(cityName === currentCity.name) ? 'tabs__item--active' : null}`}
+              href="#"
+              onClick={() => {
+                dispatch(setCity({city: city}));
+                dispatch(setOffers({offers: mockOffers}));
+              }}
+            >
+              <span>{cityName}</span>
+            </a>
+          </li>
+        ))
+      }
+    </ul>
+  );
+};
diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx
@@ -7,6 +7,7 @@ import { CardProps } from '../../recources/Types';
 export type MapCoordinates = {
     latitude: number;
     longitude: number;
+    zoom: number;
 }
 
 export type City = {
@@ -60,7 +61,7 @@ function Map(props: MapProps): JSX.Element {
         map.removeLayer(markerLayer);
       };
     }
-  }, [map, points, selectedPoint]);
+  }, [map, points, selectedPoint, city]);
 
   return <div style={{ height: '100%' }} ref={mapRef}></div>;
 }

diff --git a/src/hooks/useAppSelector.ts b/src/hooks/useAppSelector.ts
@@ -0,0 +1,8 @@
+import {TypedUseSelectorHook, useDispatch, useSelector} from 'react-redux';
+import { store } from '../store';
+
+export type State = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppSelector: TypedUseSelectorHook<State> = useSelector;
diff --git a/src/hooks/useMap.tsx b/src/hooks/useMap.tsx
@@ -1,5 +1,5 @@
 import {useEffect, useState, MutableRefObject, useRef} from 'react';
-import {Map, TileLayer} from 'leaflet';
+import {LatLng, Map, TileLayer} from 'leaflet';
 import {City} from '../components/Map/Map';
 
 function useMap(
@@ -31,8 +31,10 @@ function useMap(
 
       setMap(instance);
       isRenderedRef.current = true;
+    } else if (isRenderedRef.current) {
+      map?.panTo(new LatLng(city.location.latitude, city.location.longitude));
     }
-  }, [mapRef, city]);
+  }, [mapRef, city, map]);
 
   return map;
 }

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,22 +1,22 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './components/App/App';
-import { Configuration } from './recources/Configuration';
-import { offers } from './mocks/offers';
 import { favoriteOffers } from './mocks/favoriteOffers';
 import { mockOfferReviewsList } from './mocks/reviews';
+import { Provider } from 'react-redux';
+import { store } from './store';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 
 root.render(
   <React.StrictMode>
-    <App
-      numberOfOffers={Configuration.numberOfOffers}
-      listOfOffers={offers}
-      listOfFavoriteOffers={favoriteOffers}
-      offersProps={mockOfferReviewsList}
-    />
+    <Provider store={store}>
+      <App
+        listOfFavoriteOffers={favoriteOffers}
+        offersProps={mockOfferReviewsList}
+      />
+    </Provider>
   </React.StrictMode>
 );
diff --git a/src/mocks/favoriteOffers.ts b/src/mocks/favoriteOffers.ts
@@ -12,7 +12,8 @@ export const favoriteOffers: CardProps[] = [
     isFavorite: false,
     location: {
       latitude: 52.3909553943508,
-      longitude: 4.85309666406198
+      longitude: 4.85309666406198,
+      zoom: 10
     }
   },
   {
@@ -26,7 +27,8 @@ export const favoriteOffers: CardProps[] = [
     isFavorite: false,
     location: {
       latitude: 52.3809553943508,
-      longitude: 4.939309666406198
+      longitude: 4.939309666406198,
+      zoom: 10
     }
   }
 ];
diff --git a/src/mocks/offers.ts b/src/mocks/offers.ts
@@ -1,7 +1,7 @@
 import { CardProps } from '../recources/Types';
 
 
-export const offers: CardProps[] = [
+export const mockOffers: CardProps[] = [
   {
     id: 1,
     title: 'Beautiful & luxurious apartment at great location',
@@ -13,7 +13,8 @@ export const offers: CardProps[] = [
     isFavorite: false,
     location: {
       latitude: 52.3909553943508,
-      longitude: 4.85309666406198
+      longitude: 4.85309666406198,
+      zoom: 10
     }
   },
   {
@@ -27,7 +28,8 @@ export const offers: CardProps[] = [
     isFavorite: true,
     location: {
       latitude: 52.3609553943508,
-      longitude: 4.85309666406198
+      longitude: 4.85309666406198,
+      zoom: 10
     }
   },
   {
@@ -41,7 +43,8 @@ export const offers: CardProps[] = [
     isFavorite: false,
     location: {
       latitude: 52.3909553943508,
-      longitude: 4.929309666406198
+      longitude: 4.929309666406198,
+      zoom: 10
     }
   },
   {
@@ -55,7 +58,8 @@ export const offers: CardProps[] = [
     isFavorite: false,
     location: {
       latitude: 52.3809553943508,
-      longitude: 4.939309666406198
+      longitude: 4.939309666406198,
+      zoom: 10
     }
   }
 ];
diff --git a/src/mocks/reviews.ts b/src/mocks/reviews.ts
@@ -2,7 +2,7 @@ import { ReviewProps } from '../components/Review/Review';
 import { OfferPageProps } from '../pages/OfferPage/OfferPage';
 import { CITIES } from '../recources/Cities';
 import { User } from '../recources/Types';
-import { offers } from '../mocks/offers';
+import { mockOffers } from '../mocks/offers';
 
 export const mockMaxUser: User = {
   userName: 'Max',
@@ -20,7 +20,7 @@ export const mockReviewList: ReviewProps[] = [mockMaxFirstReview];
 
 export const mockFirstOfferReview: OfferPageProps = {
   city: CITIES.Amsterdam,
-  proxyCards: offers,
+  proxyCards: mockOffers,
   numberOfReviews: 1,
   postedReviews: mockReviewList
 };

diff --git a/src/pages/MainPage/MainPage.tsx b/src/pages/MainPage/MainPage.tsx
@@ -1,19 +1,14 @@
 import { useState } from 'react';
 import OfferList from '../../components/OfferList/OfferList';
 import Map from '../../components/Map/Map';
-import { CITIES } from '../../recources/Cities';
 import { CardProps } from '../../recources/Types';
+import { useAppSelector } from '../../hooks/useAppSelector';
+import { CityList } from '../../components/CityList/CityList';
 
-type MainPageProps = {
-  numberOfOffers: number;
-  listOfOffers: CardProps[];
-};
-
-function MainPage({ numberOfOffers, listOfOffers }: MainPageProps): JSX.Element {
+function MainPage(): JSX.Element {
   const [activeCard, setActiveCard] = useState<CardProps | undefined>(undefined);
-
-  const slicedListOfOffers: CardProps[] = listOfOffers.slice(0, numberOfOffers);
-  const currrentCity = CITIES.Amsterdam;
+  const currrentCity = useAppSelector((state) => state.city);
+  const currentOffers = useAppSelector((state) => state.stateOffers);
 
   function onOfferHover(hoveredCard: CardProps | undefined): void {
     setActiveCard(hoveredCard);
@@ -54,45 +49,14 @@ function MainPage({ numberOfOffers, listOfOffers }: MainPageProps): 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 />
           </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">312 places to stay in Amsterdam</b>
+              <b className="places__found">{currentOffers.length} places to stay in {currrentCity.name}</b>
               <form className="places__sorting" action="#" method="get">
                 <span className="places__sorting-caption">Sort by</span>
                 <span className="places__sorting-type" tabIndex={0}>
@@ -108,11 +72,11 @@ function MainPage({ numberOfOffers, listOfOffers }: MainPageProps): JSX.Element
                   <li className="places__option" tabIndex={0}>Top rated first</li>
                 </ul>
               </form>
-              <OfferList listOfOffers={slicedListOfOffers} onOfferHover={onOfferHover}/>
+              <OfferList listOfOffers={currentOffers} onOfferHover={onOfferHover} />
             </section>
             <div className="cities__right-section">
               <section className="cities__map map">
-                <Map city={currrentCity} points={slicedListOfOffers} selectedPoint={activeCard}/>
+                <Map city={currrentCity} points={currentOffers} selectedPoint={activeCard} />
               </section>
             </div>
           </div>

diff --git a/src/store/actions.ts b/src/store/actions.ts
@@ -0,0 +1,6 @@
+import {createAction} from '@reduxjs/toolkit';
+import { City } from '../components/Map/Map';
+import { CardProps } from '../recources/Types';
+
+export const setCity = createAction<{city: City}>('setCity');
+export const setOffers = createAction<{offers: CardProps[]}>('setOffers');
diff --git a/src/store/index.ts b/src/store/index.ts
@@ -0,0 +1,4 @@
+import {configureStore} from '@reduxjs/toolkit';
+import {reducer} from './reducer';
+
+export const store = configureStore({reducer});
diff --git a/src/store/reducer.ts b/src/store/reducer.ts
@@ -0,0 +1,23 @@
+import {createReducer} from '@reduxjs/toolkit';
+import { CITIES } from '../recources/Cities';
+import { mockOffers } from '../mocks/offers';
+import { setCity, setOffers } from './actions';
+
+const startState = {
+  city: CITIES.Paris,
+  stateOffers: mockOffers
+};
+
+const reducer = createReducer(startState, (builder) => {
+  builder
+    .addCase(setCity, (state, action) => {
+      const {city} = action.payload;
+      state.city = city;
+    })
+    .addCase(setOffers, (state, action) => {
+      const {offers} = action.payload;
+      state.stateOffers = offers;
+    });
+});
+
+export {reducer};