import { useState, useEffect, useContext, useRef, useCallback } from 'react' import Link from 'next/link' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faPen, faTrash, faTimes } from '@fortawesome/free-solid-svg-icons' import { UserContext } from '../../contexts/UserContext' 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 Modal from '../../components/Modal' import api from '../../utils/api' import 'notyf/notyf.min.css' import '../../public/css/pages/FunctionComponent.css' import '../../public/css/pages/admin.css' const CreateLink = ({ linksData, setLinksData }) => { const { isAuth, user } = useContext(UserContext) const [inputState, setInputState] = useState({ url: '', shortcutName: '' }) const [message, setMessage] = useState('') const [isLoading, setIsLoading] = useState(false) const handleSubmit = async event => { setIsLoading(true) event.preventDefault() try { const response = await api.post('/links', inputState, { headers: { Authorization: user.token } }) const linksDataState = { ...linksData } linksDataState.rows.push(response.data.linkDatabase) setLinksData(linksDataState) setMessage(response.data.resultHTML) setIsLoading(false) setInputState({ url: '', shortcutName: '' }) } catch (error) { setIsLoading(false) setMessage(error.response.data.message) } } const handleChange = event => { const inputStateNew = { ...inputState } inputStateNew[event.target.name] = event.target.value setInputState(inputStateNew) } if (!isAuth) { return (

Vous devez être{' '} connecté {' '} pour gérer des liens raccourcis.

) } return (
{isLoading ? : htmlParser(message)}
) } let pageLinks = 1 const LinksList = ({ linksData, setLinksData, isLoadingLinks, setLoadingLinks }) => { const { isAuth, user } = useContext(UserContext) const [isEditing, setIsEditing] = useState(false) const [defaultInputState, setDefaultInputState] = useState({ shortcutName: '', url: '', id: 1 }) const [message, setMessage] = useState('') const [isLoading, setIsLoading] = useState(false) const toggleModal = () => { if (isEditing) { setIsLoading(false) setMessage('') setDefaultInputState({ shortcutName: '', url: '', id: 1 }) } setIsEditing(!isEditing) } // Récupère les liens initiales useEffect(() => { getLinksData().then(data => setLinksData(data)) }, []) const handleChange = event => { const inputStateNew = { ...defaultInputState } inputStateNew[event.target.name] = event.target.value setDefaultInputState(inputStateNew) } const handleRemoveLink = async linkId => { try { await api.delete(`/links/${linkId}`, { headers: { Authorization: user.token } }) const linksDataState = { ...linksData } const deletedLinkIndex = linksData.rows.findIndex(link => { return link.id === linkId }) linksDataState.rows.splice(deletedLinkIndex, 1) setLinksData(linksDataState) let Notyf if (typeof window !== 'undefined') { Notyf = require('notyf') } const notyf = new Notyf.Notyf({ duration: 5000 }) notyf.success('Succès: lien raccourci supprimé!') } catch {} } const handleEditLink = linkInfo => { toggleModal() setDefaultInputState({ shortcutName: linkInfo.shortcut, url: linkInfo.url, id: linkInfo.id }) } const handleEditSubmit = async event => { setIsLoading(true) event.preventDefault() try { const response = await api.put( `/links/${defaultInputState.id}`, defaultInputState, { headers: { Authorization: user.token } } ) const linksDataState = { ...linksData } const editedLinkIndex = linksData.rows.findIndex(link => { return link.id === defaultInputState.id }) if (editedLinkIndex != null) { linksDataState.rows[editedLinkIndex].shortcut = defaultInputState.shortcutName linksDataState.rows[editedLinkIndex].url = defaultInputState.url setLinksData(linksDataState) } setMessage(response.data.resultHTML) setIsLoading(false) } catch (error) { setIsLoading(false) setMessage(error.response.data.message) } } const getLinksData = async () => { setLoadingLinks(true) const { data } = await api.get(`/links?page=${pageLinks}&limit=20`, { headers: { Authorization: user.token } }) setLoadingLinks(false) return data } // Permet la pagination au scroll const observer = useRef() const lastLinkRef = useCallback( node => { if (isLoadingLinks) return if (observer.current) observer.current.disconnect() observer.current = new window.IntersectionObserver( entries => { if (entries[0].isIntersecting && linksData.hasMore) { pageLinks += 1 getLinksData().then(data => { setLinksData(oldData => { return { hasMore: data.hasMore, rows: [...oldData.rows, ...data.rows], totalItems: data.totalItems } }) }) } }, { threshold: 1 } ) if (node) observer.current.observe(node) }, [isLoadingLinks, linksData.hasMore] ) if (!isAuth) { return (

Vous devez être{' '} connecté {' '} pour gérer des liens raccourcis.

) } return (

Gérer les liens

{!isEditing ? (
{linksData.rows.map((link, index) => { const linkJSX = ( <> ) // Si c'est le dernier élément if (linksData.rows.length === index + 1) { return ( {linkJSX} ) } return {linkJSX} })}
Liens Nom Compteur de clics Modifier Supprimer
{link.url} {link.shortcut} {link.count} handleEditLink(link)} > handleRemoveLink(link.id)} >
) : (
{isLoading ? : htmlParser(message)}
)}
) } const FunctionTabManager = props => { const [linksData, setLinksData] = useState({ hasMore: true, rows: [], totalItems: 0 }) const [isLoadingLinks, setLoadingLinks] = useState(true) return (
) } const linkShortener = props => ( ) export async function getServerSideProps (context) { return api .get('/functions/linkShortener') .then(response => ({ props: response.data })) .catch(() => redirect(context, '/404')) } export default linkShortener