Conversation
src/App.jsx
Outdated
|
|
||
| const toggleLike = (id) => { | ||
| const updatedMessages = messages.map((msg) => | ||
| msg.id === id ? { ...msg, liked: !msg.liked } : msg |
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.
There was a problem hiding this comment.
I moved the logic for toggling the liked status into a helper function called toggleLikedStatus() in a new messageHelpers.js file.
src/App.jsx
Outdated
| setMessages(updatedMessages); | ||
| }; | ||
|
|
||
| const countLikes = messages.filter((msg) => msg.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);
};There was a problem hiding this comment.
I replaced the filter().length approach with a reduce()-based function calculateTotalLikeCount() to count total likes.
| <button className="like">🤍</button> | ||
| <p>{body}</p> | ||
| <p className="entry-time"> | ||
| <TimeStamp time={timeStamp} /> |
There was a problem hiding this comment.
Nice job using the provided TimeStamp component.
| import { useState } from 'react'; | ||
|
|
||
| const App = () => { | ||
| const [messages, setMessages] = useState(chatMessages); |
| <div id="App"> | ||
| <header> | ||
| <h1> Magic Messages </h1> | ||
| <h1> {chatHeader} </h1> |
There was a problem hiding this comment.
@yangashley Hi Ashley! I accidentally clicked "Resolve conversation" earlier sorry about that! Here is your comment on the header "I like that you put your own spin on this project, it's cute!
An element missing from your project is the header "Chat Between X and Y". Here you have "Magic Messages".
@Viktoria2609 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!" ---- so thank you for pointing out for this. I misunderstood the requirements . Now, I created a getParticipants() helper to dynamically generate the "Magic Messages between X and Y" header based on the message data.
2 participants
Implemented core features of the chat application including message display, dynamic sender styling, and interactive like functionality with state management and count display.