From e86568b972dfd43ae36c8d1f125e20e89d314a78 Mon Sep 17 00:00:00 2001 From: mfatov Date: Fri, 27 Dec 2024 21:49:48 +0300 Subject: [PATCH] done commit --- src/components/App/App.tsx | 6 ++-- src/components/CityList/CityList.tsx | 29 +++++++++++++++ src/components/Map/Map.tsx | 3 +- src/hooks/useAppSelector.ts | 8 +++++ src/hooks/useMap.tsx | 6 ++-- src/index.tsx | 16 ++++----- src/mocks/favoriteOffers.ts | 6 ++-- src/mocks/offers.ts | 14 +++++--- src/mocks/reviews.ts | 4 +-- src/pages/MainPage/MainPage.tsx | 54 +++++----------------------- src/store/actions.ts | 6 ++++ src/store/index.ts | 4 +++ src/store/reducer.ts | 23 ++++++++++++ 13 files changed, 110 insertions(+), 69 deletions(-) create mode 100644 src/components/CityList/CityList.tsx create mode 100644 src/hooks/useAppSelector.ts create mode 100644 src/store/actions.ts create mode 100644 src/store/index.ts create mode 100644 src/store/reducer.ts diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx index 929d48a..fa5ff3e 100644 --- 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 ( - } /> + } /> } /> } /> { + const currentCity = useAppSelector((state) => state.city); + const dispatch = useAppDispatch(); + + return ( + + ); +}; diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx index 54bbe5a..22f12fe 100644 --- 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
; } diff --git a/src/hooks/useAppSelector.ts b/src/hooks/useAppSelector.ts new file mode 100644 index 0000000..fc141d6 --- /dev/null +++ b/src/hooks/useAppSelector.ts @@ -0,0 +1,8 @@ +import {TypedUseSelectorHook, useDispatch, useSelector} from 'react-redux'; +import { store } from '../store'; + +export type State = ReturnType; +export type AppDispatch = typeof store.dispatch; + +export const useAppDispatch = () => useDispatch(); +export const useAppSelector: TypedUseSelectorHook = useSelector; diff --git a/src/hooks/useMap.tsx b/src/hooks/useMap.tsx index 885b279..46085f7 100644 --- 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 index 8406281..150fe24 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,10 +1,10 @@ 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 @@ -12,11 +12,11 @@ const root = ReactDOM.createRoot( root.render( - + + + ); diff --git a/src/mocks/favoriteOffers.ts b/src/mocks/favoriteOffers.ts index 1bbf9d3..885b6fa 100644 --- 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 index 34c8c8a..aa6cdb5 100644 --- 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 index 7b5361a..58b8ce0 100644 --- 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 index 91c329f..ac25efb 100644 --- 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(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

Cities

Places

- 312 places to stay in Amsterdam + {currentOffers.length} places to stay in {currrentCity.name}
Sort by @@ -108,11 +72,11 @@ function MainPage({ numberOfOffers, listOfOffers }: MainPageProps): JSX.Element
  • Top rated first
    • - +
    - +
    diff --git a/src/store/actions.ts b/src/store/actions.ts new file mode 100644 index 0000000..22afb38 --- /dev/null +++ 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 new file mode 100644 index 0000000..81914d9 --- /dev/null +++ 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 new file mode 100644 index 0000000..6fd0fa4 --- /dev/null +++ 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};