This repository has been archived on 2024-10-29. You can view files and clone it, but cannot push or open issues or pull requests.
FunctionProject/website/pages/functions/randomQuote.jsx

348 lines
10 KiB
React
Raw Normal View History

2020-08-03 12:04:07 +02:00
import { useState, useEffect, useContext, useRef, useCallback } from 'react'
import Link from 'next/link'
import { UserContext } from '../../contexts/UserContext'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
import redirect from '../../utils/redirect'
import htmlParser from 'html-react-parser'
import Loader from '../../components/Loader'
import FunctionPage from '../../components/FunctionPage/FunctionPage'
import FunctionTabs from '../../components/FunctionPage/FunctionTabs'
import FunctionArticle from '../../components/FunctionPage/FunctionArticle'
import FunctionComments from '../../components/FunctionPage/FunctionComments/FunctionComments'
import api from '../../utils/api'
import copyToClipboard from '../../utils/copyToClipboard'
const GenerateQuote = () => {
2020-08-03 12:04:07 +02:00
const [quote, setQuote] = useState({ quote: '', author: '' })
2020-08-03 12:04:07 +02:00
useEffect(() => {
getRandomQuote()
}, [])
2020-08-03 12:04:07 +02:00
const getRandomQuote = async () => {
const { data } = await api.post('/functions/randomQuote')
setQuote(data)
}
2020-08-03 12:04:07 +02:00
const handleCopyQuote = () => {
let Notyf
if (typeof window !== 'undefined') {
Notyf = require('notyf')
}
2020-08-03 12:04:07 +02:00
const notyf = new Notyf.Notyf({
duration: 5000
})
copyToClipboard(`"${quote?.quote}" - ${quote?.author}`)
notyf.success('Citation copiée dans le presse-papier!')
}
2020-08-03 12:04:07 +02:00
return (
<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>
2020-08-03 12:04:07 +02:00
</div>
</div>
<div style={{ marginTop: '20px' }} className='row justify-content-center'>
<div className='col-24 text-center'>
<p>" {quote?.quote} "</p>
<p>- {quote?.author}</p>
</div>
2020-08-03 12:04:07 +02:00
</div>
<div
style={{ marginBottom: '20px' }}
className='row justify-content-center'
>
2020-08-03 12:04:07 +02:00
<a
target='_blank'
rel='noopener noreferrer'
href={`https://twitter.com/intent/tweet?text="${quote?.quote}" - ${quote?.author}&via=Divlo_FR&hashtags=citation,FunctionProject&url=https://function.divlo.fr/functions/randomQuote`}
className='btn btn-lg btn-primary'
>
<FontAwesomeIcon icon={faTwitter} style={{ width: '1em' }} /> Twitter
</a>
</div>
</div>
)
}
2020-08-03 12:04:07 +02:00
let pageQuotes = 1
const QuoteList = () => {
const [quotesData, setQuotesData] = useState({
hasMore: true,
rows: [],
totalItems: 0
})
2020-08-03 12:04:07 +02:00
const [isLoadingQuotes, setLoadingQuotes] = useState(true)
2020-08-03 12:04:07 +02:00
// Récupère les citations initiales
useEffect(() => {
getQuotesData().then(data => setQuotesData(data))
2020-08-03 12:04:07 +02:00
}, [])
2020-08-03 12:04:07 +02:00
const getQuotesData = async () => {
setLoadingQuotes(true)
const { data } = await api.get(`/quotes?page=${pageQuotes}&limit=20`)
setLoadingQuotes(false)
return data
}
2020-08-03 12:04:07 +02:00
// 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]
)
2020-08-03 12:04:07 +02:00
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>
2020-08-03 12:04:07 +02:00
</div>
</div>
2020-08-03 12:04:07 +02:00
<div className='row' style={{ marginBottom: '30px' }}>
<div className='col-24 table-column'>
<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>
2020-08-03 12:04:07 +02:00
</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}`}
>
2020-08-03 12:04:07 +02:00
<a>{currentQuote.user.name}</a>
</Link>
</td>
</>
)
// Si c'est le dernier élément
if (quotesData.rows.length === index + 1) {
return (
<tr key={index} ref={lastQuoteRef}>
{quoteJSX}
</tr>
)
2020-08-03 12:04:07 +02:00
}
return <tr key={index}>{quoteJSX}</tr>
})}
</tbody>
</table>
</div>
2020-08-03 12:04:07 +02:00
</div>
</div>
)
}
const SuggestQuote = () => {
2020-08-03 12:04:07 +02:00
const { isAuth, user } = useContext(UserContext)
const [inputState, setInputState] = useState({ quote: '', author: '' })
const [message, setMessage] = useState('')
const [isLoading, setIsLoading] = useState(false)
const handleChange = event => {
2020-08-03 12:04:07 +02:00
const inputStateNew = { ...inputState }
inputStateNew[event.target.name] = event.target.value
setInputState(inputStateNew)
}
const handleSubmit = event => {
2020-08-03 12:04:07 +02:00
setIsLoading(true)
event.preventDefault()
const token = user.token
if (isAuth && token != null) {
api
.post('/quotes', inputState, { headers: { Authorization: token } })
2020-08-03 12:04:07 +02:00
.then(({ data }) => {
setInputState({ quote: '', author: '' })
setMessage(
`<p class="form-success"><b>Succès:</b> ${data.message}</p>`
)
2020-08-03 12:04:07 +02:00
setIsLoading(false)
})
.catch(error => {
setMessage(
`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`
)
2020-08-03 12:04:07 +02:00
setIsLoading(false)
})
}
2020-08-03 12:04:07 +02:00
}
2020-08-03 12:04:07 +02:00
if (!isAuth) {
return (
2020-08-03 12:04:07 +02:00
<p className='text-center'>
Vous devez être{' '}
<Link href='/users/login'>
<a>connecté</a>
</Link>{' '}
pour proposer une citation.
2020-08-03 12:04:07 +02:00
</p>
)
}
return (
<div className='container-fluid'>
<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>
2020-08-03 12:04:07 +02:00
</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...'
/>
</div>
2020-08-03 12:04:07 +02:00
<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..."
/>
</div>
2020-08-03 12:04:07 +02:00
<div className='form-group text-center'>
<button type='submit' className='btn btn-dark'>
Envoyer
</button>
</div>
2020-08-03 12:04:07 +02:00
</form>
</div>
2020-08-03 12:04:07 +02:00
</div>
<div className='form-result text-center'>
{isLoading ? <Loader /> : htmlParser(message)}
2020-08-03 12:04:07 +02:00
</div>
</div>
)
}
const FunctionTabManager = props => {
2020-08-03 12:04:07 +02:00
return (
<FunctionTabs
setSlideIndex={props.setSlideIndex}
slideIndex={props.slideIndex}
>
2020-08-03 12:04:07 +02:00
<div className='FunctionComponent__slide'>
<GenerateQuote />
</div>
<div className='FunctionComponent__slide'>
<QuoteList />
</div>
<div className='FunctionComponent__slide'>
<SuggestQuote />
</div>
<div className='FunctionComponent__slide'>
<FunctionArticle article={props.article} />
</div>
<div className='FunctionComponent__slide'>
<FunctionComments functionId={props.id} />
</div>
</FunctionTabs>
)
}
const randomQuote = props => (
2020-08-03 12:04:07 +02:00
<FunctionPage
FunctionTabManager={FunctionTabManager}
{...props}
tabNames={[
'⚙️ Utilisation',
'📜 Liste',
'✒️ Proposer',
'📝 Article',
'📬 Commentaires'
]}
2020-08-03 12:04:07 +02:00
/>
)
2020-08-03 12:04:07 +02:00
export async function getServerSideProps (context) {
return api
.get('/functions/randomQuote')
.then(response => ({ props: response.data }))
2020-08-03 12:04:07 +02:00
.catch(() => redirect(context, '/404'))
}
2020-08-03 12:04:07 +02:00
export default randomQuote