C22 Sphinx - Christelle Nkera #32
Conversation
mikellewade
left a comment
mikellewade
left a comment
There was a problem hiding this comment.
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.
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.
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.
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.
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.
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, | ||
| }; |
| 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.
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 ? '❤️' : '🤍'} |
2 participants
No description provided.