Conversation
…age bubble. Wave 1
…ate() to ChatLog as a prop
…al and remote colors.
… entryClass and chatColor accordingly.
… and isLocal to ChatEntry.
| const LOCAL_SENDER = entryData[0].sender; | ||
| const REMOTE_SENDER = entryData[1].sender; |
There was a problem hiding this comment.
This works for our application right now! You'd need to come up with a different solution for how identifiying different senders if react-chatlog allowed for messages between more than 2 senders (like a big group chat between many friends).
| const [localColor, setLocalColor] = useState('green'); | ||
| const [remoteColor, setRemoteColor] = useState('blue'); |
There was a problem hiding this comment.
Instead of creating 2 separate pieces of state to track colors for the local user and the remote user, you could create just one piece of state that can keep track of both pieces of these info.
const [usersColors, setUsersColors] = useState({
local: 'green',
remote: 'blue'
});| }; | ||
|
|
||
| const updateEntryLikedState = (entryId) => { | ||
| setEntryData(entries => { |
There was a problem hiding this comment.
Nice use of the callback setter style. In this application, it doesn't really matter whether we use the callback style or the value style, but it's good practice to get in the habit of using the callback style.
|
|
||
| const updateEntryLikedState = (entryId) => { | ||
| setEntryData(entries => { | ||
| return entries.map(entry => { |
There was a problem hiding this comment.
Nice use of map here to both handle making a new list so that React sees the message data has changed, and make new data for the clicked message with its like status toggled.
| setEntryData(entries => { | ||
| return entries.map(entry => { | ||
| if (entry.id === entryId) { | ||
| return { ...entry, liked: !entry.liked }; |
There was a problem hiding this comment.
We showed this approach in class, but technically, we're mixing a few responsibilities here. rather than this function needing to know how to change the liked status itself, we could move this update logic to a helper function. This would better mirror how we eventually update records when there's an API call involved.
In this project, our messages are very simple objects, but if we had more involved operations, it could be worthwhile to create an actual class with methods to work with them, or at least have a set of dedicated helper functions to centralize any such mutation logic.
| }; | ||
|
|
||
| const totalLikes = entryData.reduce((sum, entry) => { | ||
| return entry.liked ? sum + 1 : sum; |
There was a problem hiding this comment.
Nice job using reduce! This is how most JS devs would go about calculating a total amount too.
Instead of using a ternary operator here, we could write something like:
| return entry.liked ? sum + 1 : sum; | |
| (totalLikes + message.liked) |
Adding a boolean to a number treats true as 1 and 0 as false
| <span className={localColor}>{LOCAL_SENDER}</span>{' '} | ||
| and{' '} | ||
| <span className={remoteColor}>{REMOTE_SENDER}</span> |
| <p className="entry-time">Replace with TimeStamp component</p> | ||
| <button className="like">🤍</button> | ||
| <p className={chatColor}>{body}</p> | ||
| <p className="entry-time"><TimeStamp time={timeStamp} /></p> |
There was a problem hiding this comment.
Nice job using the provided TimeStamp component
2 participants
No description provided.