101 lines
2.9 KiB
JavaScript
101 lines
2.9 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
import axios from "axios";
|
|
import './City.scss'
|
|
|
|
const City = (props) => {
|
|
const route = props.getValue;
|
|
const setUserData = props.setUserData
|
|
const second = useNavigate();
|
|
|
|
const [cityOptions, setCityOptions] = useState([]);
|
|
const [filteredCityOptions, setFilteredCityOptions] = useState([]);
|
|
const [selectedCity, setSelectedCity] = useState('');
|
|
const [buttonsVisible, setButtonsVisible] = useState(false);
|
|
|
|
const cityHandler = (e) => {
|
|
setSelectedCity(e.target.value);
|
|
};
|
|
|
|
const options = {
|
|
method: 'GET',
|
|
url: 'https://easytravel.zetcraft.ru/v1/GetAllCity',
|
|
};
|
|
|
|
useEffect(() => {
|
|
axios.request(options)
|
|
.then(function (response) {
|
|
console.log(response.data);
|
|
setCityOptions(response.data);
|
|
setFilteredCityOptions(response.data);
|
|
})
|
|
.catch(function (error) {
|
|
console.error(error);
|
|
});
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const filteredOptions = cityOptions.filter(option =>
|
|
option.name.toLowerCase().includes(selectedCity.toLowerCase())
|
|
);
|
|
setFilteredCityOptions(filteredOptions);
|
|
|
|
setTimeout(() => {
|
|
setButtonsVisible(selectedCity !== '');
|
|
}, 300);
|
|
}, [selectedCity, cityOptions]);
|
|
|
|
useEffect(() => {
|
|
const filteredOptions = cityOptions.filter(option =>
|
|
option.name.toLowerCase().includes(selectedCity.toLowerCase())
|
|
);
|
|
setFilteredCityOptions(filteredOptions);
|
|
}, [selectedCity, cityOptions]);
|
|
|
|
return (
|
|
<div className="container container_space_around">
|
|
<div className="city">
|
|
<div className="city__plannet">
|
|
<img src='./image 2.png' alt="#" draggable="false" className="city__plannet_img"/>
|
|
</div>
|
|
<select onChange={e => cityHandler(e)} placeholder="Выберите город..." value={selectedCity} id="city" name="city" className="city__choise">
|
|
<option value="" className="city__choise_option">Выберите город...</option>
|
|
{filteredCityOptions.map(option => (
|
|
<option key={option.id} value={option.name} style={{
|
|
maxWidth: 200,
|
|
}}>{option.name}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
{buttonsVisible ? (
|
|
<div className="button-container">
|
|
<button
|
|
className="animated-button"
|
|
onClick={() => {
|
|
second('/second')
|
|
setUserData({selectedCity: selectedCity});
|
|
console.log(selectedCity);
|
|
}}
|
|
>
|
|
Я в этом городе
|
|
</button>
|
|
<button
|
|
className="city__ticket"
|
|
onClick={() => window.open('https://www.aviasales.ru/?marker=15468.ydof241309826304&yclid=18373991699987824639¶ms=TGK1')}
|
|
>
|
|
<img
|
|
className="city__ticket_img"
|
|
src="./icon200.png"
|
|
alt="#"
|
|
/>
|
|
Купить билет
|
|
</button>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default City;
|