Skip to content

Commit 85e3263

Browse files
amit1884amit1884
committed
added comment section component
1 parent f758046 commit 85e3263

File tree

7 files changed

+174
-1
lines changed

7 files changed

+174
-1
lines changed

‎src/App.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import './App.css'
2+
import Comments from './pages/Comment'
23
import Counter from './pages/Counter/Counter'
34
import InfiniteScroll from './pages/InfiniteScroll.jsx/InfiniteScroll'
45
import Metronome from './pages/MetroNome/Metronome'
@@ -8,7 +9,7 @@ function App() {
89
return (
910
<>
1011
<div>
11-
<InfiniteScroll/>
12+
<Comments/>
1213
</div>
1314
</>
1415
)

‎src/pages/Comment/commentStyle.module.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
.commentContainer {
2+
margin:10px;
3+
}
4+
.commentItem {
5+
display: flex;
6+
flex-direction: column;
7+
border: 1px solid;
8+
padding: 10px;
9+
border-radius: 10px;
10+
margin-bottom: 10px;
11+
margin-top: 10px;
12+
}
13+
.commentDetails {
14+
display: flex;
15+
justify-content: space-between;
16+
align-items: center;
17+
}
18+
.actionBtn button {
19+
margin: auto 10px;
20+
cursor: pointer;
21+
border: none;
22+
outline: none;
23+
background-color: transparent;
24+
color: blue;
25+
}
26+
.addReplyContainer{
27+
width:100%;
28+
margin:10px;
29+
}
30+
.addReplyInput{
31+
width:95%;
32+
padding:10px;
33+
outline:none;
34+
border: none;
35+
border-bottom:1px solid
36+
}

‎src/pages/Comment/components/CommentContainer.jsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from "react";
2+
import styles from "../commentStyle.module.css";
3+
import CommentsItem from "./CommentsItem";
4+
function CommentContainer({ comments,addReply }) {
5+
return (
6+
<div className={styles.commentContainer}>
7+
{comments?.map((comment) => {
8+
return <CommentsItem comment={comment} addReply={addReply} key={comment.id}/>;
9+
})}
10+
</div>
11+
);
12+
}
13+
14+
export default CommentContainer;

‎src/pages/Comment/components/CommentsItem.jsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React, { useState } from "react";
2+
import styles from "../commentStyle.module.css";
3+
import CommentContainer from "./CommentContainer";
4+
function CommentsItem({ comment, addReply }) {
5+
const [showReply, setShowReply] = useState(false);
6+
const [showAddReply, setShowAddReply] = useState(false);
7+
const [reply, setReply] = useState("");
8+
const handlerBlur = (e) => {
9+
const newComment = e.target.value;
10+
if (e.target.value !== "") {
11+
addReply(comment.id, newComment);
12+
setShowReply(true);
13+
setShowAddReply(false);
14+
}
15+
};
16+
return (
17+
<div className={styles.commentItem}>
18+
<div className={styles.commentDetails}>
19+
<div>{comment.comment}</div>
20+
<div className={styles.actionBtn}>
21+
{comment.subComment?.length > 0 && (
22+
<button onClick={() => setShowReply(!showReply)}>
23+
{showReply?'Hide Replies':'View Replies'}
24+
</button>
25+
)}
26+
<button onClick={() => setShowAddReply(!showAddReply)}>
27+
Add Reply
28+
</button>
29+
</div>
30+
</div>
31+
{showAddReply && (
32+
<div className={styles.addReplyContainer}>
33+
<input
34+
type="text"
35+
className={styles.addReplyInput}
36+
placeholder="enter comment"
37+
value={reply}
38+
onChange={(e) => setReply(e.target.value)}
39+
onBlur={handlerBlur}
40+
autoFocus
41+
/>
42+
</div>
43+
)}
44+
{showReply && (
45+
<div>
46+
<CommentContainer comments={comment.subComment} addReply={addReply} />
47+
</div>
48+
)}
49+
</div>
50+
);
51+
}
52+
53+
export default CommentsItem;

‎src/pages/Comment/constans.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
export const commentData = [
2+
{
3+
id: 1,
4+
comment: "lorem ipsum",
5+
subComment: [
6+
{
7+
id: 2,
8+
comment: "lorem ipsum",
9+
subComment: [],
10+
},
11+
{
12+
id: 3,
13+
comment: "lorem ipsum",
14+
subComment: [
15+
{
16+
id: 4,
17+
comment: "lorem ipsum",
18+
subComment: [],
19+
},
20+
],
21+
},
22+
],
23+
},
24+
{
25+
id: 5,
26+
comment: "lorem ipsum",
27+
subComment: [
28+
{
29+
id: 6,
30+
comment: "lorem ipsum",
31+
subComment: [],
32+
},
33+
],
34+
},
35+
{
36+
id: 7,
37+
comment: "lorem ipsum",
38+
subComment: [],
39+
},
40+
];

‎src/pages/Comment/index.jsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React, { useState } from "react";
2+
import CommentContainer from "./components/CommentContainer";
3+
import { updateComment } from "./utils/helper";
4+
import { commentData } from "./constans";
5+
6+
export default function Comments() {
7+
const [comments,setComments]=useState(commentData)
8+
const addReply=(commentId,newComment)=>{
9+
let updatedComment=updateComment(comments,commentId,newComment)
10+
setComments(updatedComment)
11+
}
12+
return <CommentContainer comments={comments} addReply={addReply}/>;
13+
}

‎src/pages/Comment/utils/helper.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
export const updateComment = (comments, commentId, newComment) => {
2+
let commentsCopy = JSON.parse(JSON.stringify(comments));
3+
for (let comment of commentsCopy) {
4+
if (comment.id === commentId) {
5+
comment.subComment.push({
6+
id: new Date().getTime,
7+
comment: newComment,
8+
subComment: [],
9+
});
10+
}
11+
if (comment.subComment.length > 0) {
12+
comment.subComment = updateComment(comment.subComment, commentId, newComment);
13+
}
14+
}
15+
return commentsCopy;
16+
};

0 commit comments

Comments
 (0)