theoludwig/FunctionProject
Archived
1
1
Fork 0
Code Pull Requests Actions Releases Activity

🎨 website/utils API_URL + standardJS

Browse Source
This commit is contained in:
divlo
2020-08-03 14:37:05 +02:00
parent 4be7a46a10
commit 653068c9c7
20 changed files with 1108 additions and 501 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
website/pages/functions/[slug].jsx
View File

@ -7,12 +7,18 @@ import redirect from '../../utils/redirect'
import api from '../../utils/api'
import '../../public/css/pages/FunctionComponent.css'
const FunctionTabManager = (props) => {
const FunctionTabManager = props => {
if (props.type === 'form') {
return (
<FunctionTabs setSlideIndex={props.setSlideIndex} slideIndex={props.slideIndex}>
<FunctionTabs
setSlideIndex={props.setSlideIndex}
slideIndex={props.slideIndex}
>
<div className='FunctionComponent__slide'>
<FunctionForm inputsArray={[...props.utilizationForm || []]} slug={props.slug} />
<FunctionForm
inputsArray={[...(props.utilizationForm || [])]}
slug={props.slug}
/>
</div>
<div className='FunctionComponent__slide'>
<FunctionArticle article={props.article} />
@ -25,7 +31,10 @@ const FunctionTabManager = (props) => {
}
return (
<FunctionTabs setSlideIndex={props.setSlideIndex} slideIndex={props.slideIndex}>
<FunctionTabs
setSlideIndex={props.setSlideIndex}
slideIndex={props.slideIndex}
>
<div className='FunctionComponent__slide'>
<FunctionArticle article={props.article} />
</div>
@ -36,18 +45,23 @@ const FunctionTabManager = (props) => {
)
}
const FunctionComponent = (props) => (
const FunctionComponent = props => (
<FunctionPage
FunctionTabManager={FunctionTabManager}
{...props}
tabNames={(props.type === 'form') ? ['⚙️ Utilisation', '📝 Article', '📬 Commentaires'] : ['📝 Article', '📬 Commentaires']}
tabNames={
props.type === 'form'
? ['⚙️ Utilisation', '📝 Article', '📬 Commentaires']
: ['📝 Article', '📬 Commentaires']
}
/>
)
export async function getServerSideProps (context) {
const { slug } = context.params
return api.get(`/functions/${slug}`)
.then((response) => ({ props: response.data }))
return api
.get(`/functions/${slug}`)
.then(response => ({ props: response.data }))
.catch(() => redirect(context, '/404'))
}

47
website/pages/functions/chronometerTimer.jsx
View File

@ -30,7 +30,7 @@ const Chronometer = () => {
} else {
if (interval) clearInterval(interval)
interval = setInterval(() => {
setTimeLength((time) => time + 1)
setTimeLength(time => time + 1)
}, 1000)
}
setIsPlaying(!isPlaying)
@ -44,7 +44,10 @@ const Chronometer = () => {
const getFormattedValue = () => {
const minutesAndSeconds = convertSeconds(timeLength)
const minutes = (minutesAndSeconds.minutes < 100) ? (('0' + minutesAndSeconds.minutes).slice(-2)) : minutesAndSeconds.minutes
const minutes =
minutesAndSeconds.minutes < 100
? ('0' + minutesAndSeconds.minutes).slice(-2)
: minutesAndSeconds.minutes
const seconds = ('0' + minutesAndSeconds.seconds).slice(-2)
return `${minutes}:${seconds}`
}
@ -65,9 +68,15 @@ const Chronometer = () => {
<div className='Chronometer__item Chronometer__buttons'>
<div className='Chronomter__row Chronometer__row-button'>
<button onClick={handlePlayPause} className='Chronometer-btn'>
<FontAwesomeIcon {...(isPlaying) ? { icon: faPause } : { icon: faPlay }} />
<FontAwesomeIcon
{...(isPlaying ? { icon: faPause } : { icon: faPlay })}
/>
</button>
<button onClick={handleReset} className='Chronometer-btn' title='Remettre à zéro ?'>
<button
onClick={handleReset}
className='Chronometer-btn'
title='Remettre à zéro ?'
>
<FontAwesomeIcon icon={faSync} />
</button>
</div>
@ -82,14 +91,24 @@ const Chronometer = () => {
const Pomodoro = () => {
return (
<div style={{ marginBottom: '50px' }} className='container-fluid'>
<Codepen hash='vYEbPoB' user='Divlo' height={800} defaultTab='result' preview={false} loader={() => <Loader />} />
<Codepen
hash='vYEbPoB'
user='Divlo'
height={800}
defaultTab='result'
preview={false}
loader={() => <Loader />}
/>
</div>
)
}
const FunctionTabManager = (props) => {
const FunctionTabManager = props => {
return (
<FunctionTabs setSlideIndex={props.setSlideIndex} slideIndex={props.slideIndex}>
<FunctionTabs
setSlideIndex={props.setSlideIndex}
slideIndex={props.slideIndex}
>
<div className='FunctionComponent__slide'>
<Chronometer />
</div>
@ -106,17 +125,23 @@ const FunctionTabManager = (props) => {
)
}
const chronometerTimer = (props) => (
const chronometerTimer = props => (
<FunctionPage
FunctionTabManager={FunctionTabManager}
{...props}
tabNames={['⏰ Chronomètre', '⌛ Pomodoro', '📝 Article', '📬 Commentaires']}
tabNames={[
'⏰ Chronomètre',
'⌛ Pomodoro',
'📝 Article',
'📬 Commentaires'
]}
/>
)
export async function getServerSideProps (context) {
return api.get('/functions/chronometerTimer')
.then((response) => ({ props: response.data }))
return api
.get('/functions/chronometerTimer')
.then(response => ({ props: response.data }))
.catch(() => redirect(context, '/404'))
}

194
website/pages/functions/randomQuote.jsx
View File

@ -43,8 +43,16 @@ const GenerateQuote = () => {
<div className='container-fluid'>
<div className='row justify-content-center'>
<div className='col-24 text-center'>
<button onClick={getRandomQuote} className='btn btn-dark'>Générer une nouvelle citation</button>
<button style={{ marginLeft: '15px' }} onClick={handleCopyQuote} className='btn btn-dark'>Copier la citation</button>
<button onClick={getRandomQuote} className='btn btn-dark'>
Générer une nouvelle citation
</button>
<button
style={{ marginLeft: '15px' }}
onClick={handleCopyQuote}
className='btn btn-dark'
>
Copier la citation
</button>
</div>
</div>
<div style={{ marginTop: '20px' }} className='row justify-content-center'>
@ -53,7 +61,10 @@ const GenerateQuote = () => {
<p>- {quote?.author}</p>
</div>
</div>
<div style={{ marginBottom: '20px' }} className='row justify-content-center'>
<div
style={{ marginBottom: '20px' }}
className='row justify-content-center'
>
<a
target='_blank'
rel='noopener noreferrer'
@ -69,12 +80,16 @@ const GenerateQuote = () => {
let pageQuotes = 1
const QuoteList = () => {
const [quotesData, setQuotesData] = useState({ hasMore: true, rows: [], totalItems: 0 })
const [quotesData, setQuotesData] = useState({
hasMore: true,
rows: [],
totalItems: 0
})
const [isLoadingQuotes, setLoadingQuotes] = useState(true)
// Récupère les citations initiales
useEffect(() => {
getQuotesData().then((data) => setQuotesData(data))
getQuotesData().then(data => setQuotesData(data))
}, [])
const getQuotesData = async () => {
@ -86,32 +101,40 @@ const QuoteList = () => {
// Permet la pagination au scroll
const observer = useRef()
const lastQuoteRef = useCallback((node) => {
if (isLoadingQuotes) return
if (observer.current) observer.current.disconnect()
observer.current = new window.IntersectionObserver((entries) => {
if (entries[0].isIntersecting && quotesData.hasMore) {
pageQuotes += 1
getQuotesData().then((data) => {
setQuotesData((oldData) => {
return {
hasMore: data.hasMore,
rows: [...oldData.rows, ...data.rows],
totalItems: data.totalItems
}
})
})
}
}, { threshold: 1 })
if (node) observer.current.observe(node)
}, [isLoadingQuotes, quotesData.hasMore])
const lastQuoteRef = useCallback(
node => {
if (isLoadingQuotes) return
if (observer.current) observer.current.disconnect()
observer.current = new window.IntersectionObserver(
entries => {
if (entries[0].isIntersecting && quotesData.hasMore) {
pageQuotes += 1
getQuotesData().then(data => {
setQuotesData(oldData => {
return {
hasMore: data.hasMore,
rows: [...oldData.rows, ...data.rows],
totalItems: data.totalItems
}
})
})
}
},
{ threshold: 1 }
)
if (node) observer.current.observe(node)
},
[isLoadingQuotes, quotesData.hasMore]
)
return (
<div className='container-fluid'>
<div className='row justify-content-center'>
<div className='col-24 text-center'>
<h2 style={{ margin: 0 }}>Liste des citations : </h2>
<p style={{ marginTop: '5px' }}>Total de {quotesData.totalItems} citations.</p>
<p style={{ marginTop: '5px' }}>
Total de {quotesData.totalItems} citations.
</p>
</div>
</div>
@ -120,19 +143,32 @@ const QuoteList = () => {
<table>
<thead>
<tr>
<th className='table-row' scope='col'>Citation/Proverbe</th>
<th className='table-row' scope='col'>Auteur</th>
<th className='table-row' scope='col'>Proposée par</th>
<th className='table-row' scope='col'>
Citation/Proverbe
</th>
<th className='table-row' scope='col'>
Auteur
</th>
<th className='table-row' scope='col'>
Proposée par
</th>
</tr>
</thead>
<tbody>
{quotesData.rows.map((currentQuote, index) => {
const quoteJSX = (
<>
<td className='table-row text-center'>{currentQuote.quote}</td>
<td className='table-row text-center'>{currentQuote.author}</td>
<td className='table-row text-center'>
<Link href='/users/[name]' as={`/users/${currentQuote.user.name}`}>
{currentQuote.quote}
</td>
<td className='table-row text-center'>
{currentQuote.author}
</td>
<td className='table-row text-center'>
<Link
href='/users/[name]'
as={`/users/${currentQuote.user.name}`}
>
<a>{currentQuote.user.name}</a>
</Link>
</td>
@ -140,7 +176,11 @@ const QuoteList = () => {
)
// Si c'est le dernier élément
if (quotesData.rows.length === index + 1) {
return <tr key={index} ref={lastQuoteRef}>{quoteJSX}</tr>
return (
<tr key={index} ref={lastQuoteRef}>
{quoteJSX}
</tr>
)
}
return <tr key={index}>{quoteJSX}</tr>
})}
@ -158,25 +198,30 @@ const SuggestQuote = () => {
const [message, setMessage] = useState('')
const [isLoading, setIsLoading] = useState(false)
const handleChange = (event) => {
const handleChange = event => {
const inputStateNew = { ...inputState }
inputStateNew[event.target.name] = event.target.value
setInputState(inputStateNew)
}
const handleSubmit = (event) => {
const handleSubmit = event => {
setIsLoading(true)
event.preventDefault()
const token = user.token
if (isAuth && token != null) {
api.post('/quotes', inputState, { headers: { Authorization: token } })
api
.post('/quotes', inputState, { headers: { Authorization: token } })
.then(({ data }) => {
setInputState({ quote: '', author: '' })
setMessage(`<p class="form-success"><b>Succès:</b> ${data.message}</p>`)
setMessage(
`<p class="form-success"><b>Succès:</b> ${data.message}</p>`
)
setIsLoading(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>`
)
setIsLoading(false)
})
}
@ -185,7 +230,11 @@ const SuggestQuote = () => {
if (!isAuth) {
return (
<p className='text-center'>
Vous devez être <Link href='/users/login'><a>connecté</a></Link> pour proposer une citation.
Vous devez être{' '}
<Link href='/users/login'>
<a>connecté</a>
</Link>{' '}
pour proposer une citation.
</p>
)
}
@ -195,42 +244,68 @@ const SuggestQuote = () => {
<div className='row justify-content-center'>
<div className='col-24 text-center'>
<h2 style={{ margin: 0 }}>Proposer une citation : </h2>
<p style={{ marginTop: '5px' }}>Vous pouvez proposer des citations, et une fois validé elles seront rajoutés à la liste des citations.</p>
<p style={{ marginTop: '5px' }}>
Vous pouvez proposer des citations, et une fois validé elles seront
rajoutés à la liste des citations.
</p>
</div>
</div>
<div style={{ marginBottom: '40px' }} className='row'>
<div className='col-24'>
<form onSubmit={handleSubmit}>
<div className='form-group'>
<label htmlFor='quote' className='form-label'>Citation :</label>
<textarea value={inputState.quote} onChange={handleChange} style={{ height: 'auto' }} id='quote' name='quote' type='text' className='form-control' rows='4' placeholder='La citation...' />
<label htmlFor='quote' className='form-label'>
Citation :
</label>
<textarea
value={inputState.quote}
onChange={handleChange}
style={{ height: 'auto' }}
id='quote'
name='quote'
type='text'
className='form-control'
rows='4'
placeholder='La citation...'
/>
</div>
<div className='form-group'>
<label htmlFor='author' className='form-label'>Auteur :</label>
<input value={inputState.author} onChange={handleChange} name='author' id='author' type='text' className='form-control' placeholder="L'auteur de la citation..." />
<label htmlFor='author' className='form-label'>
Auteur :
</label>
<input
value={inputState.author}
onChange={handleChange}
name='author'
id='author'
type='text'
className='form-control'
placeholder="L'auteur de la citation..."
/>
</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>
</div>
<div className='form-result text-center'>
{
(isLoading)
? <Loader />
: htmlParser(message)
}
{isLoading ? <Loader /> : htmlParser(message)}
</div>
</div>
)
}
const FunctionTabManager = (props) => {
const FunctionTabManager = props => {
return (
<FunctionTabs setSlideIndex={props.setSlideIndex} slideIndex={props.slideIndex}>
<FunctionTabs
setSlideIndex={props.setSlideIndex}
slideIndex={props.slideIndex}
>
<div className='FunctionComponent__slide'>
<GenerateQuote />
</div>
@ -250,17 +325,24 @@ const FunctionTabManager = (props) => {
)
}
const randomQuote = (props) => (
const randomQuote = props => (
<FunctionPage
FunctionTabManager={FunctionTabManager}
{...props}
tabNames={['⚙️ Utilisation', '📜 Liste', '✒️ Proposer', '📝 Article', '📬 Commentaires']}
tabNames={[
'⚙️ Utilisation',
'📜 Liste',
'✒️ Proposer',
'📝 Article',
'📬 Commentaires'
]}
/>
)
export async function getServerSideProps (context) {
return api.get('/functions/randomQuote')
.then((response) => ({ props: response.data }))
return api
.get('/functions/randomQuote')
.then(response => ({ props: response.data }))
.catch(() => redirect(context, '/404'))
}

175
website/pages/functions/rightPrice.jsx
View File

@ -29,14 +29,14 @@ const PlayRightPrice = () => {
setIsLoadingProduct(false)
}
const handleChange = (event) => {
const handleChange = event => {
setEnteredPrice(event.target.value)
}
const handleSubmit = async (event) => {
const handleSubmit = async event => {
event.preventDefault()
const objectTry = {}
const guessedPrice = Number((enteredPrice).replace(',', '.').replace(' ', ''))
const guessedPrice = Number(enteredPrice.replace(',', '.').replace(' ', ''))
if (!isNaN(guessedPrice)) {
objectTry.guessedPrice = guessedPrice
objectTry.numberTry = attemptsArray.length + 1
@ -54,80 +54,114 @@ 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>
{!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>
) : (
<>
<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>
)
: (isLoadingProduct)
? (
<div className='row justify-content-center'>
<Loader />
</div>
)
: (
<>
<div className='row justify-content-center'>
<div style={{ marginBottom: '20px' }} className='col-24 text-center'>
<h4>{productToGuess.name}</h4>
<img src={productToGuess.image} alt={productToGuess.name} className='Product__image' />
</div>
<div 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>
</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='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 className='form-group text-center'>
<button type='submit' className='btn btn-dark'>Deviner</button>
</div>
</form>
)}
</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 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>
</>
)}
</div>
)
}
const FunctionTabManager = (props) => {
const FunctionTabManager = props => {
return (
<FunctionTabs setSlideIndex={props.setSlideIndex} slideIndex={props.slideIndex}>
<FunctionTabs
setSlideIndex={props.setSlideIndex}
slideIndex={props.slideIndex}
>
<div style={{ marginTop: '10px' }}>
<PlayRightPrice />
</div>
@ -141,7 +175,7 @@ const FunctionTabManager = (props) => {
)
}
const rightPrice = (props) => (
const rightPrice = props => (
<FunctionPage
FunctionTabManager={FunctionTabManager}
{...props}
@ -150,8 +184,9 @@ const rightPrice = (props) => (
)
export async function getServerSideProps (context) {
return api.get('/functions/rightPrice')
.then((response) => ({ props: response.data }))
return api
.get('/functions/rightPrice')
.then(response => ({ props: response.data }))
.catch(() => redirect(context, '/404'))
}

94
website/pages/functions/toDoList.jsx
View File

@ -19,7 +19,9 @@ const ManageToDo = () => {
useEffect(() => {
const getTasks = async () => {
const { data } = await api.get('/tasks', { headers: { Authorization: user.token } })
const { data } = await api.get('/tasks', {
headers: { Authorization: user.token }
})
setTasks(data)
}
if (isAuth && user.token != null) {
@ -27,16 +29,18 @@ const ManageToDo = () => {
}
}, [isAuth])
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 => {
event.preventDefault()
try {
const { data } = await api.post('/tasks', inputState, { headers: { Authorization: user.token } })
const { data } = await api.post('/tasks', inputState, {
headers: { Authorization: user.token }
})
const newTasks = [...tasks]
newTasks.push(data)
setTasks(newTasks)
@ -47,7 +51,9 @@ const ManageToDo = () => {
const handleRemoveTask = async (id, index) => {
const newTasks = [...tasks]
try {
await api.delete(`/tasks/${id}`, { headers: { Authorization: user.token } })
await api.delete(`/tasks/${id}`, {
headers: { Authorization: user.token }
})
newTasks.splice(index, 1)
setTasks(newTasks)
} catch {}
@ -55,7 +61,11 @@ const ManageToDo = () => {
const handleEditTask = async (id, index, isCompleted) => {
try {
await api.put(`/tasks/${id}`, { isCompleted: !isCompleted }, { headers: { Authorization: user.token } })
await api.put(
`/tasks/${id}`,
{ isCompleted: !isCompleted },
{ headers: { Authorization: user.token } }
)
const newTasks = [...tasks]
const taskObject = newTasks[index]
taskObject.isCompleted = !isCompleted
@ -66,7 +76,11 @@ const ManageToDo = () => {
if (!isAuth) {
return (
<p className='text-center'>
Vous devez être <Link href='/users/login'><a>connecté</a></Link> pour gérer des "tâches à faire".
Vous devez être{' '}
<Link href='/users/login'>
<a>connecté</a>
</Link>{' '}
pour gérer des "tâches à faire".
</p>
)
}
@ -77,31 +91,62 @@ const ManageToDo = () => {
<div className='col-24'>
<form onSubmit={handleSubmit}>
<div className='text-center'>
<label htmlFor='task' className='form-label'>Ajouter une tâche à faire :</label>
<input value={inputState.task} onChange={handleChange} name='task' id='task' type='text' className='form-control' placeholder='(e.g : Apprendre à coder)' />
<label htmlFor='task' className='form-label'>
Ajouter une tâche à faire :
</label>
<input
value={inputState.task}
onChange={handleChange}
name='task'
id='task'
type='text'
className='form-control'
placeholder='(e.g : Apprendre à coder)'
/>
</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>
</div>
{(tasks.length > 0) &&
{tasks.length > 0 && (
<div className='row justify-content-center'>
<div className='col-24 ManageToDo__container'>
<ul className='ManageToDo__list'>
{tasks.map((task, index) => {
return (
<li key={task.id} className={`ManageToDo__list-item ${(task.isCompleted) ? 'isCompleted' : ''}`}>
<span className='ManageToDo__list-item-span'>{task.task}</span>
<li
key={task.id}
className={`ManageToDo__list-item ${
task.isCompleted ? 'isCompleted' : ''
}`}
>
<span className='ManageToDo__list-item-span'>
{task.task}
</span>
<div>
<button className='ManageToDo__task-btn' title='Supprimer de la liste' onClick={() => handleRemoveTask(task.id, index)}>
<button
className='ManageToDo__task-btn'
title='Supprimer de la liste'
onClick={() => handleRemoveTask(task.id, index)}
>
<FontAwesomeIcon icon={faTrash} />
</button>
<button className='ManageToDo__task-btn' onClick={() => handleEditTask(task.id, index, task.isCompleted)}>
<FontAwesomeIcon {...(task.isCompleted) ? { icon: faTimes } : { icon: faCheck }} />
<button
className='ManageToDo__task-btn'
onClick={() =>
handleEditTask(task.id, index, task.isCompleted)}
>
<FontAwesomeIcon
{...(task.isCompleted
? { icon: faTimes }
: { icon: faCheck })}
/>
</button>
</div>
</li>
@ -109,14 +154,18 @@ const ManageToDo = () => {
})}
</ul>
</div>
</div>}
</div>
)}
</div>
)
}
const FunctionTabManager = (props) => {
const FunctionTabManager = props => {
return (
<FunctionTabs setSlideIndex={props.setSlideIndex} slideIndex={props.slideIndex}>
<FunctionTabs
setSlideIndex={props.setSlideIndex}
slideIndex={props.slideIndex}
>
<div className='FunctionComponent__slide'>
<ManageToDo />
</div>
@ -130,7 +179,7 @@ const FunctionTabManager = (props) => {
)
}
const toDoList = (props) => (
const toDoList = props => (
<FunctionPage
FunctionTabManager={FunctionTabManager}
{...props}
@ -139,8 +188,9 @@ const toDoList = (props) => (
)
export async function getServerSideProps (context) {
return api.get('/functions/toDoList')
.then((response) => ({ props: response.data }))
return api
.get('/functions/toDoList')
.then(response => ({ props: response.data }))
.catch(() => redirect(context, '/404'))
}