feat: add docker support and update deps
This commit is contained in:
divlo
@ -23,64 +23,66 @@ const Admin = props => {
|
||||
/>
|
||||
|
||||
{/* Création d'une fonction */}
|
||||
{isOpen ? (
|
||||
<Modal toggleModal={toggleModal}>
|
||||
<div className='Admin__Modal__container container-fluid'>
|
||||
<div className='Admin__Modal__row row'>
|
||||
<div className='col-24'>
|
||||
<div className='Admin__Modal-top-container row'>
|
||||
<div className='col-24'>
|
||||
<span
|
||||
onClick={toggleModal}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
position: 'absolute',
|
||||
left: 0
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faTimes}
|
||||
style={{ width: '1.5rem', color: 'red' }}
|
||||
/>
|
||||
</span>
|
||||
<h2 className='text-center'>Crée une nouvelle fonction</h2>
|
||||
{isOpen
|
||||
? (
|
||||
<Modal toggleModal={toggleModal}>
|
||||
<div className='Admin__Modal__container container-fluid'>
|
||||
<div className='Admin__Modal__row row'>
|
||||
<div className='col-24'>
|
||||
<div className='Admin__Modal-top-container row'>
|
||||
<div className='col-24'>
|
||||
<span
|
||||
onClick={toggleModal}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
position: 'absolute',
|
||||
left: 0
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faTimes}
|
||||
style={{ width: '1.5rem', color: 'red' }}
|
||||
/>
|
||||
</span>
|
||||
<h2 className='text-center'>Crée une nouvelle fonction</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='col-24'>
|
||||
<AddEditFunction
|
||||
defaultInputState={{ type: 'form' }}
|
||||
{...props}
|
||||
/>
|
||||
<div className='col-24'>
|
||||
<AddEditFunction
|
||||
defaultInputState={{ type: 'form' }}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
) : (
|
||||
<FunctionsList isAdmin token={props.user.token}>
|
||||
<div className='col-24'>
|
||||
<h1 className='Functions__title'>Administration</h1>
|
||||
<button
|
||||
onClick={toggleModal}
|
||||
style={{ margin: '0 0 40px 0' }}
|
||||
className='btn btn-dark'
|
||||
>
|
||||
Crée une nouvelle fonction
|
||||
</button>
|
||||
<Link href='/admin/manageCategories'>
|
||||
<button style={{ margin: '0 0 0 20px' }} className='btn btn-dark'>
|
||||
Gérer les catégories
|
||||
</Modal>
|
||||
)
|
||||
: (
|
||||
<FunctionsList isAdmin token={props.user.token}>
|
||||
<div className='col-24'>
|
||||
<h1 className='Functions__title'>Administration</h1>
|
||||
<button
|
||||
onClick={toggleModal}
|
||||
style={{ margin: '0 0 40px 0' }}
|
||||
className='btn btn-dark'
|
||||
>
|
||||
Crée une nouvelle fonction
|
||||
</button>
|
||||
</Link>
|
||||
<Link href='/admin/manageQuotes'>
|
||||
<button style={{ margin: '0 0 0 20px' }} className='btn btn-dark'>
|
||||
Gérer les citations
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</FunctionsList>
|
||||
)}
|
||||
<Link href='/admin/manageCategories'>
|
||||
<button style={{ margin: '0 0 0 20px' }} className='btn btn-dark'>
|
||||
Gérer les catégories
|
||||
</button>
|
||||
</Link>
|
||||
<Link href='/admin/manageQuotes'>
|
||||
<button style={{ margin: '0 0 0 20px' }} className='btn btn-dark'>
|
||||
Gérer les citations
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</FunctionsList>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -159,119 +159,121 @@ const manageCategories = props => {
|
||||
description="Page d'administration de FunctionProject. Gérer les catégories."
|
||||
/>
|
||||
|
||||
{isOpen ? (
|
||||
<Modal>
|
||||
<AddEditCategory
|
||||
handleToggleModal={toggleModal}
|
||||
defaultInputState={defaultInputState}
|
||||
{...props}
|
||||
isEditing={isEditing}
|
||||
/>
|
||||
</Modal>
|
||||
) : (
|
||||
<div className='container-fluid text-center'>
|
||||
<div className='row justify-content-center'>
|
||||
<div className='col-24'>
|
||||
<h1>Gérer les catégories</h1>
|
||||
<button
|
||||
onClick={() => {
|
||||
setDefaultInputState(defaultCategoryState)
|
||||
toggleModal()
|
||||
setIsEditing(false)
|
||||
}}
|
||||
style={{ margin: '0 0 40px 0' }}
|
||||
className='btn btn-dark'
|
||||
>
|
||||
Ajouter une catégorie
|
||||
</button>
|
||||
{isOpen
|
||||
? (
|
||||
<Modal>
|
||||
<AddEditCategory
|
||||
handleToggleModal={toggleModal}
|
||||
defaultInputState={defaultInputState}
|
||||
{...props}
|
||||
isEditing={isEditing}
|
||||
/>
|
||||
</Modal>
|
||||
)
|
||||
: (
|
||||
<div className='container-fluid text-center'>
|
||||
<div className='row justify-content-center'>
|
||||
<div className='col-24'>
|
||||
<h1>Gérer les catégories</h1>
|
||||
<button
|
||||
onClick={() => {
|
||||
setDefaultInputState(defaultCategoryState)
|
||||
toggleModal()
|
||||
setIsEditing(false)
|
||||
}}
|
||||
style={{ margin: '0 0 40px 0' }}
|
||||
className='btn btn-dark'
|
||||
>
|
||||
Ajouter une catégorie
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='row justify-content-center'>
|
||||
<div className='container-fluid'>
|
||||
<div className='col-24 table-column'>
|
||||
<table className='table'>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className='table-row' scope='col'>
|
||||
id
|
||||
</th>
|
||||
<th className='table-row' scope='col'>
|
||||
name
|
||||
</th>
|
||||
<th className='table-row' scope='col'>
|
||||
color
|
||||
</th>
|
||||
<th className='table-row' scope='col'>
|
||||
createdAt
|
||||
</th>
|
||||
<th className='table-row' scope='col'>
|
||||
updatedAt
|
||||
</th>
|
||||
<th className='table-row' scope='col'>
|
||||
Modifier
|
||||
</th>
|
||||
<th className='table-row' scope='col'>
|
||||
Supprimer
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{categories.map(category => {
|
||||
return (
|
||||
<tr
|
||||
key={category.id}
|
||||
style={{ backgroundColor: category.color }}
|
||||
>
|
||||
<td className='table-row'>{category.id}</td>
|
||||
<td className='table-row'>{category.name}</td>
|
||||
<td className='table-row'>{category.color}</td>
|
||||
<td className='table-row'>
|
||||
{date.format(
|
||||
new Date(category.createdAt),
|
||||
'DD/MM/YYYY à HH:mm',
|
||||
false
|
||||
)}
|
||||
</td>
|
||||
<td className='table-row'>
|
||||
{date.format(
|
||||
new Date(category.updatedAt),
|
||||
'DD/MM/YYYY à HH:mm',
|
||||
false
|
||||
)}
|
||||
</td>
|
||||
<td
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() =>
|
||||
handleEditCategory({
|
||||
name: category.name,
|
||||
color: category.color,
|
||||
id: category.id
|
||||
})}
|
||||
<div className='row justify-content-center'>
|
||||
<div className='container-fluid'>
|
||||
<div className='col-24 table-column'>
|
||||
<table className='table'>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className='table-row' scope='col'>
|
||||
id
|
||||
</th>
|
||||
<th className='table-row' scope='col'>
|
||||
name
|
||||
</th>
|
||||
<th className='table-row' scope='col'>
|
||||
color
|
||||
</th>
|
||||
<th className='table-row' scope='col'>
|
||||
createdAt
|
||||
</th>
|
||||
<th className='table-row' scope='col'>
|
||||
updatedAt
|
||||
</th>
|
||||
<th className='table-row' scope='col'>
|
||||
Modifier
|
||||
</th>
|
||||
<th className='table-row' scope='col'>
|
||||
Supprimer
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{categories.map(category => {
|
||||
return (
|
||||
<tr
|
||||
key={category.id}
|
||||
style={{ backgroundColor: category.color }}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faPen}
|
||||
style={{ width: '1.5rem' }}
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => handleRemoveCategory(category.id)}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faTrash}
|
||||
style={{ width: '1.5rem' }}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
<td className='table-row'>{category.id}</td>
|
||||
<td className='table-row'>{category.name}</td>
|
||||
<td className='table-row'>{category.color}</td>
|
||||
<td className='table-row'>
|
||||
{date.format(
|
||||
new Date(category.createdAt),
|
||||
'DD/MM/YYYY à HH:mm',
|
||||
false
|
||||
)}
|
||||
</td>
|
||||
<td className='table-row'>
|
||||
{date.format(
|
||||
new Date(category.updatedAt),
|
||||
'DD/MM/YYYY à HH:mm',
|
||||
false
|
||||
)}
|
||||
</td>
|
||||
<td
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() =>
|
||||
handleEditCategory({
|
||||
name: category.name,
|
||||
color: category.color,
|
||||
id: category.id
|
||||
})}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faPen}
|
||||
style={{ width: '1.5rem' }}
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => handleRemoveCategory(category.id)}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faTrash}
|
||||
style={{ width: '1.5rem' }}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -266,144 +266,146 @@ const LinksList = ({
|
||||
</div>
|
||||
<div className='row justify-content-center'>
|
||||
<div className='container-fluid'>
|
||||
{!isEditing ? (
|
||||
<div className='col-24 table-column'>
|
||||
<table className='table' style={{ marginBottom: '40px' }}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className='table-row' scope='col'>
|
||||
Liens
|
||||
</th>
|
||||
<th className='table-row' scope='col'>
|
||||
Nom
|
||||
</th>
|
||||
<th className='table-row' scope='col'>
|
||||
Compteur de clics
|
||||
</th>
|
||||
<th className='table-row' scope='col'>
|
||||
Modifier
|
||||
</th>
|
||||
<th className='table-row' scope='col'>
|
||||
Supprimer
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{linksData.rows.map((link, index) => {
|
||||
const linkJSX = (
|
||||
<>
|
||||
<td className='table-row'>
|
||||
<a href={link.url}>{link.url}</a>
|
||||
</td>
|
||||
<td className='table-row'>
|
||||
<a href={`https://s.divlo.fr/${link.shortcut}`}>
|
||||
{link.shortcut}
|
||||
</a>
|
||||
</td>
|
||||
<td className='table-row'>{link.count}</td>
|
||||
<td
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => handleEditLink(link)}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faPen}
|
||||
style={{ width: '1.5rem' }}
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => handleRemoveLink(link.id)}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faTrash}
|
||||
style={{ width: '1.5rem' }}
|
||||
/>
|
||||
</td>
|
||||
</>
|
||||
)
|
||||
// Si c'est le dernier élément
|
||||
if (linksData.rows.length === index + 1) {
|
||||
return (
|
||||
<tr key={index} ref={lastLinkRef}>
|
||||
{linkJSX}
|
||||
</tr>
|
||||
{!isEditing
|
||||
? (
|
||||
<div className='col-24 table-column'>
|
||||
<table className='table' style={{ marginBottom: '40px' }}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className='table-row' scope='col'>
|
||||
Liens
|
||||
</th>
|
||||
<th className='table-row' scope='col'>
|
||||
Nom
|
||||
</th>
|
||||
<th className='table-row' scope='col'>
|
||||
Compteur de clics
|
||||
</th>
|
||||
<th className='table-row' scope='col'>
|
||||
Modifier
|
||||
</th>
|
||||
<th className='table-row' scope='col'>
|
||||
Supprimer
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{linksData.rows.map((link, index) => {
|
||||
const linkJSX = (
|
||||
<>
|
||||
<td className='table-row'>
|
||||
<a href={link.url}>{link.url}</a>
|
||||
</td>
|
||||
<td className='table-row'>
|
||||
<a href={`https://s.divlo.fr/${link.shortcut}`}>
|
||||
{link.shortcut}
|
||||
</a>
|
||||
</td>
|
||||
<td className='table-row'>{link.count}</td>
|
||||
<td
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => handleEditLink(link)}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faPen}
|
||||
style={{ width: '1.5rem' }}
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => handleRemoveLink(link.id)}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faTrash}
|
||||
style={{ width: '1.5rem' }}
|
||||
/>
|
||||
</td>
|
||||
</>
|
||||
)
|
||||
}
|
||||
return <tr key={index}>{linkJSX}</tr>
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<Modal>
|
||||
<div className='Admin__Modal__container container-fluid'>
|
||||
<div className='Admin__Modal__row row'>
|
||||
<div className='col-24'>
|
||||
<div className='Admin__Modal-top-container row'>
|
||||
<div className='col-24'>
|
||||
<span
|
||||
onClick={toggleModal}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
position: 'absolute',
|
||||
left: 0
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faTimes}
|
||||
style={{ width: '1.5rem', color: 'red' }}
|
||||
/>
|
||||
</span>
|
||||
// Si c'est le dernier élément
|
||||
if (linksData.rows.length === index + 1) {
|
||||
return (
|
||||
<tr key={index} ref={lastLinkRef}>
|
||||
{linkJSX}
|
||||
</tr>
|
||||
)
|
||||
}
|
||||
return <tr key={index}>{linkJSX}</tr>
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
: (
|
||||
<Modal>
|
||||
<div className='Admin__Modal__container container-fluid'>
|
||||
<div className='Admin__Modal__row row'>
|
||||
<div className='col-24'>
|
||||
<div className='Admin__Modal-top-container row'>
|
||||
<div className='col-24'>
|
||||
<span
|
||||
onClick={toggleModal}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
position: 'absolute',
|
||||
left: 0
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faTimes}
|
||||
style={{ width: '1.5rem', color: 'red' }}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='col-24'>
|
||||
<form onSubmit={handleEditSubmit}>
|
||||
<div className='form-group'>
|
||||
<label className='form-label' htmlFor='url'>
|
||||
Entrez le lien à raccourcir :
|
||||
</label>
|
||||
<input
|
||||
value={defaultInputState.url}
|
||||
onChange={handleChange}
|
||||
type='text'
|
||||
name='url'
|
||||
id='url'
|
||||
placeholder='(e.g : https://divlo.fr)'
|
||||
className='form-control'
|
||||
/>
|
||||
</div>
|
||||
<div className='col-24'>
|
||||
<form onSubmit={handleEditSubmit}>
|
||||
<div className='form-group'>
|
||||
<label className='form-label' htmlFor='url'>
|
||||
Entrez le lien à raccourcir :
|
||||
</label>
|
||||
<input
|
||||
value={defaultInputState.url}
|
||||
onChange={handleChange}
|
||||
type='text'
|
||||
name='url'
|
||||
id='url'
|
||||
placeholder='(e.g : https://divlo.fr)'
|
||||
className='form-control'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='form-group'>
|
||||
<label className='form-label' htmlFor='shortcutName'>
|
||||
Entrez le nom du raccourci :
|
||||
</label>
|
||||
<input
|
||||
value={defaultInputState.shortcutName}
|
||||
onChange={handleChange}
|
||||
type='text'
|
||||
name='shortcutName'
|
||||
id='shortcutName'
|
||||
placeholder='(e.g : divlo)'
|
||||
className='form-control'
|
||||
/>
|
||||
</div>
|
||||
<div className='form-group'>
|
||||
<label className='form-label' htmlFor='shortcutName'>
|
||||
Entrez le nom du raccourci :
|
||||
</label>
|
||||
<input
|
||||
value={defaultInputState.shortcutName}
|
||||
onChange={handleChange}
|
||||
type='text'
|
||||
name='shortcutName'
|
||||
id='shortcutName'
|
||||
placeholder='(e.g : divlo)'
|
||||
className='form-control'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='form-group text-center'>
|
||||
<button type='submit' className='btn btn-dark'>
|
||||
Envoyer
|
||||
</button>
|
||||
<div className='form-group text-center'>
|
||||
<button type='submit' className='btn btn-dark'>
|
||||
Envoyer
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div className='form-result text-center'>
|
||||
{isLoading ? <Loader /> : htmlParser(message)}
|
||||
</div>
|
||||
</form>
|
||||
<div className='form-result text-center'>
|
||||
{isLoading ? <Loader /> : htmlParser(message)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)}
|
||||
</Modal>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -54,104 +54,110 @@ const PlayRightPrice = () => {
|
||||
|
||||
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>
|
||||
) : (
|
||||
<>
|
||||
{!isPlaying
|
||||
? (
|
||||
<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 className='form-group text-center'>
|
||||
<button
|
||||
onClick={handlePlaying}
|
||||
type='submit'
|
||||
className='btn btn-dark'
|
||||
>
|
||||
Jouer
|
||||
</button>
|
||||
</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>
|
||||
)}
|
||||
)
|
||||
: isLoadingProduct
|
||||
? (
|
||||
<div className='row justify-content-center'>
|
||||
<Loader />
|
||||
</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 className='row justify-content-center'>
|
||||
<div
|
||||
key={index}
|
||||
className={`col-24 Price__result ${priceResultClass}`}
|
||||
style={{ marginBottom: '20px' }}
|
||||
className='col-24 text-center'
|
||||
>
|
||||
# {attempt.numberTry} ({attempt.guessedPrice}) {message}
|
||||
<h4>{productToGuess.name}</h4>
|
||||
<img
|
||||
src={productToGuess.image}
|
||||
alt={productToGuess.name}
|
||||
className='Product__image'
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</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>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -84,299 +84,301 @@ const Profile = props => {
|
||||
/>
|
||||
|
||||
{/* Édition du profil */}
|
||||
{isOpen ? (
|
||||
<Modal toggleModal={toggleModal}>
|
||||
<div className='Profile__container container-fluid'>
|
||||
<div className='Profile__row row'>
|
||||
<div className='col-24'>
|
||||
<div className='Profile__Modal-top-container row'>
|
||||
<div className='col-24'>
|
||||
<span
|
||||
{isOpen
|
||||
? (
|
||||
<Modal toggleModal={toggleModal}>
|
||||
<div className='Profile__container container-fluid'>
|
||||
<div className='Profile__row row'>
|
||||
<div className='col-24'>
|
||||
<div className='Profile__Modal-top-container row'>
|
||||
<div className='col-24'>
|
||||
<span
|
||||
onClick={toggleModal}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
position: 'absolute',
|
||||
left: 0
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faTimes}
|
||||
style={{ width: '1.5rem', color: 'red' }}
|
||||
/>
|
||||
</span>
|
||||
<h2 className='text-center'>Éditer le profil</h2>
|
||||
<p className='text-center'>
|
||||
<em>
|
||||
(Vous devrez vous reconnecter après la sauvegarde){' '}
|
||||
<br /> Si vous changez votre adresse email, vous devrez
|
||||
la confirmer comme à l'inscription (vérifier vos
|
||||
emails).
|
||||
</em>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='col-24'>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className='form-group'>
|
||||
<label className='form-label' htmlFor='name'>
|
||||
Nom :
|
||||
</label>
|
||||
<input
|
||||
value={inputState.name}
|
||||
onChange={handleChange}
|
||||
type='text'
|
||||
name='name'
|
||||
id='name'
|
||||
className='form-control'
|
||||
placeholder='Divlo'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='form-group'>
|
||||
<label className='form-label' htmlFor='email'>
|
||||
Email :
|
||||
</label>
|
||||
<input
|
||||
value={inputState.email}
|
||||
onChange={handleChange}
|
||||
type='email'
|
||||
name='email'
|
||||
id='email'
|
||||
className='form-control'
|
||||
placeholder='email@gmail.com'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='form-group custom-control custom-switch'>
|
||||
<input
|
||||
onChange={event => handleChange(event, true)}
|
||||
type='checkbox'
|
||||
name='isPublicEmail'
|
||||
checked={inputState.isPublicEmail}
|
||||
className='custom-control-input'
|
||||
id='isPublicEmail'
|
||||
/>
|
||||
<label
|
||||
className='custom-control-label'
|
||||
htmlFor='isPublicEmail'
|
||||
>
|
||||
Email Public
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className='form-group'>
|
||||
<label className='form-label' htmlFor='biography'>
|
||||
Biographie :
|
||||
</label>
|
||||
<textarea
|
||||
style={{ height: 'auto' }}
|
||||
value={inputState.biography}
|
||||
onChange={handleChange}
|
||||
name='biography'
|
||||
id='biography'
|
||||
className='form-control'
|
||||
rows='5'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='form-group'>
|
||||
<label className='form-label' htmlFor='logo'>
|
||||
Logo <em>(400x400 recommandé)</em> :
|
||||
</label>
|
||||
<p style={{ margin: 0 }}>
|
||||
<em>
|
||||
Si aucun fichier est choisi, le logo ne sera pas
|
||||
modifié.
|
||||
</em>
|
||||
</p>
|
||||
<input
|
||||
onChange={handleChange}
|
||||
accept='image/jpeg,image/jpg,image/png,image/gif'
|
||||
type='file'
|
||||
name='logo'
|
||||
id='logo'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='form-group text-center'>
|
||||
<button type='submit' className='btn btn-dark'>
|
||||
Sauvegarder
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div className='form-result text-center'>
|
||||
{isLoading ? <Loader /> : htmlParser(message)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
: (
|
||||
<div className='container-fluid Profile__container'>
|
||||
<div className='row Profile__row'>
|
||||
<div className='col-20'>
|
||||
<div className='text-center'>
|
||||
<h1>
|
||||
Profil de <span className='important'>{props.name}</span>
|
||||
</h1>
|
||||
</div>
|
||||
<div className='row justify-content-center'>
|
||||
<div className='col-24 text-center'>
|
||||
<img
|
||||
className='Profile__logo'
|
||||
src={API_URL + props.logo}
|
||||
alt={props.name}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='col-24 text-center'>
|
||||
{props.biography != null && <p>{props.biography}</p>}
|
||||
{props.email != null && (
|
||||
<p>
|
||||
<span className='important'>Email :</span> {props.email}
|
||||
</p>
|
||||
)}
|
||||
<p>
|
||||
<span className='important'>
|
||||
Date de création du compte :
|
||||
</span>{' '}
|
||||
{date.format(
|
||||
new Date(props.createdAt),
|
||||
'DD/MM/YYYY à HH:mm',
|
||||
false
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{isAuth && user.name === props.name && (
|
||||
<button
|
||||
onClick={toggleModal}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
position: 'absolute',
|
||||
left: 0
|
||||
}}
|
||||
style={{ marginBottom: '25px' }}
|
||||
className='btn btn-dark'
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faTimes}
|
||||
style={{ width: '1.5rem', color: 'red' }}
|
||||
icon={faPen}
|
||||
style={{ cursor: 'pointer', width: '1rem' }}
|
||||
/>
|
||||
</span>
|
||||
<h2 className='text-center'>Éditer le profil</h2>
|
||||
<p className='text-center'>
|
||||
<em>
|
||||
(Vous devrez vous reconnecter après la sauvegarde){' '}
|
||||
<br /> Si vous changez votre adresse email, vous devrez
|
||||
la confirmer comme à l'inscription (vérifier vos
|
||||
emails).
|
||||
</em>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='col-24'>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className='form-group'>
|
||||
<label className='form-label' htmlFor='name'>
|
||||
Nom :
|
||||
</label>
|
||||
<input
|
||||
value={inputState.name}
|
||||
onChange={handleChange}
|
||||
type='text'
|
||||
name='name'
|
||||
id='name'
|
||||
className='form-control'
|
||||
placeholder='Divlo'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='form-group'>
|
||||
<label className='form-label' htmlFor='email'>
|
||||
Email :
|
||||
</label>
|
||||
<input
|
||||
value={inputState.email}
|
||||
onChange={handleChange}
|
||||
type='email'
|
||||
name='email'
|
||||
id='email'
|
||||
className='form-control'
|
||||
placeholder='email@gmail.com'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='form-group custom-control custom-switch'>
|
||||
<input
|
||||
onChange={event => handleChange(event, true)}
|
||||
type='checkbox'
|
||||
name='isPublicEmail'
|
||||
checked={inputState.isPublicEmail}
|
||||
className='custom-control-input'
|
||||
id='isPublicEmail'
|
||||
/>
|
||||
<label
|
||||
className='custom-control-label'
|
||||
htmlFor='isPublicEmail'
|
||||
>
|
||||
Email Public
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className='form-group'>
|
||||
<label className='form-label' htmlFor='biography'>
|
||||
Biographie :
|
||||
</label>
|
||||
<textarea
|
||||
style={{ height: 'auto' }}
|
||||
value={inputState.biography}
|
||||
onChange={handleChange}
|
||||
name='biography'
|
||||
id='biography'
|
||||
className='form-control'
|
||||
rows='5'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='form-group'>
|
||||
<label className='form-label' htmlFor='logo'>
|
||||
Logo <em>(400x400 recommandé)</em> :
|
||||
</label>
|
||||
<p style={{ margin: 0 }}>
|
||||
<em>
|
||||
Si aucun fichier est choisi, le logo ne sera pas
|
||||
modifié.
|
||||
</em>
|
||||
</p>
|
||||
<input
|
||||
onChange={handleChange}
|
||||
accept='image/jpeg,image/jpg,image/png,image/gif'
|
||||
type='file'
|
||||
name='logo'
|
||||
id='logo'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='form-group text-center'>
|
||||
<button type='submit' className='btn btn-dark'>
|
||||
Sauvegarder
|
||||
Éditez le profil
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div className='form-result text-center'>
|
||||
{isLoading ? <Loader /> : htmlParser(message)}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
) : (
|
||||
<div className='container-fluid Profile__container'>
|
||||
<div className='row Profile__row'>
|
||||
<div className='col-20'>
|
||||
<div className='text-center'>
|
||||
<h1>
|
||||
Profil de <span className='important'>{props.name}</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{props.favoritesArray.length > 0 && (
|
||||
<div className='row justify-content-center'>
|
||||
<div className='col-24 text-center'>
|
||||
<img
|
||||
className='Profile__logo'
|
||||
src={API_URL + props.logo}
|
||||
alt={props.name}
|
||||
/>
|
||||
<h2>
|
||||
Dernières fonctions ajoutées aux{' '}
|
||||
<span className='important'>favoris</span> :
|
||||
</h2>
|
||||
</div>
|
||||
<div className='col-24'>
|
||||
<div className='row justify-content-center'>
|
||||
{props.favoritesArray.map(favorite => {
|
||||
return <FunctionCard key={favorite.id} {...favorite} />
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{props.commentsArray.length > 0 && (
|
||||
<div className='row justify-content-center'>
|
||||
<div className='col-24 text-center'>
|
||||
{props.biography != null && <p>{props.biography}</p>}
|
||||
{props.email != null && (
|
||||
<p>
|
||||
<span className='important'>Email :</span> {props.email}
|
||||
</p>
|
||||
)}
|
||||
<p>
|
||||
<span className='important'>
|
||||
Date de création du compte :
|
||||
</span>{' '}
|
||||
{date.format(
|
||||
new Date(props.createdAt),
|
||||
'DD/MM/YYYY à HH:mm',
|
||||
false
|
||||
)}
|
||||
</p>
|
||||
<h2>
|
||||
Derniers <span className='important'>commentaires</span> :
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{isAuth && user.name === props.name && (
|
||||
<button
|
||||
onClick={toggleModal}
|
||||
style={{ marginBottom: '25px' }}
|
||||
className='btn btn-dark'
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faPen}
|
||||
style={{ cursor: 'pointer', width: '1rem' }}
|
||||
/>
|
||||
Éditez le profil
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{props.favoritesArray.length > 0 && (
|
||||
<div className='row justify-content-center'>
|
||||
<div className='col-24 text-center'>
|
||||
<h2>
|
||||
Dernières fonctions ajoutées aux{' '}
|
||||
<span className='important'>favoris</span> :
|
||||
</h2>
|
||||
</div>
|
||||
<div className='col-24'>
|
||||
<div className='row justify-content-center'>
|
||||
{props.favoritesArray.map(favorite => {
|
||||
return <FunctionCard key={favorite.id} {...favorite} />
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{props.commentsArray.length > 0 && (
|
||||
<div className='row justify-content-center'>
|
||||
<div className='col-24 text-center'>
|
||||
<h2>
|
||||
Derniers <span className='important'>commentaires</span> :
|
||||
</h2>
|
||||
</div>
|
||||
<div className='col-24'>
|
||||
{props.commentsArray.map(comment => (
|
||||
<div
|
||||
key={comment.id}
|
||||
className='row Profile__row Profile__comment'
|
||||
>
|
||||
<div className='col-20'>
|
||||
<p style={{ textAlign: 'center', marginTop: '30px' }}>
|
||||
Posté sur la fonction
|
||||
<Link
|
||||
href={
|
||||
<div className='col-24'>
|
||||
{props.commentsArray.map(comment => (
|
||||
<div
|
||||
key={comment.id}
|
||||
className='row Profile__row Profile__comment'
|
||||
>
|
||||
<div className='col-20'>
|
||||
<p style={{ textAlign: 'center', marginTop: '30px' }}>
|
||||
Posté sur la fonction
|
||||
<Link
|
||||
href={
|
||||
comment.function.type === 'form' ||
|
||||
comment.function.type === 'article'
|
||||
? '/functions/[slug]'
|
||||
: `/functions/${comment.function.slug}`
|
||||
}
|
||||
as={`/functions/${comment.function.slug}`}
|
||||
>
|
||||
<a>{comment.function.title}</a>
|
||||
</Link>
|
||||
as={`/functions/${comment.function.slug}`}
|
||||
>
|
||||
<a>{comment.function.title}</a>
|
||||
</Link>
|
||||
le{' '}
|
||||
{date.format(
|
||||
new Date(comment.createdAt),
|
||||
'DD/MM/YYYY à HH:mm',
|
||||
false
|
||||
)}
|
||||
</p>
|
||||
<ReactMarkdown
|
||||
source={comment.message}
|
||||
renderers={{ code: CodeBlock }}
|
||||
/>
|
||||
{date.format(
|
||||
new Date(comment.createdAt),
|
||||
'DD/MM/YYYY à HH:mm',
|
||||
false
|
||||
)}
|
||||
</p>
|
||||
<ReactMarkdown
|
||||
source={comment.message}
|
||||
renderers={{ code: CodeBlock }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
{props.quotesArray.length > 0 && (
|
||||
<div className='row justify-content-center'>
|
||||
<div className='col-24 text-center'>
|
||||
<h2>
|
||||
Dernières <span className='important'>citations</span>{' '}
|
||||
proposées (et validées) :
|
||||
</h2>
|
||||
<p>
|
||||
Citations pour la fonction{' '}
|
||||
<Link href='/functions/randomQuote'>
|
||||
<a>Générateur de citations</a>
|
||||
</Link>
|
||||
.
|
||||
</p>
|
||||
{props.quotesArray.length > 0 && (
|
||||
<div className='row justify-content-center'>
|
||||
<div className='col-24 text-center'>
|
||||
<h2>
|
||||
Dernières <span className='important'>citations</span>{' '}
|
||||
proposées (et validées) :
|
||||
</h2>
|
||||
<p>
|
||||
Citations pour la fonction{' '}
|
||||
<Link href='/functions/randomQuote'>
|
||||
<a>Générateur de citations</a>
|
||||
</Link>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
<div className='col-24 table-column'>
|
||||
<table style={{ marginBottom: '50px' }}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className='table-row' scope='col'>
|
||||
Citation/Proverbe
|
||||
</th>
|
||||
<th className='table-row' scope='col'>
|
||||
Auteur
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{props.quotesArray.map((currentQuote, index) => {
|
||||
return (
|
||||
<tr key={index}>
|
||||
<td className='table-row text-center'>
|
||||
{currentQuote.quote}
|
||||
</td>
|
||||
<td className='table-row text-center'>
|
||||
{currentQuote.author}
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div className='col-24 table-column'>
|
||||
<table style={{ marginBottom: '50px' }}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className='table-row' scope='col'>
|
||||
Citation/Proverbe
|
||||
</th>
|
||||
<th className='table-row' scope='col'>
|
||||
Auteur
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{props.quotesArray.map((currentQuote, index) => {
|
||||
return (
|
||||
<tr key={index}>
|
||||
<td className='table-row text-center'>
|
||||
{currentQuote.quote}
|
||||
</td>
|
||||
<td className='table-row text-center'>
|
||||
{currentQuote.author}
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user