2020-08-03 12:04:07 +02:00
|
|
|
import Link from 'next/link'
|
|
|
|
import { useEffect, useState, forwardRef, useContext } from 'react'
|
|
|
|
import date from 'date-and-time'
|
|
|
|
import htmlParser from 'html-react-parser'
|
|
|
|
import { UserContext } from '../../../contexts/UserContext'
|
|
|
|
import ReactMarkdown from 'react-markdown'
|
|
|
|
import CodeBlock from '../../CodeBlock'
|
2020-08-03 14:37:05 +02:00
|
|
|
import api, { API_URL } from '../../../utils/api'
|
2020-08-03 12:04:07 +02:00
|
|
|
import './CommentCard.css'
|
2020-04-10 20:20:07 +02:00
|
|
|
|
|
|
|
const CommentCard = forwardRef((props, ref) => {
|
2020-08-03 12:04:07 +02:00
|
|
|
const { isAuth, user } = useContext(UserContext)
|
|
|
|
const [isEditing, setEditing] = useState(false)
|
|
|
|
const [editInput, setEditInput] = useState('')
|
|
|
|
const [message, setMessage] = useState('')
|
2020-04-10 20:58:19 +02:00
|
|
|
|
2020-08-03 12:04:07 +02:00
|
|
|
useEffect(() => {
|
|
|
|
setEditInput(props.message)
|
|
|
|
}, [])
|
2020-05-05 13:11:18 +02:00
|
|
|
|
2020-08-03 12:04:07 +02:00
|
|
|
const deleteCommentById = async () => {
|
|
|
|
props.manageComment.setLoadingComments(true)
|
|
|
|
if (isAuth && user.token != null) {
|
|
|
|
try {
|
2020-08-03 14:14:45 +02:00
|
|
|
await api.delete(`/comments/${props.id}`, {
|
|
|
|
headers: { Authorization: user.token }
|
|
|
|
})
|
2020-08-03 12:04:07 +02:00
|
|
|
const newCommentsData = { ...props.manageComment.commentsData }
|
2020-08-03 14:14:45 +02:00
|
|
|
const commentIndex = newCommentsData.rows.findIndex(
|
|
|
|
value => value.id === props.id
|
|
|
|
)
|
2020-08-03 12:04:07 +02:00
|
|
|
newCommentsData.rows.splice(commentIndex, 1)
|
2020-08-03 14:14:45 +02:00
|
|
|
props.manageComment.setCommentsData({
|
|
|
|
hasMore: props.manageComment.commentsData.hasMore,
|
|
|
|
rows: newCommentsData.rows
|
|
|
|
})
|
2020-08-03 12:04:07 +02:00
|
|
|
} catch {}
|
2020-04-10 20:58:19 +02:00
|
|
|
}
|
2020-08-03 12:04:07 +02:00
|
|
|
props.manageComment.setLoadingComments(false)
|
|
|
|
}
|
2020-04-10 20:58:19 +02:00
|
|
|
|
2020-08-03 14:14:45 +02:00
|
|
|
const handleChange = event => {
|
2020-08-03 12:04:07 +02:00
|
|
|
setEditInput(event.target.value)
|
|
|
|
}
|
2020-05-05 13:11:18 +02:00
|
|
|
|
2020-08-03 14:14:45 +02:00
|
|
|
const handleSubmit = event => {
|
2020-08-03 12:04:07 +02:00
|
|
|
event.preventDefault()
|
2020-08-03 14:14:45 +02:00
|
|
|
api
|
|
|
|
.put(
|
|
|
|
`/comments/${props.id}`,
|
|
|
|
{ message: editInput },
|
|
|
|
{ headers: { Authorization: user.token } }
|
|
|
|
)
|
|
|
|
.then(_response => {
|
2020-08-03 12:04:07 +02:00
|
|
|
setEditing(false)
|
|
|
|
})
|
2020-08-03 14:14:45 +02:00
|
|
|
.catch(error => {
|
|
|
|
setMessage(
|
|
|
|
`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`
|
|
|
|
)
|
2020-08-03 12:04:07 +02:00
|
|
|
})
|
|
|
|
}
|
2020-05-05 13:11:18 +02:00
|
|
|
|
2020-08-03 12:04:07 +02:00
|
|
|
const editComment = () => {
|
|
|
|
setEditing(true)
|
|
|
|
setMessage('')
|
|
|
|
}
|
2020-05-05 13:11:18 +02:00
|
|
|
|
2020-08-03 12:04:07 +02:00
|
|
|
return (
|
|
|
|
<div ref={ref} className='CommentCard col-24'>
|
|
|
|
<div className='CommentCard__container'>
|
|
|
|
<div className='row'>
|
|
|
|
<Link href='/users/[name]' as={`/users/${props.user.name}`}>
|
2020-08-03 14:14:45 +02:00
|
|
|
<img
|
|
|
|
className='CommentCard__user-logo'
|
|
|
|
src={API_URL + props.user.logo}
|
|
|
|
alt={props.user.name}
|
|
|
|
/>
|
2020-08-03 12:04:07 +02:00
|
|
|
</Link>
|
|
|
|
<span className='CommentCard__message-info'>
|
|
|
|
<Link href='/users/[name]' as={`/users/${props.user.name}`}>
|
|
|
|
<a>{props.user.name}</a>
|
|
|
|
</Link>
|
2020-08-03 14:14:45 +02:00
|
|
|
-{' '}
|
|
|
|
{date.format(new Date(props.createdAt), 'DD/MM/YYYY à HH:mm', true)}
|
2020-08-03 12:04:07 +02:00
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<div className='row'>
|
|
|
|
<div className='col-24'>
|
2020-08-03 14:14:45 +02:00
|
|
|
{!isEditing ? (
|
|
|
|
<>
|
|
|
|
<div className='CommentCard__message'>
|
|
|
|
<ReactMarkdown
|
|
|
|
source={editInput}
|
|
|
|
renderers={{ code: CodeBlock }}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
{isAuth && user.name === props.user.name && (
|
|
|
|
<p
|
|
|
|
style={{
|
|
|
|
fontSize: '15px',
|
|
|
|
margin: '15px 0 0 0',
|
|
|
|
fontStyle: 'italic'
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<a onClick={deleteCommentById} href='#'>
|
|
|
|
supprimer
|
|
|
|
</a>
|
|
|
|
-
|
|
|
|
<a style={{ cursor: 'pointer' }} onClick={editComment}>
|
|
|
|
modifier
|
|
|
|
</a>
|
|
|
|
</p>
|
|
|
|
)}
|
|
|
|
</>
|
|
|
|
) : (
|
|
|
|
<form onSubmit={handleSubmit}>
|
|
|
|
<div className='form-group FunctionComments__post-group'>
|
|
|
|
<label className='form-label' htmlFor='commentEdit'>
|
|
|
|
Modifier le commentaire :
|
|
|
|
</label>
|
|
|
|
<textarea
|
|
|
|
style={{ height: 'auto' }}
|
|
|
|
value={editInput}
|
|
|
|
onChange={handleChange}
|
|
|
|
name='commentEdit'
|
|
|
|
id='commentEdit'
|
|
|
|
className='form-control'
|
|
|
|
rows='5'
|
|
|
|
placeholder="Idée d'amélioration, avis, remarque, partage d'expérience personnel, ... (Markdown autorisé)"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div className='form-group' style={{ marginTop: '0.7em' }}>
|
|
|
|
<button type='submit' className='btn btn-dark'>
|
|
|
|
Envoyer
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<div className='text-center'>{htmlParser(message)}</div>
|
|
|
|
</form>
|
|
|
|
)}
|
2020-08-03 12:04:07 +02:00
|
|
|
</div>
|
2020-04-10 20:20:07 +02:00
|
|
|
</div>
|
2020-08-03 12:04:07 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
})
|
2020-04-10 20:20:07 +02:00
|
|
|
|
2020-08-03 12:04:07 +02:00
|
|
|
export default CommentCard
|