Merge branch 'develop' into feature/carWashContacts

web-Nearest-car-wash · Feb 4, 2024 · 01d119c · 01d119c
2 parents 28464de + f12a5c0
commit 01d119c
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 29 deletions.
diff --git 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
@@ -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() {
 						<Placemark
 							key={carWash.id}
 							geometry={[carWash.latitude, carWash.longitude]}
-							onClick={() => 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 !== 'Москва' && (
+					<p
+						style={{
+							position: 'absolute',
+							left: '100px',
+							top: '10px',
+							zIndex: 100,
+							margin: 0,
+							maxWidth: '800px',
+							color: '#5568d0',
+							background: '#cbd9d8',
+							boxShadow: '-2px 2px 13px 13px #cbd9d8',
+							fontSize: '16px',
+							fontWeight: 600,
+							lineHeight: '21px',
+						}}
+					>
+						Вы находитесь не в Москве либо не удалось получить данные о вашей
+						геолокации. К сожаленью наш сервис работает пока только на
+						территории Москвы, поэтому для Вас установлена геолокация по
+						умолчанию.
+					</p>
+				)}
 			</Map>
 		)
 	);

diff --git a/src/pages/HomePage/HomePage.jsx b/src/pages/HomePage/HomePage.jsx
@@ -1,23 +1,20 @@
-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';
 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 (
 		<section className={styles.page}>
 			<div className={styles.sidebar}>

diff --git 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
@@ -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) {