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 25bc65b

Browse files
v1 with CRUD (voting counter not fully complete), states, context, currentUser, switching Users
1 parent c5cc764 commit 25bc65b

File tree

15 files changed

+578
-79
lines changed

15 files changed

+578
-79
lines changed

‎package-lock.json‎

Lines changed: 22 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"react-dom": "^18.2.0",
1515
"react-router-dom": "^6.4.3",
1616
"react-scripts": "5.0.1",
17+
"uuid": "^9.0.0",
1718
"web-vitals": "^2.1.4"
1819
},
1920
"scripts": {

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

Lines changed: 72 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,85 @@
1-
import React from 'react'
1+
import React,{useState,useEffect,createContext} from 'react'
22
import './CommentSection.css'
33
import AddComment from './components/AddComment/AddComment'
44
import Comments from './components/Comments/Comments'
5+
import axios from 'axios'
6+
7+
8+
9+
import {UserContext} from './context/UserContext'
10+
import SwitchAccount from './SwitchAccount'
11+
12+
export const CommentsContext = createContext(null);
13+
14+
const users = [
15+
16+
{
17+
id: 0,
18+
image: {
19+
png: "https://res.cloudinary.com/dg7sswqcr/image/upload/v1679585456/comments-section-fm/image-juliusomo_doq3dh.png",
20+
webp: "https://res.cloudinary.com/dg7sswqcr/image/upload/v1679585456/comments-section-fm/image-juliusomo_josf9c.webp"
21+
},
22+
username: "juliusomo"
23+
},
24+
{
25+
id: 1,
26+
image: {
27+
png: "https://res.cloudinary.com/dg7sswqcr/image/upload/v1679585456/comments-section-fm/image-amyrobson_xkvk0b.png",
28+
webp: "https://res.cloudinary.com/dg7sswqcr/image/upload/v1679585456/comments-section-fm/image-amyrobson_fozexc.webp"
29+
},
30+
username: "amyrobson"
31+
},
32+
{
33+
id: 2,
34+
image: {
35+
png:"https://res.cloudinary.com/dg7sswqcr/image/upload/v1679585456/comments-section-fm/image-maxblagun_ecp1ug.webp",
36+
webp:"https://res.cloudinary.com/dg7sswqcr/image/upload/v1679585456/comments-section-fm/image-maxblagun_ecp1ug.webp"
37+
},
38+
username: "maxblagun"
39+
},
40+
{
41+
id: 3,
42+
image: {
43+
png: "https://res.cloudinary.com/dg7sswqcr/image/upload/v1679585456/comments-section-fm/image-ramsesmiron_cfndbf.png",
44+
webp: "https://res.cloudinary.com/dg7sswqcr/image/upload/v1679585456/comments-section-fm/image-ramsesmiron_mxxtzx.webp"
45+
},
46+
username: "ramsesmiron"
47+
},
48+
49+
50+
]
551

652
const CommentSection = () => {
53+
54+
const [currentUser, setCurrentUser] = useState(users[0])
55+
const [comments, setComments] = useState("")
56+
57+
58+
useEffect(() => {
59+
const getData = async () => {
60+
try {
61+
const response = await axios.get("https://api.npoint.io/767dca33270897ca4365")
62+
setComments(response.data.comments)
63+
64+
} catch (err) {
65+
console.log(err);
66+
}
67+
}
68+
getData()
69+
}, [])
70+
771
return (
872
<div className='comment-section-container df'>
73+
<SwitchAccount users={users} currentUser={currentUser} setCurrentUser={setCurrentUser}/>
974
<main className="comment-section-main">
1075
<h1 className='sr-only'>Comments Page</h1>
1176
<section className='comment-section-section'>
12-
<Comments></Comments>
13-
<AddComment/>
77+
<UserContext.Provider value={currentUser}>
78+
<CommentsContext.Provider value={[comments, setComments]}>
79+
<Comments comments={comments} ></Comments>
80+
<AddComment comments={comments} setComments={setComments}/>
81+
</CommentsContext.Provider>
82+
</UserContext.Provider>
1483
</section>
1584
</main>
1685
</div>
Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
.comment-section-header {
2+
position: absolute;
3+
top: 1rem;
4+
right: 1rem;
5+
}
6+
7+
.comment-section-nav {
8+
}
9+
10+
.comment-section-list {
11+
display: grid;
12+
gap: 0.5rem;
13+
}
14+
15+
.comment-section-list-item {
16+
}
17+
.comment-section-list-item > button {
18+
outline: 2px solid transparent;
19+
border: none;
20+
border-radius: 50%;
21+
padding: 0;
22+
display: grid;
23+
place-items: center;
24+
cursor: pointer;
25+
width: 3rem;
26+
height: 3rem;
27+
overflow: hidden;
28+
transition: var(--comment-section-transition);
29+
}
30+
.comment-section-list-item > button > img {
31+
width: 100%;
32+
height: 100%;
33+
transition: var(--comment-section-transition);
34+
opacity: 0.65;
35+
}
36+
37+
.comment-section-list-item > button:hover > img {
38+
transform: scale(1.2);
39+
opacity: 1;
40+
}
41+
42+
.comment-section-active-user > button {
43+
outline: 2px solid var(--comment-section-Moderate-blue);
44+
opacity: 1;
45+
}
46+
.comment-section-active-user > button > img {
47+
opacity: 1;
48+
}
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react'
2+
import './SwitchAccount.css'
3+
4+
const SwitchAccount = ({users, currentUser, setCurrentUser}) => {
5+
return (
6+
<header className="comment-section-header">
7+
<nav className="comment-section-nav">
8+
<ul className="comment-section-list">
9+
{users.map((user, index)=> (
10+
<li key={index + user.username}
11+
className={currentUser.id === user.id ? "comment-section-list-item comment-section-active-user" : "comment-section-list-item"}>
12+
<button onClick={()=>setCurrentUser(users[index])}>
13+
<img src={user.image.png} alt="" />
14+
</button>
15+
</li>
16+
))}
17+
</ul>
18+
</nav>
19+
</header>
20+
)
21+
}
22+
23+
export default SwitchAccount

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

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ Setup initial starter files and base styles, breakdown the ui into components st
1919

2020
Build a static version of CommentSection, Individual Comments, Replies, Add a comment section below, Add Reply, Update your own comment or reply. Hover states for all. ✅
2121

22+
Uploaded images to Cloudinary CDN ✅
23+
24+
Uploaded data to FREE ONLINE JSON SERVER (npoint) ✅
25+
2226
Missing: DELETE MODAL & Responsiveness.
2327

2428
### Step 3: Find the minimal but complete representation of UI state
@@ -42,24 +46,40 @@ Missing: DELETE MODAL & Responsiveness.
4246

4347
So states:
4448

45-
- currentUser
49+
- currentUser ✅
4650

47-
- List of Comments/CommentItems/Replies/Reply
51+
- List of Comments ✅
4852

49-
- isEditing
53+
- isEditing ✅
5054

51-
- counter
55+
- counter ✅ (implement: allow voting only once a)for upvote comment ✅ b) for upvote reply c) for downvote comment d) for downvote reply , prevent self vote ✅)
5256

5357
FUNCTIONS
5458

55-
- Add new comment (Create)
59+
- Add new comment (Create) ✅
60+
61+
- Add new reply to a comment itself ✅ or a reply to a reply ✅ (Create) (BUG: Replying to a brand new comment does not work) FIXED ✅
62+
63+
- Get the full list of comments to render (Read) ✅
64+
65+
- Update the comment ✅ or reply ✅ (Update)
66+
67+
- Delete the comment ✅ or reply ✅ (Delete)
68+
69+
- Change currentUser ✅
70+
71+
TODOS:
72+
73+
- FIX @replyingTo bug when replying to a reply.
74+
75+
- Split Voting to own Component
5676

57-
- Add new reply (Create)
77+
- Refactor States/Contexts
5878

59-
- Get the full list of comments to render (Read)
79+
- Add MODAL for DELETE
6080

61-
- Update the comment or reply (Update)
81+
- Refactor / Tidy up + Reducer Version
6282

63-
- Delete the comment or reply (Delete)
83+
- useLocalStorage after any updates, get the initials from a server.
6484

65-
- Change currentUser
85+
- ADD Responsiveness

0 commit comments

Comments
(0)

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