Conversation
| return ( | ||
| <div id="App"> | ||
| <header> | ||
| <h1>Application title</h1> |
There was a problem hiding this comment.
An element missing from your project is the header "Chat Between X and Y". Here you have "Application Title".
@dniph 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!
| import chat from './data/messages.json'; | ||
|
|
||
| const App = () => { | ||
| const [chatMessages, setChatMessages] = useState(chat); |
| const toggleLike = (id) => { | ||
| const updatedMessages = chatMessages.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 [chatMessages, setChatMessages] = useState(chat); | ||
|
|
||
| const toggleLike = (id) => { | ||
| const updatedMessages = chatMessages.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.
| setChatMessages(updatedMessages); | ||
| }; | ||
|
|
||
| const totalLikes = chatMessages.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 chatData.reduce((acc, chat) => {
return chat.liked ? acc + 1 : acc;
}, 0);
};| <p className="entry-time">Replace with TimeStamp component</p> | ||
| <button className="like">🤍</button> | ||
| <p>{body}</p> | ||
| <TimeStamp time={timeStamp} /> |
There was a problem hiding this comment.
Nice job using the provided TimeStamp component
| const handleLikeClick = () => { | ||
| onLikeToggle(id); | ||
| }; |
2 participants
No description provided.