C22 Sphinx - Aleida Vieyra #37
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
mikellewade
reviewed
Jan 4, 2025
Comment on lines
+11
to
+21
| 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!
Comment on lines
+13
to
+19
| setEntries(entries => entries.map(entry=>{ | ||
| if (entry.id == id){ | ||
| return {...entry, liked: !entry.liked}; | ||
| } | ||
| else{ | ||
| return entry; | ||
| } |
There was a problem hiding this comment.
Suggested change
| 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!
Comment on lines
+25
to
+38
| 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
Comment on lines
+51
to
+54
| <ChatLog | ||
| entries={entries} | ||
| onLikeBtnToggle={toggleLikeBtnClick} | ||
| /> |
Comment on lines
+6
to
+14
| const chatComponents = entries.map((entry) => { | ||
| return( | ||
| <ChatEntry | ||
| {...entry} | ||
| onLikeToggle={onLikeBtnToggle} | ||
| key={entry.id} | ||
| /> | ||
| ); | ||
| }); |
Comment on lines
+26
to
+35
| 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.
Suggested change
| <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>
Comment on lines
+30
to
+35
| id: PropTypes.number.isRequired, | ||
| sender: PropTypes.string.isRequired, | ||
| body: PropTypes.string.isRequired, | ||
| timeStamp: PropTypes.string.isRequired, | ||
| liked: PropTypes.bool.isRequired, | ||
| onLikeToggle: PropTypes.func.isRequired, |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.