Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit c2466d8

Browse files
voting system complete (nested if version)- 12 Cases
1 parent 4e7c94f commit c2466d8

File tree

5 files changed

+233
-15
lines changed

5 files changed

+233
-15
lines changed

‎src/components/intermediate/CommentSection/CommentSection.jsx‎

Lines changed: 36 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, {useState, useEffect,createContext} from 'react'
22
import './CommentSection.css'
3+
import './Loader.css'
34
import AddComment from './components/AddComment/AddComment'
45
import Comments from './components/Comments/Comments'
56
import axios from 'axios'
@@ -53,26 +54,53 @@ const CommentSection = () => {
5354

5455
const [currentUser, setCurrentUser] = useState(users[0])
5556
const [comments, setComments] = useState("")
57+
const [isLoading, setIsLoading] = useState(false)
5658

5759

5860
useEffect(() => {
61+
setIsLoading(true)
5962
const getData = async () => {
6063
try {
6164
const response = await axios.get("https://api.npoint.io/767dca33270897ca4365")
65+
66+
// THIS setTimeout IS ONLY FOR DEMO PURPOSE
67+
// - TO MAKE SPINNER APPEAR LONGER ON SCREEN
68+
// IN REAL APP, OFC would be no setTimeout
69+
// setTimeout(()=>{
70+
// setComments(response.data.comments)
71+
// setIsLoading(false)
72+
// },2000)
73+
6274
setComments(response.data.comments)
63-
75+
setIsLoading(false)
6476
} catch (err) {
6577
console.log(err);
6678
}
6779
}
6880
getData()
6981
}, [])
7082

83+
84+
const emojiStyle = {
85+
position: 'fixed',
86+
top: '1rem',
87+
left: '1rem',
88+
textDecoration: 'none',
89+
fontSize: '3rem',
90+
lineHeight: '.75',
91+
}
92+
7193
return (
7294
<div className='comment-section-container df'>
73-
<SwitchAccount users={users} currentUser={currentUser} setCurrentUser={setCurrentUser}/>
74-
<main className="comment-section-main">
75-
<h1 className='sr-only'>Comments Page</h1>
95+
<a href="https://frontendmentor-showcase.netlify.app/" target="_blank" style={emojiStyle}>👾</a>
96+
{isLoading
97+
?
98+
<div className="comment-section-spinner"></div>
99+
:
100+
<>
101+
<SwitchAccount users={users} currentUser={currentUser} setCurrentUser={setCurrentUser}/>
102+
<main className="comment-section-main">
103+
<h1 className='sr-only'>Comments Page</h1>
76104
<section className='comment-section-section'>
77105
<UserContext.Provider value={currentUser}>
78106
<CommentsContext.Provider value={[comments, setComments]}>
@@ -81,7 +109,10 @@ const CommentSection = () => {
81109
</CommentsContext.Provider>
82110
</UserContext.Provider>
83111
</section>
84-
</main>
112+
</main>
113+
</>
114+
115+
}
85116
</div>
86117
)
87118
}
Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
.comment-section-spinner {
2+
position: absolute;
3+
left: 0;
4+
right: 0;
5+
top: 0;
6+
bottom: 0;
7+
margin: auto;
8+
width: 50px;
9+
height: 50px;
10+
animation: scale ease 1.4s infinite;
11+
}
12+
13+
.comment-section-spinner::before {
14+
content: "";
15+
position: absolute;
16+
width: 15px;
17+
height: 15px;
18+
background: hsl(238, 40%, 52%);
19+
top: -10px;
20+
left: -10px;
21+
animation: top ease 3s infinite;
22+
}
23+
24+
.comment-section-spinner::after {
25+
content: "";
26+
position: absolute;
27+
width: 15px;
28+
height: 15px;
29+
background: hsl(238, 40%, 52%);
30+
bottom: -10px;
31+
right: -10px;
32+
animation: bottom ease 3s infinite;
33+
}
34+
35+
@keyframes top {
36+
0% {
37+
top: -10px;
38+
}
39+
20% {
40+
top: 100%;
41+
left: -10px;
42+
}
43+
40% {
44+
left: 100%;
45+
top: 100%;
46+
transform: rotate(180deg);
47+
}
48+
60% {
49+
top: -10px;
50+
left: 100%;
51+
}
52+
80% {
53+
top: -10px;
54+
transform: rotate(360deg);
55+
}
56+
100% {
57+
left: -10px;
58+
}
59+
}
60+
61+
@keyframes bottom {
62+
0% {
63+
bottom: -10px;
64+
}
65+
20% {
66+
bottom: 100%;
67+
right: -10px;
68+
}
69+
40% {
70+
right: 100%;
71+
bottom: 100%;
72+
transform: rotate(180deg);
73+
}
74+
60% {
75+
bottom: -10px;
76+
right: 100%;
77+
}
78+
80% {
79+
bottom: -10px;
80+
transform: rotate(360deg);
81+
}
82+
100% {
83+
right: -10px;
84+
}
85+
}
86+
87+
@keyframes scale {
88+
0% {
89+
transform: scale(1);
90+
}
91+
50% {
92+
transform: scale(0.7);
93+
}
94+
100% {
95+
transform: scale(1);
96+
}
97+
}

‎src/components/intermediate/CommentSection/assets/interactive-comments-section-main/workflow.md‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ Uploaded images to Cloudinary CDN ✅
2323

2424
Uploaded data to FREE ONLINE JSON SERVER (npoint) ✅
2525

26-
Missing: DELETE MODAL & Responsiveness.
26+
Missing: DELETE MODAL ✅ & Responsiveness.
2727

2828
### Step 3: Find the minimal but complete representation of UI state
2929

@@ -90,7 +90,7 @@ TODOS:
9090

9191
- ADD ALT TAGS FOR IMGS + DO SOME AY11 CHECKING / ACCESSIBILITY TESTS
9292

93-
VOTE SYSTEM
93+
### VOTE SYSTEM ✅
9494

9595
FOR VOTING COMMENT=
9696

@@ -116,3 +116,20 @@ FOR VOTING COMMENT=
116116
FOR VOTING REPLY =
117117

118118
Same 6 cases.
119+
120+
- UPVOTE CASES
121+
122+
User has not voted yet, and votes up => score +1 ✅, voted: true, direction: up, ✅
123+
124+
User has voted up and clicks on vote up again => score -1 ✅, remove from vote object ✅.
125+
126+
User has voted down, and clicks on vote up => score +2 ✅, voted: true, direction: up ✅.
127+
128+
129+
- DOWNVOTE CASES
130+
131+
User has not voted yet, and votes down => score -1 ✅, voted: true, direction: down ✅,
132+
133+
User has voted down, and clicks on vote down again => score +1 ✅, remove from vote object ✅.
134+
135+
User has voted up and click on downvote => score -2 ✅, voted: true, direction: down ✅,

‎src/components/intermediate/CommentSection/components/AddComment/AddComment.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,10 @@
3838
/* caret-shape: block; */
3939
}
4040

