import { Fragment, 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 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 != undefined) { 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.