Skip to content

Commit 46c9379

Browse files
parlandinparlandin
committed
feat: refactor CommentsList component to utilize Comment component for improved structure and readability
1 parent 65d7486 commit 46c9379

File tree

3 files changed

+24
-247
lines changed

3 files changed

+24
-247
lines changed

‎src/components/CommentsList/index.tsx‎

Lines changed: 21 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import React, { useCallback } from "react";
22
import * as S from "./styles";
3-
import ViewMarkdown from "@components/ViewMarkdown";
4-
import Heart from "@components/Icons/Heart";
5-
import NewComment from "@components/NewComment";
3+
64
import { list } from "./list";
5+
import Comment from "@components/Comment";
76

87
const CommentsList: React.FC = () => {
98
const currentUser = "Parlandim";
@@ -21,93 +20,28 @@ const CommentsList: React.FC = () => {
2120
[replyComment]
2221
);
2322

24-
const userMention = useCallback(
25-
(content: string) => {
26-
const newContent = content.replace(
27-
`@${currentUser}`,
28-
`<span className="mention">@${currentUser}</span>`
29-
);
30-
31-
return newContent;
32-
},
33-
[currentUser]
34-
);
35-
3623
return (
3724
<S.Container>
3825
{list.map((item) => (
39-
<S.CommentContainer key={item.id}>
40-
<S.Avatar src={item.user.avatar} alt={`${item.user.avatar} avatar`} />
41-
42-
<S.CommentInfos>
43-
<S.CommentTitle>
44-
<S.UserName>{item.user.name}</S.UserName>
45-
<S.Separator />
46-
<S.Date>22/01/2024</S.Date>
47-
</S.CommentTitle>
48-
49-
<S.Comment>
50-
<ViewMarkdown content={item.comment} />
51-
</S.Comment>
52-
53-
<S.ExtraInfo>
54-
<S.LikeButton>
55-
<Heart />
56-
<span>{item.likes}</span>
57-
</S.LikeButton>
58-
59-
<S.ReplyButton onClick={() => handleReply(item.id)}>
60-
Responder
61-
</S.ReplyButton>
62-
</S.ExtraInfo>
63-
64-
{item.reply?.length > 0 && (
65-
<S.ReplyCount>{item.reply?.length} respostas</S.ReplyCount>
66-
)}
67-
68-
{replyComment.isReplying && replyComment.id === item.id && (
69-
<NewComment />
70-
)}
71-
<S.ReplyContainer>
72-
{item.reply &&
73-
item.reply.map((reply) => (
74-
<S.CommentContainer key={reply.id} className="reply">
75-
<S.Avatar
76-
src={reply.user.avatar}
77-
alt={`${reply.user.avatar} avatar`}
78-
className="reply"
79-
/>
80-
81-
<S.CommentInfos>
82-
<S.CommentTitle>
83-
<S.UserName>{item.user.name}</S.UserName>
84-
<S.Separator />
85-
<S.Date>2 hours ago</S.Date>
86-
</S.CommentTitle>
87-
88-
<S.Comment>
89-
<ViewMarkdown content={userMention(reply.comment)} />
90-
</S.Comment>
91-
92-
<S.ExtraInfo>
93-
<S.LikeButton>
94-
<Heart />
95-
<span>{reply.likes}</span>
96-
</S.LikeButton>
97-
98-
<S.ReplyButton onClick={() => handleReply(reply.id)}>
99-
Responder
100-
</S.ReplyButton>
101-
</S.ExtraInfo>
102-
103-
{replyComment.isReplying &&
104-
replyComment.id === reply.id && <NewComment />}
105-
</S.CommentInfos>
106-
</S.CommentContainer>
107-
))}
108-
</S.ReplyContainer>
109-
</S.CommentInfos>
110-
</S.CommentContainer>
26+
<Comment
27+
key={item.id}
28+
listComment={item}
29+
currentUser={currentUser}
30+
handleReply={handleReply}
31+
replyComment={replyComment}
32+
>
33+
{item.reply &&
34+
item.reply.map((reply) => (
35+
<Comment
36+
key={reply.id}
37+
listComment={reply}
38+
currentUser={currentUser}
39+
handleReply={handleReply}
40+
isReplying={true}
41+
replyComment={replyComment}
42+
/>
43+
))}
44+
</Comment>
11145
))}
11246
</S.Container>
11347
);

‎src/components/CommentsList/list.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
export const list = [
1+
import { ICommentData } from "@components/Comment";
2+
3+
export const list: ICommentData[] = [
24
{
35
id: 1,
46
comment:

‎src/components/CommentsList/styles.ts‎

Lines changed: 0 additions & 159 deletions
Original file line numberDiff line numberDiff line change
@@ -6,162 +6,3 @@ export const Container = styled.div`
66
flex-direction: column;
77
margin-top: 10px;
88
`;
9-
10-
export const CommentContainer = styled.div`
11-
display: flex;
12-
position: relative;
13-
border: 1px solid ${({ theme }) => theme.colors.primary};
14-
border-radius: 6px;
15-
display: flex;
16-
flex-direction: row;
17-
align-items: flex-start;
18-
/* padding: 10px;
19-
margin: 10px 0; */
20-
margin: 20px 0;
21-
border: none;
22-
padding: 0px;
23-
24-
&.reply {
25-
border: none;
26-
padding: 0px 10px;
27-
28-
/* &::after {
29-
content: "";
30-
position: absolute;
31-
width: 97%;
32-
height: 1px;
33-
border: 1px solid ${({ theme }) => theme.colors.primary};
34-
border-style: dashed;
35-
bottom: -1px;
36-
left: 0;
37-
opacity: 0.4;
38-
}
39-
40-
&:last-of-type {
41-
&::after {
42-
display: none;
43-
}
44-
}
45-
46-
&:first-of-type {
47-
&::before {
48-
content: "";
49-
position: absolute;
50-
width: 97%;
51-
height: 1px;
52-
border: 1px solid ${({ theme }) => theme.colors.primary};
53-
border-style: dashed;
54-
top: -10px;
55-
left: 0;
56-
opacity: 0.3;
57-
}
58-
} */
59-
}
60-
`;
61-
62-
export const Avatar = styled.img`
63-
width: 40px;
64-
height: 40px;
65-
border-radius: 50%;
66-
border: 2px solid ${({ theme }) => theme.colors.primary};
67-
68-
&.reply {
69-
width: 30px;
70-
height: 30px;
71-
}
72-
`;
73-
74-
export const CommentInfos = styled.div`
75-
display: flex;
76-
flex-direction: column;
77-
width: 100%;
78-
margin-left: 10px;
79-
`;
80-
81-
export const CommentTitle = styled.div`
82-
display: flex;
83-
flex-direction: row;
84-
margin-top: 5px;
85-
align-items: center;
86-
`;
87-
88-
export const UserName = styled.span`
89-
font-weight: bold;
90-
91-
color: ${({ theme }) => theme.colors.primary};
92-
`;
93-
94-
export const Date = styled.span`
95-
font-size: 0.7rem;
96-
color: ${({ theme }) => theme.colors.primary};
97-
align-self: center;
98-
`;
99-
100-
export const Separator = styled.div`
101-
width: 6px;
102-
height: 2px;
103-
background-color: ${({ theme }) => theme.colors.primary};
104-
margin: 0 8px;
105-
`;
106-
107-
export const Comment = styled.p`
108-
margin-top: 15px;
109-
/* border: 1px solid ${({ theme }) => theme.colors.primary};
110-
border-radius: 6px;
111-
padding: 10px 4px; */
112-
`;
113-
114-
export const ExtraInfo = styled.div`
115-
display: flex;
116-
flex-direction: row;
117-
margin: 15px 0;
118-
`;
119-
120-
export const LikeButton = styled.button`
121-
background: none;
122-
border: none;
123-
color: ${({ theme }) => theme.colors.primary};
124-
font-weight: bold;
125-
cursor: pointer;
126-
font-size: 0.8rem;
127-
display: flex;
128-
align-items: center;
129-
130-
span {
131-
margin-left: 5px;
132-
}
133-
134-
svg {
135-
fill: ${({ theme }) => theme.colors.primary};
136-
width: 20px;
137-
height: 20px;
138-
}
139-
`;
140-
141-
export const ReplyButton = styled.button`
142-
background: none;
143-
border: none;
144-
color: ${({ theme }) => theme.colors.primary};
145-
font-weight: bold;
146-
cursor: pointer;
147-
font-size: 0.8rem;
148-
text-decoration: underline;
149-
max-width: fit-content;
150-
margin-left: 20px;
151-
`;
152-
153-
export const ReplyContainer = styled.div`
154-
display: flex;
155-
flex-direction: column;
156-
margin-top: 10px;
157-
border-left: 1px solid ${({ theme }) => theme.colors.primary};
158-
border-left-style: dashed;
159-
/* padding-left: 10px; */
160-
`;
161-
162-
export const ReplyCount = styled.span`
163-
color: ${({ theme }) => theme.colors.secondary};
164-
font-size: 0.7rem;
165-
margin-top: 10px;
166-
opacity: 0.8;
167-
`;

0 commit comments

Comments
 (0)