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 (

" {quote?.quote} "

- {quote?.author}

Twitter
) } 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 (

Liste des citations :

Total de {quotesData.totalItems} citations.

{quotesData.rows.map((currentQuote, index) => { const quoteJSX = ( <> ) // Si c'est le dernier élément if (quotesData.rows.length === index + 1) { return ( {quoteJSX} ) } return {quoteJSX} })}
Citation/Proverbe Auteur Proposée par
{currentQuote.quote} {currentQuote.author} {currentQuote.user.name}
) } 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( `

Succès: ${data.message}

` ) setIsLoading(false) }) .catch(error => { setMessage( `

Erreur: ${error.response.data.message}

` ) setIsLoading(false) }) } } if (!isAuth) { return (

Vous devez être{' '} connecté {' '} pour proposer une citation.

) } return (

Proposer une citation :

Vous pouvez proposer des citations, et une fois validé elles seront rajoutés à la liste des citations.