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 handleLikeToggle = (id) => { | ||
| setChatMessages((prevMessages) => | ||
| prevMessages.map((message) => | ||
| message.id === id | ||
| ? { ...message, liked: !message.liked } | ||
| : message | ||
| ) | ||
| ); | ||
| }; |
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);| const person1 = messages[0].sender; | ||
| const person2 = messages[1].sender; |
There was a problem hiding this comment.
What happens here if the first two messages from are texts from the same person?
| entries={chatMessages} | ||
| onToggleLike={handleLikeToggle} |
| const chatEntryComponents = entries.map((entry) => { | ||
| return ( | ||
| <ChatEntry | ||
| id={entry.id} |
| id={entry.id} | ||
| sender={entry.sender} | ||
| body={entry.body} | ||
| timeStamp={entry.timeStamp} | ||
| liked={entry.liked} |
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 isn't as explicit as what you have.
| entries: PropTypes.arrayOf( | ||
| PropTypes.shape({ | ||
| id: PropTypes.number.isRequired, | ||
| sender: PropTypes.string.isRequired, | ||
| body: PropTypes.string.isRequired, | ||
| timeStamp: PropTypes.string.isRequired, | ||
| liked: PropTypes.bool.isRequired, | ||
| }) | ||
| ).isRequired, | ||
| onToggleLike: PropTypes.func.isRequired, |
| id: PropTypes.number.isRequired, | ||
| sender: PropTypes.string.isRequired, | ||
| body: PropTypes.string.isRequired, | ||
| timeStamp: PropTypes.string.isRequired, | ||
| liked: PropTypes.bool.isRequired, | ||
| onToggleLike: PropTypes.func.isRequired, |
| <p>{body}</p> | ||
| <p className="entry-time"> | ||
| <TimeStamp time={timeStamp}/> | ||
| </p> | ||
| <button className="like" onClick={() => onToggleLike(id)}>{liked ? '❤️' : '🤍'}</button> |
| return ( | ||
| <div className="chat-entry local"> | ||
| <h2 className="entry-name">Replace with name of sender</h2> | ||
| <div className= {`chat-entry ${liked ? 'liked' :'local'}`}> |
There was a problem hiding this comment.
Not sure if this ternary is a mistake or not, seems like the liked part is messing up some of the CSS?
2 participants
Chatlog- React