diff --git a/.github/workflows/deploy_workflow.yml b/.github/workflows/deploy_workflow.yml index c25d9c2..3402e95 100644 --- a/.github/workflows/deploy_workflow.yml +++ b/.github/workflows/deploy_workflow.yml @@ -2,8 +2,7 @@ name: deploy on: push: - branches: [ "develop" ] - + branches: ['develop'] jobs: build_and_push_to_docker_hub: diff --git a/src/components/Map/YMap.jsx b/src/components/Map/YMap.jsx index 256918f..0efa6ec 100644 --- a/src/components/Map/YMap.jsx +++ b/src/components/Map/YMap.jsx @@ -6,9 +6,11 @@ import { ZoomControl, } from '@pbe/react-yandex-maps'; import { useGeolocated } from 'react-geolocated'; -import { memo, useState } from 'react'; +import { memo, useEffect, useMemo, useState } from 'react'; +import { useNavigate } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; import { + fetchListCarWash, selectCarWashes, setCurrentCarWash, setCurrentCarWashOnMap, @@ -24,6 +26,7 @@ function YMap() { userDecisionTimeout: 5000, }); + const navigate = useNavigate(); const [geoData, setGeoData] = useState(null); const dispatch = useDispatch(); const { listCarWashes, loading, currentCarWashOnMap } = @@ -40,10 +43,17 @@ function YMap() { }); }; - const coordinates = - geoData?.GeocoderMetaData.text === 'Москва' - ? coords - : { latitude: 55.76, longitude: 37.64 }; + const coordinates = useMemo( + () => + geoData?.GeocoderMetaData.text === 'Москва' + ? { latitude: coords.latitude, longitude: coords.longitude } + : { latitude: 55.756379, longitude: 37.623309 }, + [coords, geoData?.GeocoderMetaData.text] + ); + + useEffect(() => { + dispatch(fetchListCarWash(coordinates)); + }, [dispatch, coordinates]); return ( coordinates && ( @@ -52,7 +62,7 @@ function YMap() { center: [coordinates.latitude, coordinates.longitude], zoom: 13, }} - style={{ width: '100%', height: '100%' }} + style={{ width: '100%', height: '100%', position: 'relative' }} onLoad={(ymaps) => getGeolocation(ymaps)} modules={['geolocation']} > @@ -66,13 +76,18 @@ function YMap() { console.log(carWash.name)} + onClick={() => { + navigate(`/carwashes/${carWash.id}`); + }} onMouseEnter={() => { dispatch( setCurrentCarWash({ id: carWash.id, name: carWash.name }) ); dispatch( - setCurrentCarWashOnMap({ id: carWash.id, name: carWash.name }) + setCurrentCarWashOnMap({ + id: carWash.id, + name: carWash.name, + }) ); }} options={{ @@ -85,6 +100,29 @@ function YMap() { }} /> ))} + {geoData?.GeocoderMetaData.text !== 'Москва' && ( +

+ Вы находитесь не в Москве либо не удалось получить данные о вашей + геолокации. К сожаленью наш сервис работает пока только на + территории Москвы, поэтому для Вас установлена геолокация по + умолчанию. +

+ )} ) ); diff --git a/src/pages/HomePage/HomePage.jsx b/src/pages/HomePage/HomePage.jsx index 81a43e2..154e2dc 100644 --- a/src/pages/HomePage/HomePage.jsx +++ b/src/pages/HomePage/HomePage.jsx @@ -1,5 +1,5 @@ -import { useEffect, useState } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; +import { useState } from 'react'; +import { useSelector, useDispatch } from 'react-redux'; import { Link } from 'react-router-dom'; import styles from './HomePage.module.css'; import YMap from '../../components/Map/YMap'; @@ -7,17 +7,14 @@ import FilterButton from '../../components/UI/FilterButton/FilterButton'; import Search from '../../components/UI/Search/Search'; import CardCarWash from '../../components/CardCarWash/CardCarWash'; import PopupWithFilters from '../../components/PopupWithFilters/PopupWithFilters'; -import { - fetchListCarWash, - selectCarWashes, -} from '../../store/carWashes/carWashes-slice'; +import { selectCarWashes } from '../../store/carWashes/carWashes-slice'; import { handleOpen } from '../../store/filters/filters-slice'; import Loader from '../../components/UI/Loader/Loader'; function HomePage() { - const dispatch = useDispatch(); const { listCarWashes, loading } = useSelector(selectCarWashes); const [query, setQuery] = useState(''); + const dispatch = useDispatch(); const handleOnChange = (value) => { setQuery(value); @@ -27,10 +24,6 @@ function HomePage() { setQuery(''); }; - useEffect(() => { - dispatch(fetchListCarWash()); - }, [dispatch]); - return (
diff --git a/src/store/carWashes/carWashes-slice.js b/src/store/carWashes/carWashes-slice.js index 174376d..627506e 100644 --- a/src/store/carWashes/carWashes-slice.js +++ b/src/store/carWashes/carWashes-slice.js @@ -14,9 +14,9 @@ export const sliceName = 'carWashes'; export const fetchListCarWash = createAsyncThunk( `${sliceName}/fetchListCarWash`, - async (_, { fulfillWithValue, rejectWithValue }) => { + async ({ latitude, longitude }, { fulfillWithValue, rejectWithValue }) => { try { - const data = await api.getListCarWash(); + const data = await api.getListCarWash({ latitude, longitude }); return fulfillWithValue({ ...data }); } catch (err) { return rejectWithValue(err); diff --git a/src/utils/api.js b/src/utils/api.js index c50b089..d2d659d 100644 --- a/src/utils/api.js +++ b/src/utils/api.js @@ -14,12 +14,15 @@ export class Api { return res.ok ? res.json() : res.json().then((err) => Promise.reject(err)); } - getListCarWash() { - return fetch(`${this.#baseurl}/api/carwashes/?limit=50`, { - headers: { - ...this.#headers, - }, - }).then(this.#onResponse); + getListCarWash({ latitude, longitude }) { + return fetch( + `${this.#baseurl}/api/carwashes/?limit=50&latitude=${latitude}&longitude=${longitude}`, + { + headers: { + ...this.#headers, + }, + } + ).then(this.#onResponse); } getCarWash(id) {