41+
.comment-section-comment-editing-field {
42+
line-height: 1.5;
43+
}
44+
4145
.comment-section-add-comment-form > textarea:focus,
4246
.comment-section-comment-editing-field:focus {
4347
outline: 1px solid var(--comment-section-Moderate-blue);

‎src/components/intermediate/CommentSection/components/Comments/CommentItem/Comment/Comment.jsx‎

Lines changed: 77 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -133,17 +133,43 @@ const Comment = ({data, type, isReplying, setIsReplying, setReplyingToID}) => {
133133

134134
//check if user has voted already:
135135
if(hasVoted.find((vote)=>vote.id === currentUser.id)?.voted ) {
136-
updatedComments[commentIndex].replies[replyIndex] = { ...replyToUpdate, score: replyToUpdate.score - 1 }
137-
const newHasVoted = hasVoted.filter((vote)=>vote.id !== currentUser.id)
138-
setHasVoted(newHasVoted)
136+
137+
const vote = hasVoted.find((vote)=> vote.id === currentUser.id)
138+
139+
// User has voted up and clicks on vote up again
140+
if (vote.direction === 'up') {
141+
// score -1
142+
updatedComments[commentIndex].replies[replyIndex] = { ...replyToUpdate, score: replyToUpdate.score - 1 }
143+
// remove from vote object.
144+
const newHasVoted = hasVoted.filter((vote)=>vote.id !== currentUser.id)
145+
setHasVoted(newHasVoted)
146+
}
147+
// User has voted down, and clicks on vote up
148+
else if (vote.direction === 'down') {
149+
// score +2
150+
updatedComments[commentIndex].replies[replyIndex] = { ...replyToUpdate, score: replyToUpdate.score + 2 }
151+
//Update voted: true, direction: up.
152+
const voteToUpdate = hasVoted.find((vote)=>vote.id == currentUser.id)
153+
const voteIndex = hasVoted.indexOf(voteToUpdate)
154+
155+
const updatedVotes = [...hasVoted]
156+
updatedVotes[voteIndex] = {...voteToUpdate, direction: 'up'}
157+
158+
setHasVoted(updatedVotes)
159+
}
139160

140161
}
162+
163+
// User has not voted yet, and votes up
141164
else {
165+
//score +1
142166
updatedComments[commentIndex].replies[replyIndex] = { ...replyToUpdate, score: replyToUpdate.score + 1 }
167+
// voted: true, direction: up,
143168
setHasVoted([...hasVoted,
144169
{
145170
id: currentUser.id,
146-
voted: true,
171+
voted: true,
172+
direction: 'up'
147173
}
148174
])
149175

@@ -214,17 +240,60 @@ const Comment = ({data, type, isReplying, setIsReplying, setReplyingToID}) => {
214240

215241
else {
216242

243+
217244
const commentToUpdate = comments.find(comment => comment.replies.find(reply => reply.id === data.id));
218245
const replyToUpdate = commentToUpdate.replies.find(reply => reply.id === data.id);
219246

220247
const commentIndex = comments.indexOf(commentToUpdate);
221248
const replyIndex = commentToUpdate.replies.indexOf(replyToUpdate);
222-
249+
223250
const updatedComments = [...comments];
224-
updatedComments[commentIndex].replies[replyIndex] = { ...replyToUpdate, score: replyToUpdate.score - 1};
225-
setComments(updatedComments)
226-
}
227251

252+
//check if user has voted already:
253+
if(hasVoted.find((vote)=>vote.id === currentUser.id)?.voted ) {
254+
255+
const vote = hasVoted.find((vote)=> vote.id === currentUser.id)
256+
257+
// User has voted down, and clicks on vote down again
258+
if (vote.direction === 'down') {
259+
// score +1
260+
updatedComments[commentIndex].replies[replyIndex] = { ...replyToUpdate, score: replyToUpdate.score + 1 }
261+
// remove from vote object.
262+
const newHasVoted = hasVoted.filter((vote)=>vote.id !== currentUser.id)
263+
setHasVoted(newHasVoted)
264+
}
265+
// User has voted up and click on downvote
266+
else if (vote.direction === 'up') {
267+
// score -2
268+
updatedComments[commentIndex].replies[replyIndex] = { ...replyToUpdate, score: replyToUpdate.score - 2 }
269+
//voted: true, direction: down
270+
const voteToUpdate = hasVoted.find((vote)=>vote.id == currentUser.id)
271+
const voteIndex = hasVoted.indexOf(voteToUpdate)
272+
273+
const updatedVotes = [...hasVoted]
274+
updatedVotes[voteIndex] = {...voteToUpdate, direction: 'down'}
275+
276+
setHasVoted(updatedVotes)
277+
}
278+
279+
}
280+
281+
// User has not voted yet, and votes down
282+
else {
283+
//score -1
284+
updatedComments[commentIndex].replies[replyIndex] = { ...replyToUpdate, score: replyToUpdate.score - 1 }
285+
// voted: true, direction: down
286+
setHasVoted([...hasVoted,
287+
{
288+
id: currentUser.id,
289+
voted: true,
290+
direction: 'down'
291+
}
292+
])
293+
294+
}
295+
setComments(updatedComments)
296+
}
228297

229298
}
230299

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /