I want to ask or advice on how to render the comment form, I have separate component for the comment form, I tried it on the code below and as expected the form is not showing when the logged in user click the reply button on the comment.
When the user click the reply button it showed the form as what it looks like on the image below:
import React from 'react';
import MainLayout from '../../components/MainLayout';
import BreadCrumbs from '../../components/BreadCrumbs';
import SuggestedPost from './container/SuggestedPost';
import SidebarLeft from '../../components/SidebarLeft';
import SidebarRight from '../../components/SidebarRight';
import { Link } from 'react-router-dom';
import { images } from '../../constants';
import './articledetail.css';
import CommentsContainer from '../../components/comments/CommentsContainer';
const breadCrumbsData = [
{
name: 'Home',
link: '/',
},
{
name: 'Article',
link: '/',
},
{
name: 'Article Detail',
link: '/blog/i',
},
];
const postData = [
{
id: 1,
title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
createdAt: '2022-01-01',
},
{
id: 2,
title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
createdAt: '2022-01-01',
},
{
id: 3,
title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
createdAt: '2022-01-01',
},
{
id: 4,
title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
createdAt: '2022-01-01',
},
{
id: 5,
title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
createdAt: '2022-01-01',
},
];
const tagsData = ['Programming', 'Development', 'Testing'];
const ArticleDetailPage = () => {
return (
<MainLayout>
<div className="article">
<div className="article-sidebar-left">
<SidebarLeft />
</div>
<section className="article-detail-page">
<article className="article-detail">
<BreadCrumbs data={breadCrumbsData} />
{/* Generating the BreadCrumbs from the data */}
<div className="article-img-box">
<img
src={images.latestPost}
alt="Latest Post"
className="article-img"
/>
</div>
<Link
to="/blog?category=SelectedCategory"
className="article-category">
Category
</Link>
<h1 className="article-title">Lorem ipsum dolor sit amet</h1>
<p className="article-post">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam
fuga voluptatum corporis nostrum molestias aspernatur! Ad quia
totam reprehenderit accusantium. Deserunt cumque voluptates alias,
</p>
<CommentsContainer
className="comments-container"
logginedUserId="a"
/>
</article>
<SuggestedPost
header="Latest Article"
post={postData}
tags={tagsData}
/>
</section>
<div className="article-sidebar-right sticky">
<SidebarRight />
</div>
</div>
</MainLayout>
);
};
export default ArticleDetailPage;
In this code/component the logginedUserId="a" is applied when the user got ID of a.
This is the container of comment form which display the comment as well as the form.
import React, { useEffect, useState } from 'react';
import CommentForm from './CommentForm';
import { getCommentsData } from '../../data/comments';
import Comment from './Comment';
const CommentsContainer = ({ className, logginedUserId }) => {
//creating a state with empty initial
const [comments, setComments] = useState([]);
//Getting the main comments/parents comments
//filtering the comments who have no parent
const mainComments = comments.filter((comment) => comment.parent === null);
const [afftectedComment, setAffectedComment] = useState(null);
console.log(comments);
// Creating a state to reply and edit a comment
//fill the state with the data from getCommentsData(putt all data in it)
useEffect(() => {
(async () => {
const commentData = await getCommentsData();
setComments(commentData);
})();
}, []);
//this is for the comment handler
const addCommentHandler = (value, parent = null, replyOnUser = null) => {
//creating a variable newComment that stores the new comment
const newComment = {
_id: '10',
user: {
_id: 'a',
name: 'Mohammad Rezaii',
},
desc: value,
post: '1',
parent: parent,
replyOnUser: replyOnUser,
createdAt: '2022-12-31T17:22:05.092+0000',
};
//adding comments to comments data
setComments((curState) => {
return [newComment, ...curState];
});
};
return (
<div className={`${className}`}>
<CommentForm
btnLabel="Add Comment"
//passing the formSubmitHandler function with addCommentHandler
formSubmitHandler={(value) => addCommentHandler(value)}
/>
<div className="comments-area">
{/* rendering the main comments/parents comments fromt the mainComments */}
{mainComments.map((comment) => (
<Comment
comment={comment}
logginedUserId={logginedUserId}
afftectedComment={afftectedComment}
setAffectedComment={setAffectedComment}
addComment={addCommentHandler}
/>
))}
</div>
</div>
);
};
export default CommentsContainer;
This the logic where I added to render the comment form if the logged in user is wanted to reply a comment to previous comment.
import React from 'react';
import { images } from '../../constants';
import { MdEditSquare, MdQuickreply, MdRemoveCircle } from 'react-icons/md';
import CommentForm from './CommentForm';
// This is a component to display a single comment
const Comment = ({
comment,
logginedUserId,
affectedComment,
setAffectedComment,
addComment,
parentId = null,
}) => {
// Creating a function to render the button to reply
const isUserLoggined = Boolean(logginedUserId);
// Creating Edit and Delete Function in the comments
const commentBelongToUser = logginedUserId === comment.user._id;
const isReplying =
affectedComment &&
affectedComment.type === 'replying' &&
affectedComment._id === comment._id;
const repliedCommentId = parentId ? parentId : comment._id;
const replyOnUserId = comment.user._id;
return (
<div className="comment-box">
<img src={images.theProfile} alt="user" className="comment-image" />
<div className="comment-text">
<h5 className="comment-name">{comment.user.name}</h5>
<span className="comment-date">
{new Date(comment.createdAt).toLocaleDateString('en', {
day: 'numeric',
month: 'short',
year: 'numeric',
hour: '2-digit',
})}
</span>
<p className="comment-desc">{comment.desc}</p>
{/* This is for the button */}
<div className="comment-action">
{isUserLoggined && (
<button
className="comment-reply"
onClick={() =>
setAffectedComment({ type: 'replying', _id: comment._id })
}>
<MdQuickreply className="comment-action-icon" />
<span>Reply</span>
</button>
)}
{commentBelongToUser && (
<>
<button className="comment-edit">
<MdEditSquare className="comment-action-icon" />
<span>Edit</span>
</button>
<button className="comment-delete">
<MdRemoveCircle className="comment-action-icon" />
<span>Delete</span>
</button>
</>
)}
</div>
{isReplying && (
<CommentForm
btnLabel="Reply"
formSubmitHandler={(value) =>
addComment(value, repliedCommentId, replyOnUserId)
}
/>
)}
</div>
</div>
);
};
export default Comment;
