63 lines
1.5 KiB
JavaScript
63 lines
1.5 KiB
JavaScript
import React, {useState, useEffect} from 'react';
|
|
import Start from './components/Start/Start';
|
|
import Second from './components/Second/Second';
|
|
import Tinder from './components/Tinder/Tinder';
|
|
import Map from './components/Map/Map';
|
|
import City from './components/City/City';
|
|
import axios from 'axios';
|
|
import './App.css';
|
|
|
|
function App() {
|
|
|
|
const [buttonValue, setButtonValue] = useState("");
|
|
const [isHidden, setIsHidden] = useState(false);
|
|
const [cardInfo, setCardInfo] = useState([]);
|
|
|
|
const handleButtonValue = (value) => {
|
|
setIsHidden(true);
|
|
setTimeout(() => {
|
|
setIsHidden(false);
|
|
setButtonValue(value);
|
|
}, 300);
|
|
};
|
|
|
|
useEffect(() => {
|
|
const fetchData = () => {
|
|
axios.get('https://easytravel.zetcraft.ru/v1/GetAllCards')
|
|
.then(response => {
|
|
setCardInfo(response.data);
|
|
console.log(cardInfo.length);
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching data:', error);
|
|
});
|
|
}
|
|
fetchData();
|
|
}, []);
|
|
|
|
let content = null;
|
|
switch (buttonValue) {
|
|
case '/second':
|
|
content = <Second getValue={handleButtonValue}/>
|
|
break;
|
|
case '/tinder':
|
|
content = <Tinder getValue={handleButtonValue} cardInfo={cardInfo}/>
|
|
break;
|
|
case '/map':
|
|
content = <Map/>
|
|
break;
|
|
case '/city':
|
|
content = <City getValue={handleButtonValue}/>
|
|
break;
|
|
default: content = <Start getValue={handleButtonValue}/>
|
|
}
|
|
|
|
return (
|
|
<div className={`App ${isHidden ? 'hidden' : ''}`}>
|
|
{content}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|