📦 NEW: rightPrice frontend

website/pages/functions/rightPrice.js

@@ -0,0 +1,154 @@
+import { useState, useEffect, 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/toDoList.css';
+import '../../components/FunctionCard/FunctionCard.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 (
+        <div className="container-fluid">
+            {
+                (!isPlaying) ?
+                <div className="row justify-content-center">
+                    <div className="form-group text-center">
+                        <button onClick={handlePlaying} type="submit" className="btn btn-dark">Jouer</button>
+                    </div>
+                </div>
+                : (isLoadingProduct) ?
+                <div className="row justify-content-center">
+                    <Loader />
+                </div>
+                :
+                <Fragment>
+                    <div className="row justify-content-center">
+                        <div style={{ marginBottom: '20px' }} className="col-24 text-center">
+                            <h4>{productToGuess.name}</h4>
+                            <img src={productToGuess.image} alt={productToGuess.name} className="Product__image" />
+                        </div>
+                    </div>
+
+                    <div className="row justify-content-center">
+                        <div style={{ marginBottom: '25px' }} className="col-24">
+                            {((attemptsArray.length > 0) && attemptsArray[0].message === "Bravo, vous avez trouvé le juste prix !") ?
+                                    <div className="form-group text-center">
+                                        <button onClick={handlePlaying} type="submit" className="btn btn-dark">Rejouer ?</button>
+                                    </div>
+                                :
+                                    <form onSubmit={handleSubmit}>
+                                        <div className="text-center">
+                                            <input value={enteredPrice} onChange={handleChange} name="enteredPrice" id="enteredPrice" type="number" step="0.01" className="form-control" autoComplete="off" placeholder="Devinez le prix (prix à virgule possible!)" />
+                                        </div>
+
+                                        <div className="form-group text-center">
+                                            <button type="submit" className="btn btn-dark">Deviner</button>
+                                        </div>
+                                    </form>
+                            }
+                        </div>
+                    </div>
+
+                    <div style={{ marginBottom: '30px' }} className="row justify-content-center">
+                        {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 (
+                                <div key={index} className={`col-24 Price__result ${priceResultClass}`}>
+                                    # {attempt.numberTry} ({attempt.guessedPrice}) {message}
+                                </div> 
+                            );
+                        })}
+                    </div>
+                </Fragment>
+            }
+        </div>
+    );
+}
+
+const FunctionTabManager = (props) => {
+    return (
+        <FunctionTabs setSlideIndex={props.setSlideIndex} slideIndex={props.slideIndex}>
+            <div style={{ marginTop: '10px' }}>
+                <PlayRightPrice />
+            </div>
+            <div className="FunctionComponent__slide">
+                <FunctionArticle article={props.article} />
+            </div>
+            <div className="FunctionComponent__slide">
+                <FunctionComments functionId={props.id} />
+            </div>
+        </FunctionTabs>
+    );
+}
+
+const rightPrice = (props) => (
+    <FunctionPage 
+        FunctionTabManager={FunctionTabManager}
+        { ...props }
+        tabNames={["⚙️ Utilisation", "📝 Article", "📬 Commentaires"]} 
+    />
+);
+
+export async function getServerSideProps(context) {
+    return api.get(`/functions/rightPrice`)
+        .then((response) => ({ props: response.data }))
+        .catch(() => redirect(context, '/404'));
+}
+
+export default rightPrice;

website/public/css/pages/functions/rightPrice.css

@@ -0,0 +1,20 @@
+.Product__image {
+    max-width: 150px;
+}
+.Price__result {
+    height: 50px;
+    margin: 5px 0 10px 0;
+    display: flex;
+    align-items: center;
+    padding-left: 10px;
+    color: #fff;
+}
+.Price__result-success {
+    background-color: #28a745;
+}
+.Price__result-plus {
+    background-color: #dc3545;
+}
+.Price__result-moins {
+    background-color: #343a40;   
+}