🎨 standardJS all files
This commit is contained in:
divlo
@ -1,10 +1,10 @@
|
||||
.footer {
|
||||
border-top: var(--border-header-footer);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-top: var(--border-header-footer);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.footer-text {
|
||||
line-height: 2.5;
|
||||
}
|
||||
line-height: 2.5;
|
||||
}
|
||||
|
||||
@ -8,8 +8,11 @@ export default function Footer () {
|
||||
<Link href='/about'>
|
||||
<a>FunctionProject</a>
|
||||
</Link>
|
||||
- Version 2.1 <br />
|
||||
<a href='https://divlo.fr/' target='_blank' rel='noopener noreferrer'>Divlo</a> | Tous droits réservés
|
||||
- Version 2.1 <br />
|
||||
<a href='https://divlo.fr/' target='_blank' rel='noopener noreferrer'>
|
||||
Divlo
|
||||
</a>{' '}
|
||||
| Tous droits réservés
|
||||
</p>
|
||||
</footer>
|
||||
)
|
||||
|
||||
@ -5,7 +5,7 @@ import useAPI from '../../hooks/useAPI'
|
||||
import api from '../../utils/api'
|
||||
import '../../public/css/pages/admin.css'
|
||||
|
||||
const AddEditFunction = (props) => {
|
||||
const AddEditFunction = props => {
|
||||
const [, categories] = useAPI('/categories')
|
||||
const [inputState, setInputState] = useState(props.defaultInputState)
|
||||
const [message, setMessage] = useState('')
|
||||
@ -22,18 +22,29 @@ const AddEditFunction = (props) => {
|
||||
}
|
||||
}, [categories])
|
||||
|
||||
const apiCallFunction = (formData) => {
|
||||
if (props.isEditing) return api.put(`/admin/functions/${inputState.id}`, formData, { headers: { Authorization: props.user.token } })
|
||||
return api.post('/admin/functions', formData, { headers: { Authorization: props.user.token } })
|
||||
const apiCallFunction = formData => {
|
||||
if (props.isEditing) {
|
||||
return api.put(`/admin/functions/${inputState.id}`, formData, {
|
||||
headers: { Authorization: props.user.token }
|
||||
})
|
||||
}
|
||||
return api.post('/admin/functions', formData, {
|
||||
headers: { Authorization: props.user.token }
|
||||
})
|
||||
}
|
||||
|
||||
const handleChange = (event, isTypeCheck = false) => {
|
||||
const inputStateNew = { ...inputState }
|
||||
inputStateNew[event.target.name] = (event.target.files != null) ? event.target.files[0] : (isTypeCheck) ? event.target.checked : event.target.value
|
||||
inputStateNew[event.target.name] =
|
||||
event.target.files != null
|
||||
? event.target.files[0]
|
||||
: isTypeCheck
|
||||
? event.target.checked
|
||||
: event.target.value
|
||||
setInputState(inputStateNew)
|
||||
}
|
||||
|
||||
const handleSubmit = (event) => {
|
||||
const handleSubmit = event => {
|
||||
event.preventDefault()
|
||||
setIsLoading(true)
|
||||
const formData = new window.FormData()
|
||||
@ -53,8 +64,10 @@ const AddEditFunction = (props) => {
|
||||
setIsLoading(false)
|
||||
window.location.reload(true)
|
||||
})
|
||||
.catch((error) => {
|
||||
setMessage(`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`)
|
||||
.catch(error => {
|
||||
setMessage(
|
||||
`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`
|
||||
)
|
||||
setIsLoading(false)
|
||||
})
|
||||
}
|
||||
@ -63,23 +76,61 @@ const AddEditFunction = (props) => {
|
||||
<>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className='form-group'>
|
||||
<label className='form-label' htmlFor='title'>Titre :</label>
|
||||
<input value={inputState.title} onChange={handleChange} type='text' name='title' id='title' className='form-control' placeholder='(e.g : Nombre aléatoire)' />
|
||||
<label className='form-label' htmlFor='title'>
|
||||
Titre :
|
||||
</label>
|
||||
<input
|
||||
value={inputState.title}
|
||||
onChange={handleChange}
|
||||
type='text'
|
||||
name='title'
|
||||
id='title'
|
||||
className='form-control'
|
||||
placeholder='(e.g : Nombre aléatoire)'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='form-group'>
|
||||
<label className='form-label' htmlFor='slug'>Slug :</label>
|
||||
<input value={inputState.slug} onChange={handleChange} type='text' name='slug' id='slug' className='form-control' placeholder='(e.g : randomNumber)' />
|
||||
<label className='form-label' htmlFor='slug'>
|
||||
Slug :
|
||||
</label>
|
||||
<input
|
||||
value={inputState.slug}
|
||||
onChange={handleChange}
|
||||
type='text'
|
||||
name='slug'
|
||||
id='slug'
|
||||
className='form-control'
|
||||
placeholder='(e.g : randomNumber)'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='form-group'>
|
||||
<label className='form-label' htmlFor='description'>Description :</label>
|
||||
<textarea style={{ height: 'auto' }} value={inputState.description} onChange={handleChange} name='description' id='description' className='form-control' rows='5' />
|
||||
<label className='form-label' htmlFor='description'>
|
||||
Description :
|
||||
</label>
|
||||
<textarea
|
||||
style={{ height: 'auto' }}
|
||||
value={inputState.description}
|
||||
onChange={handleChange}
|
||||
name='description'
|
||||
id='description'
|
||||
className='form-control'
|
||||
rows='5'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='form-group'>
|
||||
<label className='form-label' htmlFor='type'>Type :</label>
|
||||
<select onChange={handleChange} name='type' id='type' className='form-control' {...(props.isEditing) && { value: inputState.type }}>
|
||||
<label className='form-label' htmlFor='type'>
|
||||
Type :
|
||||
</label>
|
||||
<select
|
||||
onChange={handleChange}
|
||||
name='type'
|
||||
id='type'
|
||||
className='form-control'
|
||||
{...(props.isEditing && { value: inputState.type })}
|
||||
>
|
||||
<option value='form'>Formulaire</option>
|
||||
<option value='article'>Article</option>
|
||||
<option value='page'>Page</option>
|
||||
@ -87,37 +138,68 @@ const AddEditFunction = (props) => {
|
||||
</div>
|
||||
|
||||
<div className='form-group'>
|
||||
<label className='form-label' htmlFor='categorieId'>Catégorie :</label>
|
||||
<select onChange={handleChange} name='categorieId' id='categorieId' className='form-control' {...(props.isEditing) && { value: inputState.categorieId }}>
|
||||
{categories.map((category) => (
|
||||
<option key={category.id} value={category.id} className='Admin__Modal-select-option' style={{ backgroundColor: category.color }}>{category.name}</option>
|
||||
<label className='form-label' htmlFor='categorieId'>
|
||||
Catégorie :
|
||||
</label>
|
||||
<select
|
||||
onChange={handleChange}
|
||||
name='categorieId'
|
||||
id='categorieId'
|
||||
className='form-control'
|
||||
{...(props.isEditing && { value: inputState.categorieId })}
|
||||
>
|
||||
{categories.map(category => (
|
||||
<option
|
||||
key={category.id}
|
||||
value={category.id}
|
||||
className='Admin__Modal-select-option'
|
||||
style={{ backgroundColor: category.color }}
|
||||
>
|
||||
{category.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className='form-group'>
|
||||
<label className='form-label' htmlFor='image'>Image <em>(150x150 recommandé)</em> :</label>
|
||||
<label className='form-label' htmlFor='image'>
|
||||
Image <em>(150x150 recommandé)</em> :
|
||||
</label>
|
||||
<br />
|
||||
<input onChange={handleChange} accept='image/jpeg,image/jpg,image/png' type='file' name='image' id='image' />
|
||||
<input
|
||||
onChange={handleChange}
|
||||
accept='image/jpeg,image/jpg,image/png'
|
||||
type='file'
|
||||
name='image'
|
||||
id='image'
|
||||
/>
|
||||
</div>
|
||||
|
||||
{(props.isEditing) &&
|
||||
{props.isEditing && (
|
||||
<div className='form-group custom-control custom-switch'>
|
||||
<input onChange={(event) => handleChange(event, true)} type='checkbox' name='isOnline' checked={inputState.isOnline} className='custom-control-input' id='isOnline' />
|
||||
<label className='custom-control-label' htmlFor='isOnline'>isOnline</label>
|
||||
</div>}
|
||||
<input
|
||||
onChange={event => handleChange(event, true)}
|
||||
type='checkbox'
|
||||
name='isOnline'
|
||||
checked={inputState.isOnline}
|
||||
className='custom-control-input'
|
||||
id='isOnline'
|
||||
/>
|
||||
<label className='custom-control-label' htmlFor='isOnline'>
|
||||
isOnline
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className='form-group text-center'>
|
||||
<button type='submit' className='btn btn-dark'>Envoyer</button>
|
||||
<button type='submit' className='btn btn-dark'>
|
||||
Envoyer
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div className='form-result text-center'>
|
||||
{
|
||||
(isLoading)
|
||||
? <Loader />
|
||||
: htmlParser(message)
|
||||
}
|
||||
{isLoading ? <Loader /> : htmlParser(message)}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
@ -6,19 +6,16 @@ import FunctionArticle from '../FunctionPage/FunctionArticle'
|
||||
import 'notyf/notyf.min.css'
|
||||
import '../../public/css/suneditor.min.css'
|
||||
|
||||
const SunEditor = dynamic(
|
||||
() => import('suneditor-react'),
|
||||
{ ssr: false }
|
||||
)
|
||||
const SunEditor = dynamic(() => import('suneditor-react'), { ssr: false })
|
||||
|
||||
const EditArticleFunction = (props) => {
|
||||
const EditArticleFunction = props => {
|
||||
const [htmlContent, setHtmlContent] = useState('')
|
||||
|
||||
const handleEditorChange = (content) => {
|
||||
const handleEditorChange = content => {
|
||||
setHtmlContent(content)
|
||||
}
|
||||
|
||||
const handleSave = async (content) => {
|
||||
const handleSave = async content => {
|
||||
let Notyf
|
||||
if (typeof window !== 'undefined') {
|
||||
Notyf = require('notyf')
|
||||
@ -27,7 +24,11 @@ const EditArticleFunction = (props) => {
|
||||
duration: 5000
|
||||
})
|
||||
try {
|
||||
await api.put(`/admin/functions/article/${props.functionInfo.id}`, { article: content }, { headers: { Authorization: props.user.token } })
|
||||
await api.put(
|
||||
`/admin/functions/article/${props.functionInfo.id}`,
|
||||
{ article: content },
|
||||
{ headers: { Authorization: props.user.token } }
|
||||
)
|
||||
notyf.success('Sauvegardé!')
|
||||
} catch {
|
||||
notyf.error('Erreur!')
|
||||
@ -36,7 +37,12 @@ const EditArticleFunction = (props) => {
|
||||
|
||||
return (
|
||||
<div className='container-fluid'>
|
||||
<SunEditor setContents={props.functionInfo.article} lang='fr' onChange={handleEditorChange} setOptions={{ buttonList: complex, callBackSave: handleSave }} />
|
||||
<SunEditor
|
||||
setContents={props.functionInfo.article}
|
||||
lang='fr'
|
||||
onChange={handleEditorChange}
|
||||
setOptions={{ buttonList: complex, callBackSave: handleSave }}
|
||||
/>
|
||||
<FunctionArticle article={htmlContent} />
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -2,8 +2,10 @@ import { useState } from 'react'
|
||||
import api from '../../utils/api'
|
||||
import 'notyf/notyf.min.css'
|
||||
|
||||
const EditFormFunction = (props) => {
|
||||
const [inputsArray, setInputsArray] = useState(props.functionInfo.utilizationForm || [])
|
||||
const EditFormFunction = props => {
|
||||
const [inputsArray, setInputsArray] = useState(
|
||||
props.functionInfo.utilizationForm || []
|
||||
)
|
||||
|
||||
const addInput = () => {
|
||||
const newInputsArray = [...inputsArray]
|
||||
@ -11,7 +13,7 @@ const EditFormFunction = (props) => {
|
||||
setInputsArray(newInputsArray)
|
||||
}
|
||||
|
||||
const addOption = (event) => {
|
||||
const addOption = event => {
|
||||
const newInputsArray = [...inputsArray]
|
||||
const index = event.target.id.split('-')[1]
|
||||
const inputObject = newInputsArray[index]
|
||||
@ -27,7 +29,7 @@ const EditFormFunction = (props) => {
|
||||
setInputsArray(newInputsArray)
|
||||
}
|
||||
|
||||
const handleChangeInput = (event) => {
|
||||
const handleChangeInput = event => {
|
||||
const newInputsArray = [...inputsArray]
|
||||
const index = event.target.id.split('-')[1]
|
||||
const inputObject = newInputsArray[index]
|
||||
@ -38,7 +40,7 @@ const EditFormFunction = (props) => {
|
||||
setInputsArray(newInputsArray)
|
||||
}
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
const handleSubmit = async event => {
|
||||
event.preventDefault()
|
||||
let Notyf
|
||||
if (typeof window !== 'undefined') {
|
||||
@ -48,14 +50,18 @@ const EditFormFunction = (props) => {
|
||||
duration: 5000
|
||||
})
|
||||
try {
|
||||
await api.put(`/admin/functions/form/${props.functionInfo.id}`, { form: inputsArray }, { headers: { Authorization: props.user.token } })
|
||||
await api.put(
|
||||
`/admin/functions/form/${props.functionInfo.id}`,
|
||||
{ form: inputsArray },
|
||||
{ headers: { Authorization: props.user.token } }
|
||||
)
|
||||
notyf.success('Sauvegardé!')
|
||||
} catch (error) {
|
||||
notyf.error('Erreur!')
|
||||
}
|
||||
}
|
||||
|
||||
const handleRemoveInput = (event) => {
|
||||
const handleRemoveInput = event => {
|
||||
const newInputsArray = [...inputsArray]
|
||||
const index = event.target.id.split('-')[1]
|
||||
newInputsArray.splice(index, 1)
|
||||
@ -72,39 +78,88 @@ const EditFormFunction = (props) => {
|
||||
|
||||
return (
|
||||
<div className='container-fluid'>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
|
||||
{(inputsArray.length > 0) &&
|
||||
{inputsArray.length > 0 && (
|
||||
<div className='form-group text-center'>
|
||||
<button type='submit' className='btn btn-dark'>Sauvegarder</button>
|
||||
</div>}
|
||||
<button type='submit' className='btn btn-dark'>
|
||||
Sauvegarder
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{inputsArray.map((input, index) => {
|
||||
return (
|
||||
<div key={index} className='form-group Admin__Input-group'>
|
||||
|
||||
<div className='text-center'>
|
||||
<button type='button' onClick={handleRemoveInput} id={`remove-${index}`} className='btn btn-dark'>Supprimer l'input</button>
|
||||
<button
|
||||
type='button'
|
||||
onClick={handleRemoveInput}
|
||||
id={`remove-${index}`}
|
||||
className='btn btn-dark'
|
||||
>
|
||||
Supprimer l'input
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<label className='form-label' htmlFor={`name-${index}`}>Nom de l'input :</label>
|
||||
<input value={input.name} onChange={handleChangeInput} type='text' name='name' id={`name-${index}`} className='form-control' placeholder='(e.g : cityName)' />
|
||||
<label className='form-label' htmlFor={`name-${index}`}>
|
||||
Nom de l'input :
|
||||
</label>
|
||||
<input
|
||||
value={input.name}
|
||||
onChange={handleChangeInput}
|
||||
type='text'
|
||||
name='name'
|
||||
id={`name-${index}`}
|
||||
className='form-control'
|
||||
placeholder='(e.g : cityName)'
|
||||
/>
|
||||
<br />
|
||||
|
||||
<label className='form-label' htmlFor={`label-${index}`}>Label :</label>
|
||||
<input value={input.label} onChange={handleChangeInput} type='text' name='label' id={`label-${index}`} className='form-control' placeholder="(e.g : Entrez le nom d'une ville :)" />
|
||||
<label className='form-label' htmlFor={`label-${index}`}>
|
||||
Label :
|
||||
</label>
|
||||
<input
|
||||
value={input.label}
|
||||
onChange={handleChangeInput}
|
||||
type='text'
|
||||
name='label'
|
||||
id={`label-${index}`}
|
||||
className='form-control'
|
||||
placeholder="(e.g : Entrez le nom d'une ville :)"
|
||||
/>
|
||||
<br />
|
||||
|
||||
{(input.type !== 'select') &&
|
||||
{input.type !== 'select' && (
|
||||
<>
|
||||
<label className='form-label' htmlFor={`placeholder-${index}`}>Placeholder :</label>
|
||||
<input value={input.placeholder} onChange={handleChangeInput} type='text' name='placeholder' id={`placeholder-${index}`} className='form-control' placeholder='(e.g : Paris, FR)' />
|
||||
<label
|
||||
className='form-label'
|
||||
htmlFor={`placeholder-${index}`}
|
||||
>
|
||||
Placeholder :
|
||||
</label>
|
||||
<input
|
||||
value={input.placeholder}
|
||||
onChange={handleChangeInput}
|
||||
type='text'
|
||||
name='placeholder'
|
||||
id={`placeholder-${index}`}
|
||||
className='form-control'
|
||||
placeholder='(e.g : Paris, FR)'
|
||||
/>
|
||||
<br />
|
||||
</>}
|
||||
</>
|
||||
)}
|
||||
|
||||
<label className='form-label' htmlFor={`type-${index}`}>Type :</label>
|
||||
<select value={input.type} onChange={handleChangeInput} name='type' id={`type-${index}`} className='form-control'>
|
||||
<label className='form-label' htmlFor={`type-${index}`}>
|
||||
Type :
|
||||
</label>
|
||||
<select
|
||||
value={input.type}
|
||||
onChange={handleChangeInput}
|
||||
name='type'
|
||||
id={`type-${index}`}
|
||||
className='form-control'
|
||||
>
|
||||
<option value='text'>text</option>
|
||||
<option value='integer'>Number integer</option>
|
||||
<option value='float'>Number float</option>
|
||||
@ -112,40 +167,87 @@ const EditFormFunction = (props) => {
|
||||
<option value='select'>select</option>
|
||||
</select>
|
||||
|
||||
{(input.type === 'select') &&
|
||||
{input.type === 'select' && (
|
||||
<div style={{ marginTop: '50px' }}>
|
||||
|
||||
<label className='form-label'>Options :</label>
|
||||
|
||||
{input.options.map((option, optionIndex) => {
|
||||
return (
|
||||
<div key={optionIndex} style={{ margin: '0 0 30px 0' }} className='form-group Admin__Input-group'>
|
||||
<div
|
||||
key={optionIndex}
|
||||
style={{ margin: '0 0 30px 0' }}
|
||||
className='form-group Admin__Input-group'
|
||||
>
|
||||
<div className='text-center'>
|
||||
<button type='button' onClick={() => handleRemoveOption(index, optionIndex)} className='btn btn-dark'>Supprimer l'option</button>
|
||||
<button
|
||||
type='button'
|
||||
onClick={() =>
|
||||
handleRemoveOption(index, optionIndex)}
|
||||
className='btn btn-dark'
|
||||
>
|
||||
Supprimer l'option
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<label className='form-label' htmlFor={`optionName-${optionIndex}-${index}`}>Nom de l'option</label>
|
||||
<input onChange={(event) => handleChangeOption(index, optionIndex, event)} value={option.name} id={`optionName-${optionIndex}-${index}`} name='name' type='text' className='form-control' placeholder="Nom de l'option" />
|
||||
<label
|
||||
className='form-label'
|
||||
htmlFor={`optionName-${optionIndex}-${index}`}
|
||||
>
|
||||
Nom de l'option
|
||||
</label>
|
||||
<input
|
||||
onChange={event =>
|
||||
handleChangeOption(index, optionIndex, event)}
|
||||
value={option.name}
|
||||
id={`optionName-${optionIndex}-${index}`}
|
||||
name='name'
|
||||
type='text'
|
||||
className='form-control'
|
||||
placeholder="Nom de l'option"
|
||||
/>
|
||||
|
||||
<br />
|
||||
<label className='form-label' htmlFor={`optionValue-${optionIndex}-${index}`}>Valeur de l'option</label>
|
||||
<input onChange={(event) => handleChangeOption(index, optionIndex, event)} value={option.value} id={`optionValue-${optionIndex}-${index}`} name='value' type='text' className='form-control' placeholder="Valeur de l'option" />
|
||||
<label
|
||||
className='form-label'
|
||||
htmlFor={`optionValue-${optionIndex}-${index}`}
|
||||
>
|
||||
Valeur de l'option
|
||||
</label>
|
||||
<input
|
||||
onChange={event =>
|
||||
handleChangeOption(index, optionIndex, event)}
|
||||
value={option.value}
|
||||
id={`optionValue-${optionIndex}-${index}`}
|
||||
name='value'
|
||||
type='text'
|
||||
className='form-control'
|
||||
placeholder="Valeur de l'option"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
<div className='form-group text-center'>
|
||||
<button id={`optionAdd-${index}`} onClick={addOption} type='button' className='btn btn-dark'>Ajouter une option</button>
|
||||
<button
|
||||
id={`optionAdd-${index}`}
|
||||
onClick={addOption}
|
||||
type='button'
|
||||
className='btn btn-dark'
|
||||
>
|
||||
Ajouter une option
|
||||
</button>
|
||||
</div>
|
||||
</div>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
</form>
|
||||
|
||||
<div style={{ marginBottom: '30px' }} className='form-group text-center'>
|
||||
<button type='button' onClick={addInput} className='btn btn-dark'>Ajouter un input</button>
|
||||
<button type='button' onClick={addInput} className='btn btn-dark'>
|
||||
Ajouter un input
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -1,67 +1,67 @@
|
||||
.FunctionCard {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
word-wrap: break-word;
|
||||
box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, .25);
|
||||
border: 1px solid black;
|
||||
border-radius: 1rem;
|
||||
margin: 0 0 50px 0;
|
||||
cursor: pointer;
|
||||
transition: all .3s;
|
||||
color: var(--text-color);
|
||||
text-decoration: none !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
word-wrap: break-word;
|
||||
box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.25);
|
||||
border: 1px solid black;
|
||||
border-radius: 1rem;
|
||||
margin: 0 0 50px 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
color: var(--text-color);
|
||||
text-decoration: none !important;
|
||||
}
|
||||
.FunctionCard__container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.FunctionCard:hover {
|
||||
transform: translateY(-7px);
|
||||
transform: translateY(-7px);
|
||||
}
|
||||
/* col-md */
|
||||
@media (min-width: 768px) {
|
||||
.FunctionCard {
|
||||
margin: 0 30px 50px 30px;
|
||||
}
|
||||
.FunctionCard {
|
||||
margin: 0 30px 50px 30px;
|
||||
}
|
||||
}
|
||||
/* col-xl */
|
||||
@media (min-width: 1200px) {
|
||||
.FunctionCard {
|
||||
margin: 0 20px 50px 20px;
|
||||
}
|
||||
.FunctionCard {
|
||||
margin: 0 20px 50px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.FunctionCard__top {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.FunctionCard__image {
|
||||
width: 150px;
|
||||
width: 150px;
|
||||
}
|
||||
.FunctionCard__title {
|
||||
font-size: 1.4em;
|
||||
margin: 0;
|
||||
color: var(--important);
|
||||
font-weight: 300;
|
||||
font-size: 1.4em;
|
||||
margin: 0;
|
||||
color: var(--important);
|
||||
font-weight: 300;
|
||||
}
|
||||
.FunctionCard__description {
|
||||
margin: 20px 0 10px 0;
|
||||
margin: 20px 0 10px 0;
|
||||
}
|
||||
.FunctionCard__info {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
.FunctionCard__category {
|
||||
border-radius: 0.5em;
|
||||
padding: 0.5em;
|
||||
margin-right: 20px;
|
||||
font-size: 16.4px;
|
||||
}
|
||||
border-radius: 0.5em;
|
||||
padding: 0.5em;
|
||||
margin-right: 20px;
|
||||
font-size: 16.4px;
|
||||
}
|
||||
|
||||
@ -5,51 +5,76 @@ import Loader from '../Loader'
|
||||
import { API_URL } from '../../utils/config/config'
|
||||
import './FunctionCard.css'
|
||||
|
||||
const FunctionCard = memo(forwardRef((props, ref) => {
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const FunctionCard = memo(
|
||||
forwardRef((props, ref) => {
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
|
||||
const handleLoad = () => {
|
||||
setIsLoading(false)
|
||||
}
|
||||
const handleLoad = () => {
|
||||
setIsLoading(false)
|
||||
}
|
||||
|
||||
const handleError = (event) => {
|
||||
event.target.src = API_URL + '/images/functions/default.png'
|
||||
}
|
||||
const handleError = event => {
|
||||
event.target.src = API_URL + '/images/functions/default.png'
|
||||
}
|
||||
|
||||
const isFormOrArticle = (props.type === 'form' || props.type === 'article')
|
||||
const isFormOrArticle = props.type === 'form' || props.type === 'article'
|
||||
|
||||
return (
|
||||
<Link
|
||||
{
|
||||
...(props.isAdmin)
|
||||
return (
|
||||
<Link
|
||||
{...(props.isAdmin
|
||||
? {
|
||||
href: '/admin/[slug]',
|
||||
as: `/admin/${props.slug}`
|
||||
}
|
||||
: {
|
||||
href: (isFormOrArticle) ? '/functions/[slug]' : `/functions/${props.slug}`,
|
||||
href: isFormOrArticle
|
||||
? '/functions/[slug]'
|
||||
: `/functions/${props.slug}`,
|
||||
as: `/functions/${props.slug}`
|
||||
})}
|
||||
>
|
||||
{/* FunctionCard a une hauteur pendant chargement */}
|
||||
<a
|
||||
ref={ref}
|
||||
style={
|
||||
isLoading ? { height: '360px', justifyContent: 'center' } : null
|
||||
}
|
||||
}
|
||||
>
|
||||
{/* FunctionCard a une hauteur pendant chargement */}
|
||||
<a ref={ref} style={isLoading ? { height: '360px', justifyContent: 'center' } : null} className='FunctionCard col-sm-24 col-md-10 col-xl-7'>
|
||||
{isLoading && <Loader width='125px' height='125px' />}
|
||||
className='FunctionCard col-sm-24 col-md-10 col-xl-7'
|
||||
>
|
||||
{isLoading && <Loader width='125px' height='125px' />}
|
||||
|
||||
<div className={`FunctionCard__container ${isLoading ? 'd-none' : ''}`}>
|
||||
<div className='FunctionCard__top'>
|
||||
<img onLoad={handleLoad} onError={handleError} className='FunctionCard__image' alt={props.title} src={API_URL + props.image} />
|
||||
<h2 className='FunctionCard__title'>{props.title}</h2>
|
||||
<p className='FunctionCard__description text-center'>{props.description}</p>
|
||||
<div
|
||||
className={`FunctionCard__container ${isLoading ? 'd-none' : ''}`}
|
||||
>
|
||||
<div className='FunctionCard__top'>
|
||||
<img
|
||||
onLoad={handleLoad}
|
||||
onError={handleError}
|
||||
className='FunctionCard__image'
|
||||
alt={props.title}
|
||||
src={API_URL + props.image}
|
||||
/>
|
||||
<h2 className='FunctionCard__title'>{props.title}</h2>
|
||||
<p className='FunctionCard__description text-center'>
|
||||
{props.description}
|
||||
</p>
|
||||
</div>
|
||||
<div className='FunctionCard__info'>
|
||||
<p
|
||||
className='FunctionCard__category'
|
||||
style={{ backgroundColor: props.categorie.color }}
|
||||
>
|
||||
{props.categorie.name}
|
||||
</p>
|
||||
<p className='FunctionCard__publication-date'>
|
||||
{date.format(new Date(props.createdAt), 'DD/MM/YYYY', true)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='FunctionCard__info'>
|
||||
<p className='FunctionCard__category' style={{ backgroundColor: props.categorie.color }}>{props.categorie.name}</p>
|
||||
<p className='FunctionCard__publication-date'>{date.format(new Date(props.createdAt), 'DD/MM/YYYY', true)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
)
|
||||
}))
|
||||
</a>
|
||||
</Link>
|
||||
)
|
||||
})
|
||||
)
|
||||
|
||||
export default FunctionCard
|
||||
|
||||
@ -1,33 +1,33 @@
|
||||
.CommentCard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
word-wrap: break-word;
|
||||
box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, .25);
|
||||
border: 1px solid black;
|
||||
border-radius: .7em;
|
||||
margin: 15px 0 15px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
word-wrap: break-word;
|
||||
box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.25);
|
||||
border: 1px solid black;
|
||||
border-radius: 0.7em;
|
||||
margin: 15px 0 15px 0;
|
||||
}
|
||||
.CommentCard__container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
}
|
||||
.CommentCard__user-logo {
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.CommentCard__message-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 10px;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.CommentCard__message {
|
||||
line-height: 1.8;
|
||||
margin: 15px 0 0 0;
|
||||
}
|
||||
line-height: 1.8;
|
||||
margin: 15px 0 0 0;
|
||||
}
|
||||
|
||||
@ -23,28 +23,42 @@ const CommentCard = forwardRef((props, ref) => {
|
||||
props.manageComment.setLoadingComments(true)
|
||||
if (isAuth && user.token != null) {
|
||||
try {
|
||||
await api.delete(`/comments/${props.id}`, { headers: { Authorization: user.token } })
|
||||
await api.delete(`/comments/${props.id}`, {
|
||||
headers: { Authorization: user.token }
|
||||
})
|
||||
const newCommentsData = { ...props.manageComment.commentsData }
|
||||
const commentIndex = newCommentsData.rows.findIndex((value) => value.id === props.id)
|
||||
const commentIndex = newCommentsData.rows.findIndex(
|
||||
value => value.id === props.id
|
||||
)
|
||||
newCommentsData.rows.splice(commentIndex, 1)
|
||||
props.manageComment.setCommentsData({ hasMore: props.manageComment.commentsData.hasMore, rows: newCommentsData.rows })
|
||||
props.manageComment.setCommentsData({
|
||||
hasMore: props.manageComment.commentsData.hasMore,
|
||||
rows: newCommentsData.rows
|
||||
})
|
||||
} catch {}
|
||||
}
|
||||
props.manageComment.setLoadingComments(false)
|
||||
}
|
||||
|
||||
const handleChange = (event) => {
|
||||
const handleChange = event => {
|
||||
setEditInput(event.target.value)
|
||||
}
|
||||
|
||||
const handleSubmit = (event) => {
|
||||
const handleSubmit = event => {
|
||||
event.preventDefault()
|
||||
api.put(`/comments/${props.id}`, { message: editInput }, { headers: { Authorization: user.token } })
|
||||
.then((_response) => {
|
||||
api
|
||||
.put(
|
||||
`/comments/${props.id}`,
|
||||
{ message: editInput },
|
||||
{ headers: { Authorization: user.token } }
|
||||
)
|
||||
.then(_response => {
|
||||
setEditing(false)
|
||||
})
|
||||
.catch((error) => {
|
||||
setMessage(`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`)
|
||||
.catch(error => {
|
||||
setMessage(
|
||||
`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
@ -58,47 +72,73 @@ const CommentCard = forwardRef((props, ref) => {
|
||||
<div className='CommentCard__container'>
|
||||
<div className='row'>
|
||||
<Link href='/users/[name]' as={`/users/${props.user.name}`}>
|
||||
<img className='CommentCard__user-logo' src={API_URL + props.user.logo} alt={props.user.name} />
|
||||
<img
|
||||
className='CommentCard__user-logo'
|
||||
src={API_URL + props.user.logo}
|
||||
alt={props.user.name}
|
||||
/>
|
||||
</Link>
|
||||
<span className='CommentCard__message-info'>
|
||||
<Link href='/users/[name]' as={`/users/${props.user.name}`}>
|
||||
<a>{props.user.name}</a>
|
||||
</Link>
|
||||
- {date.format(new Date(props.createdAt), 'DD/MM/YYYY à HH:mm', true)}
|
||||
-{' '}
|
||||
{date.format(new Date(props.createdAt), 'DD/MM/YYYY à HH:mm', true)}
|
||||
</span>
|
||||
</div>
|
||||
<div className='row'>
|
||||
<div className='col-24'>
|
||||
{
|
||||
(!isEditing)
|
||||
? (
|
||||
<>
|
||||
<div className='CommentCard__message'>
|
||||
<ReactMarkdown source={editInput} renderers={{ code: CodeBlock }} />
|
||||
</div>
|
||||
{(isAuth && user.name === props.user.name) &&
|
||||
<p style={{ fontSize: '15px', margin: '15px 0 0 0', fontStyle: 'italic' }}>
|
||||
<a onClick={deleteCommentById} href='#'>supprimer</a>
|
||||
-
|
||||
<a style={{ cursor: 'pointer' }} onClick={editComment}>modifier</a>
|
||||
</p>}
|
||||
</>
|
||||
)
|
||||
: (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className='form-group FunctionComments__post-group'>
|
||||
<label className='form-label' htmlFor='commentEdit'>Modifier le commentaire :</label>
|
||||
<textarea style={{ height: 'auto' }} value={editInput} onChange={handleChange} name='commentEdit' id='commentEdit' className='form-control' rows='5' placeholder="Idée d'amélioration, avis, remarque, partage d'expérience personnel, ... (Markdown autorisé)" />
|
||||
</div>
|
||||
<div className='form-group' style={{ marginTop: '0.7em' }}>
|
||||
<button type='submit' className='btn btn-dark'>Envoyer</button>
|
||||
</div>
|
||||
<div className='text-center'>
|
||||
{htmlParser(message)}
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
{!isEditing ? (
|
||||
<>
|
||||
<div className='CommentCard__message'>
|
||||
<ReactMarkdown
|
||||
source={editInput}
|
||||
renderers={{ code: CodeBlock }}
|
||||
/>
|
||||
</div>
|
||||
{isAuth && user.name === props.user.name && (
|
||||
<p
|
||||
style={{
|
||||
fontSize: '15px',
|
||||
margin: '15px 0 0 0',
|
||||
fontStyle: 'italic'
|
||||
}}
|
||||
>
|
||||
<a onClick={deleteCommentById} href='#'>
|
||||
supprimer
|
||||
</a>
|
||||
-
|
||||
<a style={{ cursor: 'pointer' }} onClick={editComment}>
|
||||
modifier
|
||||
</a>
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className='form-group FunctionComments__post-group'>
|
||||
<label className='form-label' htmlFor='commentEdit'>
|
||||
Modifier le commentaire :
|
||||
</label>
|
||||
<textarea
|
||||
style={{ height: 'auto' }}
|
||||
value={editInput}
|
||||
onChange={handleChange}
|
||||
name='commentEdit'
|
||||
id='commentEdit'
|
||||
className='form-control'
|
||||
rows='5'
|
||||
placeholder="Idée d'amélioration, avis, remarque, partage d'expérience personnel, ... (Markdown autorisé)"
|
||||
/>
|
||||
</div>
|
||||
<div className='form-group' style={{ marginTop: '0.7em' }}>
|
||||
<button type='submit' className='btn btn-dark'>
|
||||
Envoyer
|
||||
</button>
|
||||
</div>
|
||||
<div className='text-center'>{htmlParser(message)}</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,11 @@ import htmlParser from 'html-react-parser'
|
||||
const FunctionArticle = ({ article }) => {
|
||||
return (
|
||||
<div style={{ marginBottom: '50px' }} className='container-fluid'>
|
||||
{(article != null) ? htmlParser(article) : <p className='text-center'>L'article n'est pas encore disponible.</p>}
|
||||
{article != null ? (
|
||||
htmlParser(article)
|
||||
) : (
|
||||
<p className='text-center'>L'article n'est pas encore disponible.</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.FunctionComments__row {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.FunctionComments__textarea {
|
||||
height: auto;
|
||||
resize: vertical;
|
||||
}
|
||||
height: auto;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
@ -18,49 +18,69 @@ const FunctionComments = ({ functionId }) => {
|
||||
|
||||
// Récupère les commentaires si la page change
|
||||
useEffect(() => {
|
||||
getCommentsData().then((data) => setCommentsData({
|
||||
hasMore: data.hasMore,
|
||||
rows: [...commentsData.rows, ...data.rows]
|
||||
}))
|
||||
getCommentsData().then(data =>
|
||||
setCommentsData({
|
||||
hasMore: data.hasMore,
|
||||
rows: [...commentsData.rows, ...data.rows]
|
||||
})
|
||||
)
|
||||
}, [pageComments])
|
||||
|
||||
// Permet la pagination au scroll
|
||||
const observer = useRef()
|
||||
const lastCommentCardRef = useCallback((node) => {
|
||||
if (isLoadingComments) return
|
||||
if (observer.current) observer.current.disconnect()
|
||||
observer.current = new window.IntersectionObserver((entries) => {
|
||||
if (entries[0].isIntersecting && commentsData.hasMore) {
|
||||
setPageComments(pageComments + 1)
|
||||
}
|
||||
}, { threshold: 1 })
|
||||
if (node) observer.current.observe(node)
|
||||
}, [isLoadingComments, commentsData.hasMore])
|
||||
const lastCommentCardRef = useCallback(
|
||||
node => {
|
||||
if (isLoadingComments) return
|
||||
if (observer.current) observer.current.disconnect()
|
||||
observer.current = new window.IntersectionObserver(
|
||||
entries => {
|
||||
if (entries[0].isIntersecting && commentsData.hasMore) {
|
||||
setPageComments(pageComments + 1)
|
||||
}
|
||||
},
|
||||
{ threshold: 1 }
|
||||
)
|
||||
if (node) observer.current.observe(node)
|
||||
},
|
||||
[isLoadingComments, commentsData.hasMore]
|
||||
)
|
||||
|
||||
const getCommentsData = async () => {
|
||||
setLoadingComments(true)
|
||||
const { data } = await api.get(`/comments/${functionId}/?page=${pageComments}&limit=10`)
|
||||
const { data } = await api.get(
|
||||
`/comments/${functionId}/?page=${pageComments}&limit=10`
|
||||
)
|
||||
setLoadingComments(false)
|
||||
return data
|
||||
}
|
||||
|
||||
const handleChange = (event) => {
|
||||
const handleChange = event => {
|
||||
const inputStateNew = { ...inputState }
|
||||
inputStateNew[event.target.name] = event.target.value
|
||||
setInputState(inputStateNew)
|
||||
}
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
const handleSubmit = async event => {
|
||||
setLoadingComments(true)
|
||||
event.preventDefault()
|
||||
const token = user.token
|
||||
if (isAuth && token != null && inputState.commentPost != null) {
|
||||
try {
|
||||
const response = await api.post(`/comments/${functionId}`, { message: inputState.commentPost }, { headers: { Authorization: token } })
|
||||
const comment = { ...response.data, user: { name: user.name, logo: user.logo } }
|
||||
setCommentsData({ hasMore: commentsData.hasMore, rows: [comment, ...commentsData.rows] })
|
||||
const response = await api.post(
|
||||
`/comments/${functionId}`,
|
||||
{ message: inputState.commentPost },
|
||||
{ headers: { Authorization: token } }
|
||||
)
|
||||
const comment = {
|
||||
...response.data,
|
||||
user: { name: user.name, logo: user.logo }
|
||||
}
|
||||
setCommentsData({
|
||||
hasMore: commentsData.hasMore,
|
||||
rows: [comment, ...commentsData.rows]
|
||||
})
|
||||
setInputState({ commentPost: '' })
|
||||
} catch { }
|
||||
} catch {}
|
||||
}
|
||||
setLoadingComments(false)
|
||||
}
|
||||
@ -70,40 +90,73 @@ const FunctionComments = ({ functionId }) => {
|
||||
<div className='FunctionComments__post container-fluid'>
|
||||
<div className='row FunctionComments__row'>
|
||||
<div className='col-24'>
|
||||
{
|
||||
(isAuth)
|
||||
? (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className='form-group FunctionComments__post-group'>
|
||||
<label className='form-label' htmlFor='commentPost'>Ajouter un commentaire :</label>
|
||||
<textarea className='FunctionComments__textarea form-control' value={inputState.commentPost} onChange={handleChange} name='commentPost' id='commentPost' placeholder="Idée d'amélioration, avis, remarque, partage d'expérience personnel, ... (Markdown autorisé)" />
|
||||
</div>
|
||||
<div className='form-group' style={{ marginTop: '0.7em' }}>
|
||||
<button type='submit' className='btn btn-dark'>Envoyer</button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
: (
|
||||
<p className='text-center'>
|
||||
Vous devez être <Link href='/users/login'><a>connecté</a></Link> pour poster un commentaire.
|
||||
</p>
|
||||
)
|
||||
}
|
||||
{isAuth ? (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className='form-group FunctionComments__post-group'>
|
||||
<label className='form-label' htmlFor='commentPost'>
|
||||
Ajouter un commentaire :
|
||||
</label>
|
||||
<textarea
|
||||
className='FunctionComments__textarea form-control'
|
||||
value={inputState.commentPost}
|
||||
onChange={handleChange}
|
||||
name='commentPost'
|
||||
id='commentPost'
|
||||
placeholder="Idée d'amélioration, avis, remarque, partage d'expérience personnel, ... (Markdown autorisé)"
|
||||
/>
|
||||
</div>
|
||||
<div className='form-group' style={{ marginTop: '0.7em' }}>
|
||||
<button type='submit' className='btn btn-dark'>
|
||||
Envoyer
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<p className='text-center'>
|
||||
Vous devez être{' '}
|
||||
<Link href='/users/login'>
|
||||
<a>connecté</a>
|
||||
</Link>{' '}
|
||||
pour poster un commentaire.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='container-fluid'>
|
||||
{isLoadingComments &&
|
||||
{isLoadingComments && (
|
||||
<div className='row justify-content-center'>
|
||||
<Loader />
|
||||
</div>}
|
||||
</div>
|
||||
)}
|
||||
<div className='row justify-content-center'>
|
||||
{commentsData.rows.map((comment, index) => {
|
||||
// Si c'est le dernier élément
|
||||
if (commentsData.rows.length === index + 1) {
|
||||
return <CommentCard key={comment.id} ref={lastCommentCardRef} {...comment} manageComment={{ setCommentsData, commentsData, setLoadingComments }} />
|
||||
return (
|
||||
<CommentCard
|
||||
key={comment.id}
|
||||
ref={lastCommentCardRef}
|
||||
{...comment}
|
||||
manageComment={{
|
||||
setCommentsData,
|
||||
commentsData,
|
||||
setLoadingComments
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
return <CommentCard key={comment.id} {...comment} manageComment={{ setCommentsData, commentsData, setLoadingComments }} />
|
||||
return (
|
||||
<CommentCard
|
||||
key={comment.id}
|
||||
{...comment}
|
||||
manageComment={{
|
||||
setCommentsData,
|
||||
commentsData,
|
||||
setLoadingComments
|
||||
}}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -9,7 +9,7 @@ import api from '../../utils/api'
|
||||
import { API_URL } from '../../utils/config/config'
|
||||
import '../FunctionCard/FunctionCard.css'
|
||||
|
||||
const FunctionComponentTop = (props) => {
|
||||
const FunctionComponentTop = props => {
|
||||
const { isAuth, user } = useContext(UserContext)
|
||||
const [isFavorite, setIsFavorite] = useState(false)
|
||||
|
||||
@ -21,7 +21,9 @@ const FunctionComponentTop = (props) => {
|
||||
|
||||
const fetchFavorite = async () => {
|
||||
try {
|
||||
const favoriteResponse = await api.get(`/favorites/${props.id}`, { headers: { Authorization: user.token } })
|
||||
const favoriteResponse = await api.get(`/favorites/${props.id}`, {
|
||||
headers: { Authorization: user.token }
|
||||
})
|
||||
setIsFavorite(favoriteResponse.data.isFavorite)
|
||||
} catch {}
|
||||
}
|
||||
@ -30,16 +32,22 @@ const FunctionComponentTop = (props) => {
|
||||
if (isAuth && user.token != null) {
|
||||
try {
|
||||
if (isFavorite) {
|
||||
const response = await api.delete(`/favorites/${props.id}`, { headers: { Authorization: user.token } })
|
||||
const response = await api.delete(`/favorites/${props.id}`, {
|
||||
headers: { Authorization: user.token }
|
||||
})
|
||||
if (response.status === 200) return setIsFavorite(false)
|
||||
}
|
||||
const response = await api.post(`/favorites/${props.id}`, {}, { headers: { Authorization: user.token } })
|
||||
const response = await api.post(
|
||||
`/favorites/${props.id}`,
|
||||
{},
|
||||
{ headers: { Authorization: user.token } }
|
||||
)
|
||||
if (response.status === 201) return setIsFavorite(true)
|
||||
} catch {}
|
||||
}
|
||||
}
|
||||
|
||||
const handleError = (event) => {
|
||||
const handleError = event => {
|
||||
event.target.src = API_URL + '/images/functions/default.png'
|
||||
}
|
||||
|
||||
@ -47,18 +55,44 @@ const FunctionComponentTop = (props) => {
|
||||
<div className='container-fluid'>
|
||||
<div className='row justify-content-center text-center'>
|
||||
<div className='FunctionComponent__top col-24'>
|
||||
{isAuth && (
|
||||
<FontAwesomeIcon
|
||||
onClick={toggleFavorite}
|
||||
{...(isFavorite ? { icon: faStar } : { icon: farStar })}
|
||||
title={
|
||||
isFavorite
|
||||
? 'Retirer la fonction des favoris'
|
||||
: 'Ajouter la fonction aux favoris'
|
||||
}
|
||||
className='FunctionComponent__star-favorite'
|
||||
/>
|
||||
)}
|
||||
|
||||
{(isAuth) &&
|
||||
<FontAwesomeIcon onClick={toggleFavorite} {...(isFavorite) ? { icon: faStar } : { icon: farStar }} title={(isFavorite) ? 'Retirer la fonction des favoris' : 'Ajouter la fonction aux favoris'} className='FunctionComponent__star-favorite' />}
|
||||
|
||||
<img onError={handleError} className='FunctionComponent__image' src={API_URL + props.image} alt={props.title} />
|
||||
<h1 className='FunctionComponent__title title-important'>{props.title}</h1>
|
||||
<img
|
||||
onError={handleError}
|
||||
className='FunctionComponent__image'
|
||||
src={API_URL + props.image}
|
||||
alt={props.title}
|
||||
/>
|
||||
<h1 className='FunctionComponent__title title-important'>
|
||||
{props.title}
|
||||
</h1>
|
||||
<p className='FunctionComponent__description'>{props.description}</p>
|
||||
<div className='FunctionCard__info'>
|
||||
<Link href={`/functions?categoryId=${props.categorieId}`}>
|
||||
<a className='FunctionCard__category' style={{ backgroundColor: props.categorie.color, color: 'inherit' }}>{props.categorie.name}</a>
|
||||
<a
|
||||
className='FunctionCard__category'
|
||||
style={{
|
||||
backgroundColor: props.categorie.color,
|
||||
color: 'inherit'
|
||||
}}
|
||||
>
|
||||
{props.categorie.name}
|
||||
</a>
|
||||
</Link>
|
||||
<p className='FunctionCard__publication-date'>{date.format(new Date(props.createdAt), 'DD/MM/YYYY', true)}</p>
|
||||
<p className='FunctionCard__publication-date'>
|
||||
{date.format(new Date(props.createdAt), 'DD/MM/YYYY', true)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,7 +10,7 @@ import 'react-datepicker/dist/react-datepicker.css'
|
||||
|
||||
registerLocale('fr', fr)
|
||||
|
||||
const FunctionForm = (props) => {
|
||||
const FunctionForm = props => {
|
||||
const [inputState, setInputState] = useState({})
|
||||
const [message, setMessage] = useState('')
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
@ -18,7 +18,7 @@ const FunctionForm = (props) => {
|
||||
// inputState par défaut
|
||||
useEffect(() => {
|
||||
const inputStateNew = { ...inputState }
|
||||
props.inputsArray.forEach((input) => {
|
||||
props.inputsArray.forEach(input => {
|
||||
if (input.type === 'select' && input.options.length > 0) {
|
||||
inputStateNew[input.name] = input.options[0].value
|
||||
}
|
||||
@ -26,21 +26,22 @@ const FunctionForm = (props) => {
|
||||
setInputState(inputStateNew)
|
||||
}, [])
|
||||
|
||||
const handleSubmit = (event) => {
|
||||
const handleSubmit = event => {
|
||||
setIsLoading(true)
|
||||
event.preventDefault()
|
||||
api.post(`/functions/${props.slug}`, inputState)
|
||||
.then((response) => {
|
||||
api
|
||||
.post(`/functions/${props.slug}`, inputState)
|
||||
.then(response => {
|
||||
setMessage(response.data.resultHTML)
|
||||
setIsLoading(false)
|
||||
})
|
||||
.catch((error) => {
|
||||
.catch(error => {
|
||||
setMessage(error.response.data.message)
|
||||
setIsLoading(false)
|
||||
})
|
||||
}
|
||||
|
||||
const handleChange = (event) => {
|
||||
const handleChange = event => {
|
||||
const inputStateNew = { ...inputState }
|
||||
inputStateNew[event.target.name] = event.target.value
|
||||
setInputState(inputStateNew)
|
||||
@ -61,16 +62,35 @@ const FunctionForm = (props) => {
|
||||
case 'text':
|
||||
return (
|
||||
<div key={index} className='form-group'>
|
||||
<label className='form-label' htmlFor={input.name}>{input.label}</label>
|
||||
<input onChange={handleChange} type='text' name={input.name} id={input.name} placeholder={input.placeholder} className='form-control' />
|
||||
<label className='form-label' htmlFor={input.name}>
|
||||
{input.label}
|
||||
</label>
|
||||
<input
|
||||
onChange={handleChange}
|
||||
type='text'
|
||||
name={input.name}
|
||||
id={input.name}
|
||||
placeholder={input.placeholder}
|
||||
className='form-control'
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
case 'integer':
|
||||
case 'float':
|
||||
return (
|
||||
<div key={index} className='form-group'>
|
||||
<label className='form-label' htmlFor={input.name}>{input.label}</label>
|
||||
<input onChange={handleChange} type='number' step={(input.type === 'integer') ? '1' : '0.01'} name={input.name} id={input.name} placeholder={input.placeholder} className='form-control' />
|
||||
<label className='form-label' htmlFor={input.name}>
|
||||
{input.label}
|
||||
</label>
|
||||
<input
|
||||
onChange={handleChange}
|
||||
type='number'
|
||||
step={input.type === 'integer' ? '1' : '0.01'}
|
||||
name={input.name}
|
||||
id={input.name}
|
||||
placeholder={input.placeholder}
|
||||
className='form-control'
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
case 'calendar':
|
||||
@ -81,13 +101,14 @@ const FunctionForm = (props) => {
|
||||
document.body.appendChild(newScript)
|
||||
}
|
||||
// eslint-disable-next-line
|
||||
const DatePicker = dynamic(
|
||||
() => import('react-datepicker'),
|
||||
{ ssr: false }
|
||||
)
|
||||
const DatePicker = dynamic(() => import('react-datepicker'), {
|
||||
ssr: false
|
||||
})
|
||||
return (
|
||||
<div key={index} className='form-group'>
|
||||
<label className='form-label' htmlFor={input.name}>{input.label}</label>
|
||||
<label className='form-label' htmlFor={input.name}>
|
||||
{input.label}
|
||||
</label>
|
||||
<br />
|
||||
<DatePicker
|
||||
selected={(() => {
|
||||
@ -97,7 +118,11 @@ const FunctionForm = (props) => {
|
||||
const year = dateArray[2]
|
||||
const month = dateArray[1]
|
||||
const day = dateArray[0]
|
||||
return new Date(year, parseInt(month) - 1, parseInt(day) + 1)
|
||||
return new Date(
|
||||
year,
|
||||
parseInt(month) - 1,
|
||||
parseInt(day) + 1
|
||||
)
|
||||
}
|
||||
throw new Error('Not a valid date')
|
||||
} catch {
|
||||
@ -108,9 +133,13 @@ const FunctionForm = (props) => {
|
||||
dateFormat='dd/MM/yyyy'
|
||||
fixedHeight
|
||||
placeholderText={input.placeholder}
|
||||
onChange={(dateObject) => {
|
||||
onChange={dateObject => {
|
||||
try {
|
||||
const formattedDate = date.format(dateObject, 'DD/MM/YYYY', true)
|
||||
const formattedDate = date.format(
|
||||
dateObject,
|
||||
'DD/MM/YYYY',
|
||||
true
|
||||
)
|
||||
handleChange({
|
||||
target: {
|
||||
name: input.name,
|
||||
@ -125,33 +154,39 @@ const FunctionForm = (props) => {
|
||||
case 'select':
|
||||
return (
|
||||
<div key={index} className='form-group'>
|
||||
<label className='form-label' htmlFor={input.name}>{input.label}</label>
|
||||
<select onChange={handleChange} name={input.name} id={input.name} value={inputState[input.name] || input.options[0]} className='form-control'>
|
||||
<label className='form-label' htmlFor={input.name}>
|
||||
{input.label}
|
||||
</label>
|
||||
<select
|
||||
onChange={handleChange}
|
||||
name={input.name}
|
||||
id={input.name}
|
||||
value={inputState[input.name] || input.options[0]}
|
||||
className='form-control'
|
||||
>
|
||||
{input.options.map((option, optionIndex) => {
|
||||
return (
|
||||
<option key={optionIndex} value={option.value}>{option.name}</option>
|
||||
<option key={optionIndex} value={option.value}>
|
||||
{option.name}
|
||||
</option>
|
||||
)
|
||||
})}
|
||||
</select>
|
||||
</div>
|
||||
)
|
||||
default:
|
||||
return (
|
||||
<p>Erreur, l'input n'est pas valide...</p>
|
||||
)
|
||||
return <p>Erreur, l'input n'est pas valide...</p>
|
||||
}
|
||||
})}
|
||||
|
||||
<div className='form-group text-center'>
|
||||
<button type='submit' className='btn btn-dark'>Envoyer</button>
|
||||
<button type='submit' className='btn btn-dark'>
|
||||
Envoyer
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div className='form-result text-center'>
|
||||
{
|
||||
(isLoading)
|
||||
? <Loader />
|
||||
: htmlParser(message)
|
||||
}
|
||||
{isLoading ? <Loader /> : htmlParser(message)}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
@ -4,17 +4,29 @@ import HeadTag from '../HeadTag'
|
||||
import FunctionTabsTop from './FunctionTabsTop'
|
||||
import FunctionComponentTop from './FunctionComponentTop'
|
||||
|
||||
const FunctionPage = (props) => {
|
||||
const FunctionPage = props => {
|
||||
const [slideIndex, setSlideIndex] = useState(0)
|
||||
|
||||
return (
|
||||
<>
|
||||
<HeadTag title={props.title} description={props.description} image={API_URL + props.image} />
|
||||
<HeadTag
|
||||
title={props.title}
|
||||
description={props.description}
|
||||
image={API_URL + props.image}
|
||||
/>
|
||||
|
||||
<div className='container-fluid'>
|
||||
<FunctionTabsTop slideIndex={slideIndex} setSlideIndex={setSlideIndex} tabNames={props.tabNames} />
|
||||
<FunctionTabsTop
|
||||
slideIndex={slideIndex}
|
||||
setSlideIndex={setSlideIndex}
|
||||
tabNames={props.tabNames}
|
||||
/>
|
||||
<FunctionComponentTop {...props} />
|
||||
<props.FunctionTabManager {...props} slideIndex={slideIndex} setSlideIndex={setSlideIndex} />
|
||||
<props.FunctionTabManager
|
||||
{...props}
|
||||
slideIndex={slideIndex}
|
||||
setSlideIndex={setSlideIndex}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
@ -1,41 +1,41 @@
|
||||
.FunctionTabs__nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
border-bottom: 1px solid #d9e2ef;
|
||||
margin-bottom: -1px;
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
border-bottom: 1px solid #d9e2ef;
|
||||
margin-bottom: -1px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.FunctionTabs__nav-item {
|
||||
margin-bottom: -1px;
|
||||
cursor: pointer;
|
||||
margin-bottom: -1px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.FunctionTabs__nav-link {
|
||||
color: var(--text-color);
|
||||
border: 1px solid #0c0b0b38;
|
||||
border-bottom: 0px;
|
||||
border-top-left-radius: .375rem;
|
||||
border-top-right-radius: .375rem;
|
||||
display: block;
|
||||
padding: .5rem 1rem;
|
||||
transition: .2s;
|
||||
color: var(--text-color);
|
||||
border: 1px solid #0c0b0b38;
|
||||
border-bottom: 0px;
|
||||
border-top-left-radius: 0.375rem;
|
||||
border-top-right-radius: 0.375rem;
|
||||
display: block;
|
||||
padding: 0.5rem 1rem;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.FunctionTabs__nav-link-active {
|
||||
border-color: #d9e2ef #d9e2ef #fff;
|
||||
color: var(--important);
|
||||
border-color: #d9e2ef #d9e2ef #fff;
|
||||
color: var(--important);
|
||||
}
|
||||
.FunctionTabs__nav-link:hover {
|
||||
border-color: #f1f4f8 #f1f4f8 #d9e2ef;
|
||||
text-decoration: none;
|
||||
border-color: #f1f4f8 #f1f4f8 #d9e2ef;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (max-width: 490px) {
|
||||
.FunctionTabs__nav {
|
||||
flex-direction: column;
|
||||
}
|
||||
.FunctionTabs__nav-link {
|
||||
border-color: #f1f4f8 #f1f4f8 #d9e2ef;
|
||||
}
|
||||
}
|
||||
.FunctionTabs__nav {
|
||||
flex-direction: column;
|
||||
}
|
||||
.FunctionTabs__nav-link {
|
||||
border-color: #f1f4f8 #f1f4f8 #d9e2ef;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,10 +1,13 @@
|
||||
import SwipeableViews from 'react-swipeable-views'
|
||||
import './FunctionTabs.css'
|
||||
|
||||
const FunctionTabs = (props) => {
|
||||
const FunctionTabs = props => {
|
||||
return (
|
||||
<div className='container-fluid'>
|
||||
<SwipeableViews onChangeIndex={(index) => props.setSlideIndex(index)} index={props.slideIndex}>
|
||||
<SwipeableViews
|
||||
onChangeIndex={index => props.setSlideIndex(index)}
|
||||
index={props.slideIndex}
|
||||
>
|
||||
{props.children}
|
||||
</SwipeableViews>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
const FunctionTabsTop = (props) => {
|
||||
const FunctionTabsTop = props => {
|
||||
return (
|
||||
<div className='container'>
|
||||
<div className='row justify-content-center'>
|
||||
@ -7,7 +7,11 @@ const FunctionTabsTop = (props) => {
|
||||
return (
|
||||
<li key={index} className='FunctionTabs__nav-item'>
|
||||
<a
|
||||
className={`FunctionTabs__nav-link ${(props.slideIndex === index) ? 'FunctionTabs__nav-link-active' : ''}`}
|
||||
className={`FunctionTabs__nav-link ${
|
||||
props.slideIndex === index
|
||||
? 'FunctionTabs__nav-link-active'
|
||||
: ''
|
||||
}`}
|
||||
onClick={() => props.setSlideIndex(index)}
|
||||
>
|
||||
{tabName}
|
||||
|
||||
@ -1,40 +1,40 @@
|
||||
.Functions__title {
|
||||
padding: 20px 0 20px 0;
|
||||
margin-bottom: 0;
|
||||
padding: 20px 0 20px 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.Functions__form-control {
|
||||
display: block;
|
||||
height: calc(1.5em + .75rem + 2px);
|
||||
padding: .375rem .75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #495057;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: .5em;
|
||||
display: block;
|
||||
height: calc(1.5em + 0.75rem + 2px);
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #495057;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
.Functions__search-container {
|
||||
margin-bottom: 50px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.Functions__select-option {
|
||||
color: rgb(221, 220, 220);
|
||||
color: rgb(221, 220, 220);
|
||||
}
|
||||
.Functions__search-input {
|
||||
width: 40%;
|
||||
width: 40%;
|
||||
}
|
||||
/* col-sm */
|
||||
@media (max-width: 576px) {
|
||||
.Functions__search-container {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.Functions__select {
|
||||
width: 90%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.Functions__search-input {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
.Functions__search-container {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.Functions__select {
|
||||
width: 90%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.Functions__search-input {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,15 +7,21 @@ import useAPI from '../../hooks/useAPI'
|
||||
import './FunctionsList.css'
|
||||
|
||||
let pageFunctions = 1
|
||||
const FunctionsList = (props) => {
|
||||
const FunctionsList = props => {
|
||||
const { categoryId } = useRouter().query
|
||||
|
||||
// State de recherche et de catégories
|
||||
const [, categories] = useAPI('/categories')
|
||||
const [inputSearch, setInputSearch] = useState({ search: '', selectedCategory: categoryId || '0' })
|
||||
const [inputSearch, setInputSearch] = useState({
|
||||
search: '',
|
||||
selectedCategory: categoryId || '0'
|
||||
})
|
||||
|
||||
// State pour afficher les fonctions
|
||||
const [functionsData, setFunctionsData] = useState({ hasMore: true, rows: [] })
|
||||
const [functionsData, setFunctionsData] = useState({
|
||||
hasMore: true,
|
||||
rows: []
|
||||
})
|
||||
const [isLoadingFunctions, setLoadingFunctions] = useState(true)
|
||||
|
||||
// Récupère la catégorie avec la query categoryId
|
||||
@ -28,43 +34,54 @@ const FunctionsList = (props) => {
|
||||
// Récupère les fonctions si la catégorie/recherche change
|
||||
useEffect(() => {
|
||||
pageFunctions = 1
|
||||
getFunctionsData().then((data) => setFunctionsData(data))
|
||||
getFunctionsData().then(data => setFunctionsData(data))
|
||||
}, [inputSearch])
|
||||
|
||||
// Permet la pagination au scroll
|
||||
const observer = useRef()
|
||||
const lastFunctionCardRef = useCallback((node) => {
|
||||
if (isLoadingFunctions) return
|
||||
if (observer.current) observer.current.disconnect()
|
||||
observer.current = new window.IntersectionObserver((entries) => {
|
||||
if (entries[0].isIntersecting && functionsData.hasMore) {
|
||||
pageFunctions += 1
|
||||
getFunctionsData().then((data) => {
|
||||
setFunctionsData((oldData) => {
|
||||
return {
|
||||
hasMore: data.hasMore,
|
||||
rows: [...oldData.rows, ...data.rows]
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}, { threshold: 1 })
|
||||
if (node) observer.current.observe(node)
|
||||
}, [isLoadingFunctions, functionsData.hasMore])
|
||||
const lastFunctionCardRef = useCallback(
|
||||
node => {
|
||||
if (isLoadingFunctions) return
|
||||
if (observer.current) observer.current.disconnect()
|
||||
observer.current = new window.IntersectionObserver(
|
||||
entries => {
|
||||
if (entries[0].isIntersecting && functionsData.hasMore) {
|
||||
pageFunctions += 1
|
||||
getFunctionsData().then(data => {
|
||||
setFunctionsData(oldData => {
|
||||
return {
|
||||
hasMore: data.hasMore,
|
||||
rows: [...oldData.rows, ...data.rows]
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
{ threshold: 1 }
|
||||
)
|
||||
if (node) observer.current.observe(node)
|
||||
},
|
||||
[isLoadingFunctions, functionsData.hasMore]
|
||||
)
|
||||
|
||||
const getFunctionsData = async () => {
|
||||
setLoadingFunctions(true)
|
||||
const URL = `${(props.isAdmin) ? '/admin/functions' : '/functions'}?page=${pageFunctions}&limit=10&categoryId=${inputSearch.selectedCategory}&search=${inputSearch.search}`
|
||||
const URL = `${
|
||||
props.isAdmin ? '/admin/functions' : '/functions'
|
||||
}?page=${pageFunctions}&limit=10&categoryId=${
|
||||
inputSearch.selectedCategory
|
||||
}&search=${inputSearch.search}`
|
||||
const { data } = await api.get(URL, {
|
||||
headers: {
|
||||
...(props.isAdmin && props.token != null) && { Authorization: props.token }
|
||||
...(props.isAdmin &&
|
||||
props.token != null && { Authorization: props.token })
|
||||
}
|
||||
})
|
||||
setLoadingFunctions(false)
|
||||
return data
|
||||
}
|
||||
|
||||
const handleChange = (event) => {
|
||||
const handleChange = event => {
|
||||
const inputSearchNew = { ...inputSearch }
|
||||
inputSearchNew[event.target.name] = event.target.value
|
||||
setInputSearch(inputSearchNew)
|
||||
@ -72,27 +89,58 @@ const FunctionsList = (props) => {
|
||||
|
||||
return (
|
||||
<div className='container text-center'>
|
||||
<div className='row justify-content-center'>
|
||||
{props.children}
|
||||
</div>
|
||||
<div className='row justify-content-center'>{props.children}</div>
|
||||
|
||||
<div className='Functions__search-container row justify-content-center'>
|
||||
<select name='selectedCategory' value={inputSearch.selectedCategory} onChange={handleChange} className='Functions__select Functions__form-control'>
|
||||
<select
|
||||
name='selectedCategory'
|
||||
value={inputSearch.selectedCategory}
|
||||
onChange={handleChange}
|
||||
className='Functions__select Functions__form-control'
|
||||
>
|
||||
<option value='0'>Toutes catégories</option>
|
||||
{categories.map((category) => (
|
||||
<option key={category.id} value={category.id} className='Functions__select-option' style={{ backgroundColor: category.color }}>{category.name}</option>
|
||||
{categories.map(category => (
|
||||
<option
|
||||
key={category.id}
|
||||
value={category.id}
|
||||
className='Functions__select-option'
|
||||
style={{ backgroundColor: category.color }}
|
||||
>
|
||||
{category.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<input value={inputSearch.search} onChange={handleChange} type='search' className='Functions__form-control Functions__search-input' name='search' id='search' placeholder='🔎 Rechercher...' />
|
||||
<input
|
||||
value={inputSearch.search}
|
||||
onChange={handleChange}
|
||||
type='search'
|
||||
className='Functions__form-control Functions__search-input'
|
||||
name='search'
|
||||
id='search'
|
||||
placeholder='🔎 Rechercher...'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='row justify-content-center'>
|
||||
{functionsData.rows.map((currentFunction, index) => {
|
||||
// Si c'est le dernier élément
|
||||
if (functionsData.rows.length === index + 1) {
|
||||
return <FunctionCard isAdmin={props.isAdmin} key={currentFunction.id} ref={lastFunctionCardRef} {...currentFunction} />
|
||||
return (
|
||||
<FunctionCard
|
||||
isAdmin={props.isAdmin}
|
||||
key={currentFunction.id}
|
||||
ref={lastFunctionCardRef}
|
||||
{...currentFunction}
|
||||
/>
|
||||
)
|
||||
}
|
||||
return <FunctionCard isAdmin={props.isAdmin} key={currentFunction.id} {...currentFunction} />
|
||||
return (
|
||||
<FunctionCard
|
||||
isAdmin={props.isAdmin}
|
||||
key={currentFunction.id}
|
||||
{...currentFunction}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
{isLoadingFunctions && <Loader />}
|
||||
|
||||
@ -36,7 +36,8 @@ const HeadTag = ({ title, image, description }) => (
|
||||
|
||||
HeadTag.defaultProps = {
|
||||
title: 'FunctionProject',
|
||||
description: "Apprenez la programmation grâce à l'apprentissage par projet alias fonction.",
|
||||
description:
|
||||
"Apprenez la programmation grâce à l'apprentissage par projet alias fonction.",
|
||||
image: '/images/FunctionProject_icon_small.png'
|
||||
}
|
||||
|
||||
|
||||
@ -1,161 +1,167 @@
|
||||
/* HEADER */
|
||||
.Header {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: .5rem 1rem;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem 1rem;
|
||||
|
||||
border-bottom: var(--border-header-footer);
|
||||
background-color: var(--background-color);
|
||||
border-bottom: var(--border-header-footer);
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.Header {
|
||||
flex-flow: row nowrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.Header {
|
||||
flex-flow: row nowrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
.Header > .container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.Header > .container {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.Header > .container {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
/* Brand */
|
||||
.Header__brand-link {
|
||||
display: inline-block;
|
||||
padding-top: .3125rem;
|
||||
padding-bottom: .3125rem;
|
||||
margin-right: 1rem;
|
||||
font-size: 1.25rem;
|
||||
line-height: inherit;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
padding-top: 0.3125rem;
|
||||
padding-bottom: 0.3125rem;
|
||||
margin-right: 1rem;
|
||||
font-size: 1.25rem;
|
||||
line-height: inherit;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#brand-link__logo-small-screen {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 496px) {
|
||||
#brand-link__logo {
|
||||
display: none;
|
||||
}
|
||||
.Header__brand-link {
|
||||
width: 30%;
|
||||
}
|
||||
#brand-link__logo-small-screen {
|
||||
display: inline-block;
|
||||
}
|
||||
#brand-link__logo {
|
||||
display: none;
|
||||
}
|
||||
.Header__brand-link {
|
||||
width: 30%;
|
||||
}
|
||||
#brand-link__logo-small-screen {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.Header .Header__navbar {
|
||||
display: flex;
|
||||
flex-basis: auto;
|
||||
}
|
||||
.Header .Header__navbar {
|
||||
display: flex;
|
||||
flex-basis: auto;
|
||||
}
|
||||
}
|
||||
.Header__navbar {
|
||||
flex-basis: 100%;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
flex-basis: 100%;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
}
|
||||
.navbar__list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-left: auto;
|
||||
}
|
||||
.navbar__list.navbar__list-active {
|
||||
margin: 0 !important;
|
||||
display: flex;
|
||||
margin: 0 !important;
|
||||
display: flex;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
.navbar__list {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.navbar__list {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
.navbar-link {
|
||||
display: block;
|
||||
padding: .5rem 1rem;
|
||||
display: block;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
/* Details Styling */
|
||||
.navbar-link:hover {
|
||||
text-decoration: none;
|
||||
color: rgba(255, 255, 255, .75);
|
||||
text-decoration: none;
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
.navbar-link, .navbar-link-active {
|
||||
color: rgba(255, 255, 255, .5);
|
||||
.navbar-link,
|
||||
.navbar-link-active {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.navbar-link-active, .navbar-link-active:hover, .Header__brand-link {
|
||||
color: var(--text-color);
|
||||
.navbar-link-active,
|
||||
.navbar-link-active:hover,
|
||||
.Header__brand-link {
|
||||
color: var(--text-color);
|
||||
}
|
||||
.navbar-item {
|
||||
list-style: none;
|
||||
list-style: none;
|
||||
}
|
||||
.navbar-link {
|
||||
font-size: 16px;
|
||||
padding: .5rem;
|
||||
font-size: 16px;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
/* Hamburger Icon */
|
||||
.Header__hamburger {
|
||||
display: none;
|
||||
width: 56px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, .1);
|
||||
border-radius: .25rem;
|
||||
position: relative;
|
||||
display: none;
|
||||
width: 56px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 0.25rem;
|
||||
position: relative;
|
||||
}
|
||||
.Header__hamburger > span, .Header__hamburger > span::before, .Header__hamburger > span::after {
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 1.3px;
|
||||
background-color: rgba(255, 255, 255);
|
||||
.Header__hamburger > span,
|
||||
.Header__hamburger > span::before,
|
||||
.Header__hamburger > span::after {
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 1.3px;
|
||||
background-color: rgba(255, 255, 255);
|
||||
}
|
||||
.Header__hamburger > span {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: background-color .3s ease-in-out;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: background-color 0.3s ease-in-out;
|
||||
}
|
||||
.Header__hamburger > span::before, .Header__hamburger > span::after {
|
||||
content: '';
|
||||
transition: transform .3s ease-in-out;
|
||||
.Header__hamburger > span::before,
|
||||
.Header__hamburger > span::after {
|
||||
content: '';
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
.Header__hamburger > span::before {
|
||||
transform: translateY(-8px);
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
.Header__hamburger > span::after {
|
||||
transform: translateY(8px);
|
||||
transform: translateY(8px);
|
||||
}
|
||||
.Header__hamburger-active span {
|
||||
background-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
.Header__hamburger-active > span::before {
|
||||
transform: translateY(0px) rotateZ(45deg);
|
||||
transform: translateY(0px) rotateZ(45deg);
|
||||
}
|
||||
.Header__hamburger-active > span::after {
|
||||
transform: translateY(0px) rotateZ(-45deg);
|
||||
transform: translateY(0px) rotateZ(-45deg);
|
||||
}
|
||||
/* Apparition du hamburger */
|
||||
@media (max-width: 992px) {
|
||||
.Header__hamburger {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.Header__hamburger {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,56 +17,74 @@ export default function Header () {
|
||||
return (
|
||||
<header className='Header'>
|
||||
<div className='container'>
|
||||
|
||||
{/* Brand */}
|
||||
<Link href='/'>
|
||||
<a className='Header__brand-link'>
|
||||
<img id='brand-link__logo' src='/images/FunctionProject_brand-logo.png' alt='FunctionProject' />
|
||||
<img id='brand-link__logo-small-screen' src='/images/FunctionProject_icon_small.png' alt='FunctionProject' />
|
||||
<img
|
||||
id='brand-link__logo'
|
||||
src='/images/FunctionProject_brand-logo.png'
|
||||
alt='FunctionProject'
|
||||
/>
|
||||
<img
|
||||
id='brand-link__logo-small-screen'
|
||||
src='/images/FunctionProject_icon_small.png'
|
||||
alt='FunctionProject'
|
||||
/>
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
{/* Hamburger icon on Mobile */}
|
||||
<div onClick={toggleNavbar} className={`Header__hamburger ${(isActive) ? 'Header__hamburger-active' : ''}`}>
|
||||
<div
|
||||
onClick={toggleNavbar}
|
||||
className={`Header__hamburger ${
|
||||
isActive ? 'Header__hamburger-active' : ''
|
||||
}`}
|
||||
>
|
||||
<span />
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className='Header__navbar'>
|
||||
<ul className={`navbar__list ${(isActive) ? 'navbar__list-active' : ''}`}>
|
||||
<ul
|
||||
className={`navbar__list ${isActive ? 'navbar__list-active' : ''}`}
|
||||
>
|
||||
<NavigationLink name='Accueil' path='/' />
|
||||
<NavigationLink name='Fonctions' path='/functions' />
|
||||
<NavigationLink name='Utilisateurs' path='/users' />
|
||||
{
|
||||
(!isAuth)
|
||||
? (
|
||||
<>
|
||||
<NavigationLink name="S'inscrire" path='/users/register' />
|
||||
<NavigationLink name='Connexion' path='/users/login' />
|
||||
</>
|
||||
)
|
||||
: (
|
||||
<>
|
||||
<li className='navbar-item'>
|
||||
<Link href='/users/[name]' as={`/users/${user.name}`}>
|
||||
<a className={`navbar-link ${pathname === '/users/[name]' ? 'navbar-link-active' : null}`}>Mon Profil</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li className='navbar-item'>
|
||||
<Link href='/'>
|
||||
<a onClick={logoutUser} className='navbar-link'>Se déconnecter</a>
|
||||
</Link>
|
||||
</li>
|
||||
</>
|
||||
)
|
||||
}
|
||||
{
|
||||
(isAuth && user.isAdmin) &&
|
||||
<NavigationLink name='Admin' path='/admin' />
|
||||
}
|
||||
{!isAuth ? (
|
||||
<>
|
||||
<NavigationLink name="S'inscrire" path='/users/register' />
|
||||
<NavigationLink name='Connexion' path='/users/login' />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<li className='navbar-item'>
|
||||
<Link href='/users/[name]' as={`/users/${user.name}`}>
|
||||
<a
|
||||
className={`navbar-link ${
|
||||
pathname === '/users/[name]'
|
||||
? 'navbar-link-active'
|
||||
: null
|
||||
}`}
|
||||
>
|
||||
Mon Profil
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li className='navbar-item'>
|
||||
<Link href='/'>
|
||||
<a onClick={logoutUser} className='navbar-link'>
|
||||
Se déconnecter
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
{isAuth && user.isAdmin && (
|
||||
<NavigationLink name='Admin' path='/admin' />
|
||||
)}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
|
||||
@ -8,7 +8,11 @@ export default function NavigationLink (props) {
|
||||
return (
|
||||
<li className='navbar-item'>
|
||||
<Link href={props.path}>
|
||||
<a className={`navbar-link ${pathname === props.path ? 'navbar-link-active' : null}`}>
|
||||
<a
|
||||
className={`navbar-link ${
|
||||
pathname === props.path ? 'navbar-link-active' : null
|
||||
}`}
|
||||
>
|
||||
{props.name}
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
@ -1,7 +1,17 @@
|
||||
const Loader = ({ width, height, speed }) => (
|
||||
<svg width={width} height={height} viewBox='0 0 100 100'>
|
||||
<g transform='translate(50 50) rotate(0) scale(1 1) translate(-50 -50)'>
|
||||
<image style={{ transformOrigin: '50% 50%', animation: `${speed} linear 0s infinite normal forwards running Loader__spin` }} x='0' y='0' width='100' height='100' href='/images/FunctionProject_icon.png' />
|
||||
<image
|
||||
style={{
|
||||
transformOrigin: '50% 50%',
|
||||
animation: `${speed} linear 0s infinite normal forwards running Loader__spin`
|
||||
}}
|
||||
x='0'
|
||||
y='0'
|
||||
width='100'
|
||||
height='100'
|
||||
href='/images/FunctionProject_icon.png'
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
const Modal = (props) => (
|
||||
const Modal = props => (
|
||||
<div className='Modal container-fluid'>
|
||||
<div className='Modal__content'>
|
||||
{props.children}
|
||||
</div>
|
||||
<div className='Modal__content'>{props.children}</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user