import { useState, Fragment } 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;