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 (
{!isEditing ? (
Liens
|
Nom
|
Compteur de clics
|
Modifier
|
Supprimer
|
{linksData.rows.map((link, index) => {
const linkJSX = (
<>
{link.url}
|
{link.shortcut}
|
{link.count} |
handleEditLink(link)}
>
|
handleRemoveLink(link.id)}
>
|
>
)
// Si c'est le dernier élément
if (linksData.rows.length === index + 1) {
return (
{linkJSX}
)
}
return {linkJSX}
})}
) : (
{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