import { useState, useEffect, useRef, useCallback } from 'react' import Cookies from 'universal-cookie' import Link from 'next/link' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faCheck, faTrash } from '@fortawesome/free-solid-svg-icons' import redirect from '../../utils/redirect' import HeadTag from '../../components/HeadTag' import api from '../../utils/api' import '../../public/css/pages/admin.css' const manageQuotes = props => { const [quotesData, setQuotesData] = useState({ hasMore: true, rows: [], totalItems: 0 }) const [isLoadingQuotes, setLoadingQuotes] = useState(true) const [pageQuotes, setPageQuotes] = useState(1) // Récupère les citations si la page change useEffect(() => { getQuotesData() }, [pageQuotes]) const getQuotesData = async () => { setLoadingQuotes(true) const { data } = await api.get(`/admin/quotes?limit=20page=${pageQuotes}`, { headers: { Authorization: props.user.token } }) setQuotesData({ hasMore: data.hasMore, rows: [...quotesData.rows, ...data.rows], totalItems: data.totalItems }) setLoadingQuotes(false) } // 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) { setPageQuotes(pageQuotes + 1) } }, { threshold: 1 } ) if (node) observer.current.observe(node) }, [isLoadingQuotes, quotesData.hasMore] ) const handleValidationQuote = async (id, isValid) => { try { await api.put( `/admin/quotes/${id}`, { isValid }, { headers: { Authorization: props.user.token } } ) window.location.reload(true) } catch {} } return ( <>

Liste des citations (non validées) :

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 Valider Supprimer
{currentQuote.quote} {currentQuote.author} {currentQuote.user.name} handleValidationQuote(currentQuote.id, true)} className='table-row text-center' style={{ cursor: 'pointer' }} > handleValidationQuote(currentQuote.id, false)} className='table-row text-center' style={{ cursor: 'pointer' }} >
) } export async function getServerSideProps (context) { const cookies = new Cookies(context.req.headers.cookie) const user = { ...cookies.get('user') } if (!user.isAdmin) { return redirect(context, '/404') } return { props: { user } } } export default manageQuotes