350 lines
10 KiB
JavaScript
350 lines
10 KiB
JavaScript
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'
|
|
import 'notyf/notyf.min.css'
|
|
import '../../public/css/pages/FunctionComponent.css'
|
|
|
|
const GenerateQuote = () => {
|
|
const [quote, setQuote] = useState({ quote: '', author: '' })
|
|
|
|
useEffect(() => {
|
|
getRandomQuote()
|
|
}, [])
|
|
|
|
const getRandomQuote = async () => {
|
|
const { data } = await api.post('/functions/randomQuote')
|
|
setQuote(data)
|
|
}
|
|
|
|
const handleCopyQuote = () => {
|
|
let Notyf
|
|
if (typeof window !== 'undefined') {
|
|
Notyf = require('notyf')
|
|
}
|
|
const notyf = new Notyf.Notyf({
|
|
duration: 5000
|
|
})
|
|
copyToClipboard(`"${quote?.quote}" - ${quote?.author}`)
|
|
notyf.success('Citation copiée dans le presse-papier!')
|
|
}
|
|
|
|
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>
|
|
</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>
|
|
</div>
|
|
<div
|
|
style={{ marginBottom: '20px' }}
|
|
className='row justify-content-center'
|
|
>
|
|
<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>
|
|
)
|
|
}
|
|
|
|
let pageQuotes = 1
|
|
const QuoteList = () => {
|
|
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))
|
|
}, [])
|
|
|
|
const getQuotesData = async () => {
|
|
setLoadingQuotes(true)
|
|
const { data } = await api.get(`/quotes?page=${pageQuotes}&limit=20`)
|
|
setLoadingQuotes(false)
|
|
return data
|
|
}
|
|
|
|
// 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]
|
|
)
|
|
|
|
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>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
</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}`}
|
|
>
|
|
<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>
|
|
)
|
|
}
|
|
return <tr key={index}>{quoteJSX}</tr>
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const SuggestQuote = () => {
|
|
const { isAuth, user } = useContext(UserContext)
|
|
const [inputState, setInputState] = useState({ quote: '', author: '' })
|
|
const [message, setMessage] = useState('')
|
|
const [isLoading, setIsLoading] = useState(false)
|
|
|
|
const handleChange = event => {
|
|
const inputStateNew = { ...inputState }
|
|
inputStateNew[event.target.name] = event.target.value
|
|
setInputState(inputStateNew)
|
|
}
|
|
|
|
const handleSubmit = event => {
|
|
setIsLoading(true)
|
|
event.preventDefault()
|
|
const token = user.token
|
|
if (isAuth && token != null) {
|
|
api
|
|
.post('/quotes', inputState, { headers: { Authorization: token } })
|
|
.then(({ data }) => {
|
|
setInputState({ quote: '', author: '' })
|
|
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>`
|
|
)
|
|
setIsLoading(false)
|
|
})
|
|
}
|
|
}
|
|
|
|
if (!isAuth) {
|
|
return (
|
|
<p className='text-center'>
|
|
Vous devez être{' '}
|
|
<Link href='/users/login'>
|
|
<a>connecté</a>
|
|
</Link>{' '}
|
|
pour proposer une citation.
|
|
</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>
|
|
</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>
|
|
|
|
<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>
|
|
|
|
<div className='form-group text-center'>
|
|
<button type='submit' className='btn btn-dark'>
|
|
Envoyer
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div className='form-result text-center'>
|
|
{isLoading ? <Loader /> : htmlParser(message)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const FunctionTabManager = props => {
|
|
return (
|
|
<FunctionTabs
|
|
setSlideIndex={props.setSlideIndex}
|
|
slideIndex={props.slideIndex}
|
|
>
|
|
<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 => (
|
|
<FunctionPage
|
|
FunctionTabManager={FunctionTabManager}
|
|
{...props}
|
|
tabNames={[
|
|
'⚙️ Utilisation',
|
|
'📜 Liste',
|
|
'✒️ Proposer',
|
|
'📝 Article',
|
|
'📬 Commentaires'
|
|
]}
|
|
/>
|
|
)
|
|
|
|
export async function getServerSideProps (context) {
|
|
return api
|
|
.get('/functions/randomQuote')
|
|
.then(response => ({ props: response.data }))
|
|
.catch(() => redirect(context, '/404'))
|
|
}
|
|
|
|
export default randomQuote
|