🎨 Configure standardJS
This commit is contained in:
divlo
@ -1,108 +1,109 @@
|
||||
import Link from 'next/link';
|
||||
import { useEffect, useState, forwardRef, useContext, Fragment } from 'react';
|
||||
import date from 'date-and-time';
|
||||
import htmlParser from 'html-react-parser';
|
||||
import { UserContext } from '../../../contexts/UserContext';
|
||||
import { API_URL } from '../../../utils/config/config';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import CodeBlock from "../../CodeBlock";
|
||||
import api from '../../../utils/api';
|
||||
import './CommentCard.css';
|
||||
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 { API_URL } from '../../../utils/config/config'
|
||||
import ReactMarkdown from 'react-markdown'
|
||||
import CodeBlock from '../../CodeBlock'
|
||||
import api from '../../../utils/api'
|
||||
import './CommentCard.css'
|
||||
|
||||
const CommentCard = forwardRef((props, ref) => {
|
||||
const { isAuth, user } = useContext(UserContext)
|
||||
const [isEditing, setEditing] = useState(false)
|
||||
const [editInput, setEditInput] = useState('')
|
||||
const [message, setMessage] = useState('')
|
||||
|
||||
const { isAuth, user } = useContext(UserContext);
|
||||
const [isEditing, setEditing] = useState(false);
|
||||
const [editInput, setEditInput] = useState("");
|
||||
const [message, setMessage] = useState("");
|
||||
useEffect(() => {
|
||||
setEditInput(props.message)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
setEditInput(props.message);
|
||||
}, []);
|
||||
|
||||
const deleteCommentById = async () => {
|
||||
props.manageComment.setLoadingComments(true);
|
||||
if (isAuth && user.token != undefined) {
|
||||
try {
|
||||
await api.delete(`/comments/${props.id}`, { headers: { 'Authorization': user.token } });
|
||||
const newCommentsData = { ...props.manageComment.commentsData };
|
||||
const commentIndex = newCommentsData.rows.findIndex((value) => value.id === props.id);
|
||||
newCommentsData.rows.splice(commentIndex, 1);
|
||||
props.manageComment.setCommentsData({ hasMore: props.manageComment.commentsData.hasMore, rows: newCommentsData.rows });
|
||||
} catch {}
|
||||
}
|
||||
props.manageComment.setLoadingComments(false);
|
||||
const deleteCommentById = async () => {
|
||||
props.manageComment.setLoadingComments(true)
|
||||
if (isAuth && user.token != null) {
|
||||
try {
|
||||
await api.delete(`/comments/${props.id}`, { headers: { Authorization: user.token } })
|
||||
const newCommentsData = { ...props.manageComment.commentsData }
|
||||
const commentIndex = newCommentsData.rows.findIndex((value) => value.id === props.id)
|
||||
newCommentsData.rows.splice(commentIndex, 1)
|
||||
props.manageComment.setCommentsData({ hasMore: props.manageComment.commentsData.hasMore, rows: newCommentsData.rows })
|
||||
} catch {}
|
||||
}
|
||||
props.manageComment.setLoadingComments(false)
|
||||
}
|
||||
|
||||
const handleChange = (event) => {
|
||||
setEditInput(event.target.value);
|
||||
}
|
||||
const handleChange = (event) => {
|
||||
setEditInput(event.target.value)
|
||||
}
|
||||
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
api.put(`/comments/${props.id}`, { message: editInput }, { headers: { 'Authorization': user.token } })
|
||||
.then((_response) => {
|
||||
setEditing(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
setMessage(`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`);
|
||||
});
|
||||
}
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault()
|
||||
api.put(`/comments/${props.id}`, { message: editInput }, { headers: { Authorization: user.token } })
|
||||
.then((_response) => {
|
||||
setEditing(false)
|
||||
})
|
||||
.catch((error) => {
|
||||
setMessage(`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`)
|
||||
})
|
||||
}
|
||||
|
||||
const editComment = () => {
|
||||
setEditing(true);
|
||||
setMessage("");
|
||||
}
|
||||
const editComment = () => {
|
||||
setEditing(true)
|
||||
setMessage('')
|
||||
}
|
||||
|
||||
return (
|
||||
<div ref={ref} className="CommentCard col-24">
|
||||
<div className="CommentCard__container">
|
||||
<div className="row">
|
||||
<Link href={"/users/[name]"} as={`/users/${props.user.name}`}>
|
||||
<img className="CommentCard__user-logo" src={API_URL + props.user.logo} alt={props.user.name} />
|
||||
</Link>
|
||||
<span className="CommentCard__message-info">
|
||||
<Link href={"/users/[name]"} as={`/users/${props.user.name}`}>
|
||||
<a>{props.user.name}</a>
|
||||
</Link>
|
||||
- {date.format(new Date(props.createdAt), 'DD/MM/YYYY à HH:mm', true)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-24">
|
||||
{
|
||||
(!isEditing) ?
|
||||
<Fragment>
|
||||
<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>
|
||||
}
|
||||
</Fragment>
|
||||
:
|
||||
<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é)"></textarea>
|
||||
</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>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<div ref={ref} className='CommentCard col-24'>
|
||||
<div className='CommentCard__container'>
|
||||
<div className='row'>
|
||||
<Link href='/users/[name]' as={`/users/${props.user.name}`}>
|
||||
<img className='CommentCard__user-logo' src={API_URL + props.user.logo} alt={props.user.name} />
|
||||
</Link>
|
||||
<span className='CommentCard__message-info'>
|
||||
<Link href='/users/[name]' as={`/users/${props.user.name}`}>
|
||||
<a>{props.user.name}</a>
|
||||
</Link>
|
||||
- {date.format(new Date(props.createdAt), 'DD/MM/YYYY à HH:mm', true)}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
<div className='row'>
|
||||
<div className='col-24'>
|
||||
{
|
||||
(!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>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
export default CommentCard;
|
||||
export default CommentCard
|
||||
|
||||
Reference in New Issue
Block a user