Skip to content

Commit db82520

Browse files
m-erkamm-erkam
authored
Merge pull request #429 from bounswe/dev
Dev
2 parents 87a2b6d + fe0c448 commit db82520

File tree

14 files changed

+4329
-544
lines changed

14 files changed

+4329
-544
lines changed

‎frontend/package-lock.json

Lines changed: 0 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,7 @@
5858
"^.+\\.js$": "babel-jest"
5959
},
6060
"transformIgnorePatterns": [
61-
"/node_modules/(?!axios)/"
61+
"/node_modules/(?!axios)/"
6262
]
6363
}
6464
}
65-

‎frontend/src/components/community/PostView.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
const PostView = () => {
1717
const { postId } = useParams();
1818
const [post, setPost] = useState(null);
19+
const [commentText, setCommentText] = useState("");
1920

2021
const getColorForTag = (tag) => {
2122
const asciiValue = tag.charCodeAt(0);
@@ -60,6 +61,23 @@ const PostView = () => {
6061
}
6162
}, [postId]);
6263

64+
const handleCommentChange = (e) => setCommentText(e.target.value);
65+
66+
const handleSubmitComment = () => {
67+
if (commentText.trim()) {
68+
const newComment = {
69+
"comment-id": Date.now(),
70+
user: "Current User",
71+
comment: commentText,
72+
};
73+
setPost((prevPost) => ({
74+
...prevPost,
75+
comments: [...prevPost.comments, newComment],
76+
}));
77+
setCommentText("");
78+
}
79+
};
80+
6381
if (!post) {
6482
return <p>Post not found!</p>;
6583
}
@@ -139,6 +157,16 @@ const PostView = () => {
139157
<p className="comment-text">{comment.comment}</p>
140158
</div>
141159
))}
160+
<div className="comment-box">
161+
<textarea
162+
value={commentText}
163+
onChange={handleCommentChange}
164+
placeholder="Add a comment..."
165+
/>
166+
<button className="comment-button" onClick={handleSubmitComment}>
167+
<FaComment /> Submit Comment
168+
</button>
169+
</div>
142170
</div>
143171
<div className="post-actions">
144172
<button className="like-button">

‎frontend/src/styles/community/PostView.css

Lines changed: 136 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,171 +1,211 @@
11
h1 {
2-
color: var(--color-neutral-800);
3-
margin-bottom: 10px;
2+
color: var(--color-neutral-800);
3+
margin-bottom: 10px;
44
}
55

66
.comment {
7-
background: var(--color-neutral-100);
8-
border: 1px solid var(--border-light);
9-
border-radius: 8px;
10-
display: flex;
11-
flex-direction: column;
12-
margin: 10px 0;
13-
padding: 15px;
14-
transition: background-color 0.2s ease;
7+
background: var(--color-neutral-100);
8+
border: 1px solid var(--border-light);
9+
border-radius: 8px;
10+
display: flex;
11+
flex-direction: column;
12+
margin: 10px 0;
13+
padding: 15px;
14+
transition: background-color 0.2s ease;
1515
}
1616

1717
.comment-text {
18-
color: var(--color-neutral-800);
19-
line-height: 1.5;
18+
color: var(--color-neutral-800);
19+
line-height: 1.5;
2020
}
2121

2222
.comment-user {
23-
color: var(--color-primary-500);
24-
font-weight: bold;
25-
margin-bottom: 5px;
23+
color: var(--color-primary-500);
24+
font-weight: bold;
25+
margin-bottom: 5px;
2626
}
2727

2828
.comment:hover {
29-
background-color: var(--color-neutral-300);
29+
background-color: var(--color-neutral-300);
3030
}
3131

3232
.comments {
33-
border-top: 1px solid var(--border-light);
34-
padding-top: 20px;
33+
border-top: 1px solid var(--border-light);
34+
padding-top: 20px;
3535
}
3636

3737
.comments h2 {
38-
color: var(--color-neutral-800);
39-
font-size: 1.5em;
40-
margin-bottom: 15px;
38+
color: var(--color-neutral-800);
39+
font-size: 1.5em;
40+
margin-bottom: 15px;
4141
}
4242

4343
.footer-label {
44-
color: var(--color-neutral-600);
45-
font-size: 0.85em;
46-
margin-top: 5px;
44+
color: var(--color-neutral-600);
45+
font-size: 0.85em;
46+
margin-top: 5px;
4747
}
4848

4949
.image {
50-
margin: 20px 0;
51-
text-align: center;
50+
margin: 20px 0;
51+
text-align: center;
5252
}
5353

5454
.image img {
55-
border-radius: 8px;
56-
height: auto;
57-
max-width: 100%;
58-
max-width: 512px;
55+
border-radius: 8px;
56+
height: auto;
57+
max-width: 100%;
58+
max-width: 512px;
5959
}
6060

