import { useState } from 'react' import redirect from '../../utils/redirect' import FunctionPage from '../../components/FunctionPage/FunctionPage' import FunctionTabs from '../../components/FunctionPage/FunctionTabs' import FunctionArticle from '../../components/FunctionPage/FunctionArticle' import FunctionComments from '../../components/FunctionPage/FunctionComments/FunctionComments' import Loader from '../../components/Loader' import api from '../../utils/api' import '../../public/css/pages/FunctionComponent.css' import '../../public/css/pages/functions/rightPrice.css' const PlayRightPrice = () => { const [isPlaying, setIsPlaying] = useState(false) const [productToGuess, setProductToGuess] = useState({}) const [isLoadingProduct, setIsLoadingProduct] = useState(false) const [enteredPrice, setEnteredPrice] = useState('') const [attemptsArray, setAttemptsArray] = useState([]) const handlePlaying = () => { setIsPlaying(true) setAttemptsArray([]) fetchRandomAmazonProduct() } const fetchRandomAmazonProduct = async () => { setIsLoadingProduct(true) const { data } = await api.post('/functions/rightPrice') setProductToGuess(data) setIsLoadingProduct(false) } const handleChange = event => { setEnteredPrice(event.target.value) } const handleSubmit = async event => { event.preventDefault() const objectTry = {} const guessedPrice = Number(enteredPrice.replace(',', '.').replace(' ', '')) if (!isNaN(guessedPrice)) { objectTry.guessedPrice = guessedPrice objectTry.numberTry = attemptsArray.length + 1 if (guessedPrice > productToGuess.price) { objectTry.message = "C'est moins !" } else if (guessedPrice < productToGuess.price) { objectTry.message = "C'est plus !" } else { objectTry.message = 'Bravo, vous avez trouvé le juste prix !' } setAttemptsArray([objectTry, ...attemptsArray]) } setEnteredPrice('') } return (
{!isPlaying ? (
) : isLoadingProduct ? (
) : ( <>

{productToGuess.name}

{productToGuess.name}
{attemptsArray.length > 0 && attemptsArray[0].message === 'Bravo, vous avez trouvé le juste prix !' ? (
) : (
)}
{attemptsArray.map((attempt, index) => { const { message } = attempt let priceResultClass if (message === "C'est moins !") { priceResultClass = 'Price__result-moins' } else if (message === "C'est plus !") { priceResultClass = 'Price__result-plus' } else { priceResultClass = 'Price__result-success' } return (
# {attempt.numberTry} ({attempt.guessedPrice}) {message}
) })}
)}
) } const FunctionTabManager = props => { return (
) } const rightPrice = props => ( ) export async function getServerSideProps (context) { return api .get('/functions/rightPrice') .then(response => ({ props: response.data })) .catch(() => redirect(context, '/404')) } export default rightPrice