-
Notifications
You must be signed in to change notification settings - Fork 45
C22 Sphinx - Christelle Nkera #32
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice work! Your project lets me know that you have a goo understanding of React and useState
!
const toggleLike = (id) => { | ||
const updatedMessages = chatMessages.map((message) => { | ||
if (message.id === id) { | ||
// message.liked = !message.liked; | ||
return {...message, liked:!message.liked}; | ||
} else { | ||
return message; | ||
} | ||
}); | ||
setChatMessages(updatedMessages); | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice work on this function! By passing this down to your individual chat messages you are now able to have a single source of truth!
const totalLikes = chatMessages.filter((message) => message.liked).length; | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You could also do this with the reduce method like so:
const totalLikes = chatMessages.reduce((count, message) => count + (message.liked ? 1 : 0), 0);
{/* Wave 01: Render one ChatEntry component | ||
Wave 02: Render ChatLog component */} | ||
</main> | ||
<ChatLog entries={chatMessages} onLike={toggleLike} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Love seeing parents passing things on to their children!
<ChatEntry | ||
key={entry.id} | ||
id={entry.id} | ||
sender={entry.sender} | ||
timeStamp={entry.timeStamp} | ||
body={entry.body} | ||
liked={entry.liked} | ||
onLike={props.onLike} | ||
/> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since the names of the keys on entry
are the same as the names your are setting on ChatEntry
attributes/you are using all of the values in entry
you could do something something like this to save you a few keystrokes:
const chatComponents = entries.map((entry) => {
return(
<ChatEntry
{...entry}
onLikeToggle={onLikeBtnToggle}
key={entry.id}
/>
);
});
Just be mindful that this won't be as explicit as what you have, a trade off!
); | ||
}); | ||
|
||
return <main>{chatEntries}</main>; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice wrapping this in the <main>
tag. I would actually suggest to add in this App.jsx
so you could wrap ChatLog
in it as well. We don't show anything outside of ChatEntry
components but if we did then those would be outside of our <main>
tag. We could just keep moving them inside here but why do that when we could wrap the entire component.
ChatLog.propTypes = { | ||
entries: PropTypes.arrayOf( | ||
PropTypes.shape({ | ||
sender: PropTypes.string, | ||
id: PropTypes.number, | ||
body: PropTypes.string, | ||
timeStamp: PropTypes.string, | ||
liked: PropTypes.bool, | ||
}) | ||
).isRequired, | ||
onLike: PropTypes.func.isRequired, | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
✨
const ChatEntry = (props) => { | ||
const handleLikeClick = () => { | ||
props.onLike(props.id); // Notify the parent component (App) to toggle like state | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The button function could also be implemented like so:
<button className='like' onClick={() => likeButtonClicked(id)}>{liked ? '❤️': '🤍'}</button>
<TimeStamp time={props.timeStamp} /> | ||
</p> | ||
<button className="like" onClick={handleLikeClick}> | ||
{props.liked ? '❤️' : '🤍'} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ternaries, love to see them! 😍
No description provided.