Conversation
mikellewade
left a comment
mikellewade
left a comment
There was a problem hiding this comment.
Really good job on this project Aleida! It shows you have a good understanding of React and state!
| const toggleLikeBtnClick= (id) => { | ||
| // Refactoring to incorporate func passing state update | ||
| setEntries(entries => entries.map(entry=>{ | ||
| if (entry.id == id){ | ||
| return {...entry, liked: !entry.liked}; | ||
| } | ||
| else{ | ||
| return entry; | ||
| } | ||
| })); | ||
| }; |
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!
| setEntries(entries => entries.map(entry=>{ | ||
| if (entry.id == id){ | ||
| return {...entry, liked: !entry.liked}; | ||
| } | ||
| else{ | ||
| return entry; | ||
| } |
There was a problem hiding this comment.
| setEntries(entries => entries.map(entry=>{ | |
| if (entry.id == id){ | |
| return {...entry, liked: !entry.liked}; | |
| } | |
| else{ | |
| return entry; | |
| } | |
| setEntries(entries => entries.map(entry => { | |
| if (entry.id == id) { | |
| return {...entry, liked: !entry.liked}; | |
| } else { | |
| return entry; | |
| } |
| })); | ||
| }; | ||
|
|
||
| const totalLikesCount = entries.reduce((count, entry) => (entry.liked? count+1: count), 0); |
There was a problem hiding this comment.
Perfect use of the reduce function!
| const identifyAllChatMembers = () => { | ||
| const senders = [...new Set(entries.map(entry => entry.sender))]; | ||
| let participant1 = ''; | ||
| let participant2 = ''; | ||
| for (const sender of senders) { | ||
| if (!participant1) { | ||
| participant1 = sender; | ||
| } | ||
| else if (participant1 && !participant2) { | ||
| participant2 = sender; | ||
| } | ||
| }; | ||
| return `${participant1} and ${participant2}`; | ||
| }; |
There was a problem hiding this comment.
Essentially we are just getting the sender values of the first and second message objects in the list of messages. Instead of looping through the messages and making a set from their senders we could simply access them and then store in a string like so:
const participant1 = entries[0].sender;
const participant2 = entries[1].sender;
const chatTitle = `${participant1} and ${participant2}`;EDIT: I see now that your method would work in cases where the maybe the first two messages are from a single user. Double texting, I could never! haha
| <ChatLog | ||
| entries={entries} | ||
| onLikeBtnToggle={toggleLikeBtnClick} | ||
| /> |
| const chatComponents = entries.map((entry) => { | ||
| return( | ||
| <ChatEntry | ||
| {...entry} | ||
| onLikeToggle={onLikeBtnToggle} | ||
| key={entry.id} | ||
| /> | ||
| ); | ||
| }); |
| ChatLog.propTypes = { | ||
| // Implement | ||
| entries: PropTypes.arrayOf(PropTypes.shape({ | ||
| sender: PropTypes.string.isRequired, | ||
| body: PropTypes.string.isRequired, | ||
| timeStamp: PropTypes.string.isRequired, | ||
| liked: PropTypes.bool.isRequired | ||
| })).isRequired, | ||
| onLikeBtnToggle: PropTypes.func.isRequired, | ||
| }; |
| <p className="entry-time"> | ||
| <TimeStamp time={timeStamp}/> | ||
| </p> | ||
| <button className='like' onClick={likeButtonClicked}>{liked? '❤️': '🤍'}</button> |
There was a problem hiding this comment.
| <button className='like' onClick={likeButtonClicked}>{liked? '❤️': '🤍'}</button> | |
| <button className='like' onClick={likeButtonClicked}>{liked ? '❤️': '🤍'}</button> |
There was a problem hiding this comment.
The button function could also be implemented like so:
<button className='like' onClick={() => likeButtonClicked(id)}>{liked ? '❤️': '🤍'}</button>| id: PropTypes.number.isRequired, | ||
| sender: PropTypes.string.isRequired, | ||
| body: PropTypes.string.isRequired, | ||
| timeStamp: PropTypes.string.isRequired, | ||
| liked: PropTypes.bool.isRequired, | ||
| onLikeToggle: PropTypes.func.isRequired, |
2 participants
No description provided.