Conversation
| // const [entries, setEntries] = useState(chatMessages); | ||
| const [entries, setEntries] = useState( | ||
| chatMessages.map((msg) => ({ ...msg, liked: msg.liked ?? false })) | ||
| ); |
There was a problem hiding this comment.
We can assume that all msgs in chatMessages will have a property likedso we don't need to iterate each of them. We can directly set the initial stateentriesequal tochatMessages`, like what you have commented out on line 8.
| // const [entries, setEntries] = useState(chatMessages); | |
| const [entries, setEntries] = useState( | |
| chatMessages.map((msg) => ({ ...msg, liked: msg.liked ?? false })) | |
| ); | |
| const [entries, setEntries] = useState(chatMessages); | |
| ); |
| setEntries(updatedEntries); | ||
| }; | ||
|
|
||
| const totalLikes = entries.filter((entry) => entry.liked).length; |
There was a problem hiding this comment.
Great idea to filter down the data to the liked messages and use the list length as the count!
This approach works, but you'll typically see JS devs use reduce to calculate a value like this:
const calculateTotalLikeCount = (chatData) => {
return entries.reduce((acc, entry) => {
return entry.liked ? acc + 1 : acc;
}, 0);
};| const toggleLike = (id) => { | ||
| const updatedEntries = entries.map((entry) => { | ||
| if (entry.id === id) { | ||
| 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 = entries.filter((entry) => entry.liked).length; | ||
| const localSender = "Vladimir"; |
There was a problem hiding this comment.
This is a constant variable so we should use all capital letters.
| const localSender = "Vladimir"; | |
| const LOCAL_SENDER = "Vladimir"; |
| <div id="App"> | ||
| <header> | ||
| <h1>Application title</h1> | ||
| <h1>Chat Log</h1> |
There was a problem hiding this comment.
An element missing from your project is the header "Chat Between Vladimir and Estragon". Here you have "Chat Log".
@NataliaRaz How would you create a header that reflects the screenshot below? It can be done by hardcoding the string in the h1 tag, but I'm wondering how would you programmatically get the names of the participants in the chat?
Please respond to this comment with your answer, thank you!
| <h2 className="entry-name">{sender}</h2> | ||
| <section className="entry-bubble"> | ||
| <p>{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.