61-
.like-button, .comment-button, .follow-button {
62-
background-color: var(--color-primary-500);
63-
border: none;
64-
border-radius: 5px;
65-
color: var(--color-neutral-white);
66-
cursor: pointer;
67-
padding: 10px 15px;
68-
transition: background-color 0.3s ease;
61+
.like-button,
62+
.comment-button,
63+
.follow-button {
64+
background-color: var(--color-primary-500);
65+
border: none;
66+
border-radius: 5px;
67+
color: var(--color-neutral-white);
68+
cursor: pointer;
69+
padding: 10px 15px;
70+
transition: background-color 0.3s ease;
6971
}
7072

71-
.like-button:hover, .comment-button:hover, .follow-button:hover {
72-
background-color: var(--color-primary-300);
73+
.like-button:hover,
74+
.comment-button:hover,
75+
.follow-button:hover {
76+
background-color: var(--color-primary-300);
7377
}
7478

7579
.loading-comments {
76-
color: var(--color-primary-500);
77-
font-size: 1.2em;
78-
margin: 20px 0;
79-
text-align: center;
80+
color: var(--color-primary-500);
81+
font-size: 1.2em;
82+
margin: 20px 0;
83+
text-align: center;
8084
}
8185

8286
.news {
83-
background: var(--color-neutral-100);
84-
border: 1px solid var(--border-light);
85-
border-radius: 8px;
86-
margin: 10px 0;
87-
padding: 10px;
87+
background: var(--color-neutral-100);
88+
border: 1px solid var(--border-light);
89+
border-radius: 8px;
90+
margin: 10px 0;
91+
padding: 10px;
8892
}
8993

9094
.news a {
91-
color: var(--color-primary-500);
92-
text-decoration: none;
95+
color: var(--color-primary-500);
96+
text-decoration: none;
9397
}
9498

9599
.news a:hover {
96-
text-decoration: underline;
100+
text-decoration: underline;
97101
}
98102

99103
.post-actions {
100-
display: flex;
101-
justify-content: space-between;
102-
margin-top: 20px;
104+
display: flex;
105+
justify-content: space-between;
106+
margin-top: 20px;
103107
}
104108

105109
.post-author {
106-
align-items: center;
107-
display: flex;
108-
justify-content: space-between;
109-
margin-bottom: 20px;
110+
align-items: center;
111+
display: flex;
112+
justify-content: space-between;
113+
margin-bottom: 20px;
110114
}
111115

112116
.post-content {
113-
margin-bottom: 30px;
114-
padding-left: 20px;
115-
padding-right: 20px;
116-
padding-top: 10px;
117+
margin-bottom: 30px;
118+
padding-left: 20px;
119+
padding-right: 20px;
120+
padding-top: 10px;
117121
}
118122

119123
.post-view {
120-
border-radius: 8px;
121-
display: flex;
122-
flex: 1;
123-
flex-direction: column;
124-
justify-content: flex-start;
125-
padding: 32px 120px;
126-
overflow-y: auto;
127-
scrollbar-width: none;
128-
width: 100%;
124+
border-radius: 8px;
125+
display: flex;
126+
flex: 1;
127+
flex-direction: column;
128+
justify-content: flex-start;
129+
padding: 32px 120px;
130+
overflow-y: auto;
131+
scrollbar-width: none;
132+
width: 100%;
129133
}
130134

131135
.tag {
132-
background: var(--color-neutral-100);
133-
border-radius: 15px;
134-
margin: 5px;
135-
padding: 5px 10px;
136+
background: var(--color-neutral-100);
137+
border-radius: 15px;
138+
margin: 5px;
139+
padding: 5px 10px;
136140
}
137141

138142
.tags {
139-
display: flex;
140-
flex-wrap: wrap;
141-
margin-bottom: 20px;
143+
display: flex;
144+
flex-wrap: wrap;
145+
margin-bottom: 20px;
142146
}
143147

144148
.timeline-content {
145-
background: var(--color-neutral-100);
146-
border-radius: 8px;
147-
flex: 1;
148-
padding: 10px;
149+
background: var(--color-neutral-100);
150+
border-radius: 8px;
151+
flex: 1;
152+
padding: 10px;
149153
}
150154

151155
.timeline-dot {
152-
align-items: center;
153-
background-color: var(--color-primary-500);
154-
border-radius: 50%;
155-
display: flex;
156-
height: 32px;
157-
justify-content: center;
158-
margin-right: 10px;
159-
width: 32px;
156+
align-items: center;
157+
background-color: var(--color-primary-500);
158+
border-radius: 50%;
159+
display: flex;
160+
height: 32px;
161+
justify-content: center;
162+
margin-right: 10px;
163+
width: 32px;
160164
}
161165

162166
.timeline-dot .icon {
163-
color: var(--color-neutral-white);
164-
font-size: 12px;
167+
color: var(--color-neutral-white);
168+
font-size: 12px;
165169
}
166170

167171
.timeline-item {
168-
align-items: flex-start;
169-
display: flex;
170-
margin: 20px 0;
172+
align-items: flex-start;
173+
display: flex;
174+
margin: 20px 0;
175+
}
176+
177+
.comment-box {
178+
background: var(--color-neutral-100);
179+
border: 1px solid var(--border-light);
180+
border-radius: 8px;
181+
margin-top: 20px;
182+
padding: 15px;
183+
display: flex;
184+
flex-direction: column;
185+
}
186+
187+
.comment-box textarea {
188+
background: var(--color-neutral-100);
189+
border: 1px solid var(--border-light);
190+
border-radius: 8px;
191+
padding: 10px;
192+
font-size: 1em;
193+
color: var(--color-neutral-800);
194+
margin-bottom: 10px;
195+
resize: vertical;
196+
}
197+
198+
.comment-box button {
199+
align-self: flex-start;
200+
background-color: var(--color-primary-500);
201+
border: none;
202+
border-radius: 5px;
203+
color: var(--color-neutral-white);
204+
cursor: pointer;
205+
padding: 10px 15px;
206+
transition: background-color 0.3s ease;
207+
}
208+
209+
.comment-box button:hover {
210+
background-color: var(--color-primary-300);
171211
}

0 commit comments

Comments
 (0)