135 lines
3.5 KiB
JavaScript
135 lines
3.5 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import AnimatedPage from "../components/AnimatedPage";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { postRatingData } from "../services/WordpressFetchData";
|
|
import { useUser } from "../hooks/useUser";
|
|
import Loading from "../components/animations/Loading";
|
|
|
|
export default function Rate() {
|
|
const [rating, setRating] = useState(undefined);
|
|
|
|
const { screensTranslations } = useUser();
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
setRating(undefined);
|
|
};
|
|
}, []);
|
|
|
|
const navigate = useNavigate();
|
|
|
|
if (!screensTranslations || !screensTranslations.game_results) return <Loading />;
|
|
const currentScreenTranslations = screensTranslations.rating;
|
|
|
|
function handleRatingChange(event) {
|
|
// setRating({ ...rating, note: event.target.value });
|
|
setRating({ ...rating, note: 2 });
|
|
}
|
|
|
|
function handleCommentChange(event) {
|
|
setRating({ ...rating, comment: event.target.value });
|
|
}
|
|
|
|
function handleSubmit() {
|
|
postRatingData(rating);
|
|
navigate("/Home");
|
|
}
|
|
|
|
return (
|
|
<AnimatedPage className='page-container page-container--rating'>
|
|
<div className='screen '>
|
|
<div className='screen__content'>
|
|
<h1 className='titling-construction '>{currentScreenTranslations.title}</h1>
|
|
<h2>{currentScreenTranslations.text}</h2>
|
|
<div className='rating'>
|
|
<div className='rating__items'>
|
|
<input
|
|
type='radio'
|
|
name='stars'
|
|
id='st5'
|
|
value='5'
|
|
onChange={handleRatingChange}
|
|
/>
|
|
<label htmlFor='st5'>
|
|
<div className='star-fill'></div>
|
|
|
|
<div
|
|
className='label-description'
|
|
data-content='Excellent'></div>
|
|
</label>
|
|
<input
|
|
type='radio'
|
|
name='stars'
|
|
id='st4'
|
|
value='4'
|
|
onChange={handleRatingChange}
|
|
/>
|
|
<label htmlFor='st4'>
|
|
<div className='star-fill'></div>
|
|
|
|
<div
|
|
className='label-description'
|
|
data-content='Good'></div>
|
|
</label>
|
|
<input
|
|
type='radio'
|
|
name='stars'
|
|
id='st3'
|
|
value='3'
|
|
onChange={handleRatingChange}
|
|
/>
|
|
<label htmlFor='st3'>
|
|
<div className='star-fill'></div>
|
|
|
|
<div
|
|
className='label-description'
|
|
data-content='OK'></div>
|
|
</label>
|
|
<input
|
|
type='radio'
|
|
name='stars'
|
|
id='st2'
|
|
value='2'
|
|
onChange={handleRatingChange}
|
|
/>
|
|
<label htmlFor='st2'>
|
|
<div className='star-fill'></div>
|
|
|
|
<div
|
|
className='label-description'
|
|
data-content='Bad'></div>
|
|
</label>
|
|
<input
|
|
type='radio'
|
|
name='stars'
|
|
id='st1'
|
|
value='1'
|
|
onChange={handleRatingChange}
|
|
/>
|
|
<label htmlFor='st1'>
|
|
<div className='star-fill'></div>
|
|
<div
|
|
className='label-description'
|
|
data-content='Terrible'></div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<textarea
|
|
onChange={handleCommentChange}
|
|
placeholder={currentScreenTranslations.placeholder}
|
|
name=''
|
|
id=''
|
|
cols='10'
|
|
rows='2'></textarea>
|
|
<button
|
|
disabled={!rating}
|
|
title={!rating ? "Attribuer une note!" : "Retour à l'acceuil!"}
|
|
className='cta cta--construction cta--round cta--button-icon cta--back'
|
|
onClick={handleSubmit}></button>
|
|
</div>
|
|
</div>
|
|
</AnimatedPage>
|
|
);
|
|
}
|