paige zoisite react chat log #116
Conversation
src/App.js
Outdated
| const likeCount = chatEntries.filter((entry) => entry.liked).length | ||
|
|
||
| const updateLike = (chatEntryId) => { | ||
| const updatedEntries = chatEntries.map((entry) => { | ||
| if (entry.id === chatEntryId) { | ||
| entry.liked = !entry.liked; | ||
| } | ||
| return entry; | ||
| }) | ||
|
|
||
| setChatEntries(updatedEntries); | ||
| } |
There was a problem hiding this comment.
The way likeEntry updates the messages data causes one of the tests to fail depending on the order it runs in.
"In react-chatlog, inadvertently mutating the state object leads to inadvertently mutating the module-static messages variable, which has the side effect of persisting “state” across the two test runs.
Our useState data chatEntries is intended to be read-only, but we're editing the existing entries on line 16. What we want to do is make a copy of the message object we're updating, change the liked value on the copy, then return that new object. Essentially, we can make a shallow copy of objects that are not changing, but we need a deep copy of any objects we're updating. One way we could do that might look like:
const updateLike = (chatEntryId) => {
const updatedEntries = chatEntries.map((entry) => {
if (entry.id === chatEntryId) {
// Use spread operator to copy all of entry's values to a new object,
// then overwrite the attribute liked with the opposite of what entry's liked value was
return { ...entry, liked: !entry.liked }
}
// We didn't enter the if-statement, so this entry is not changing.
// Return the existing data
return chat;
});
setChatEntries(updatedEntries);
};
src/App.js
Outdated
| return ( | ||
| <div id="App"> | ||
| <header> | ||
| <h1>Application title</h1> | ||
| <h1>Chat 🪵 {likeCount}</h1> |
There was a problem hiding this comment.
The test for the heart count uses screen.getByText(/3 ❤️s/) to find the heart count on the screen. Right now the page displays the count by itself, how can we update the text we display to pass the tests?
| const [chatEntries, setChatEntries] = useState(chatMessages) | ||
|
|
||
| // this works bc we are setting the state of the page in like 21 which will rerender the page(app component) everytime the buttone is pressed. | ||
| const likeCount = chatEntries.filter((entry) => entry.liked).length |
There was a problem hiding this comment.
Great use of filter & the message state to find the heart count!
src/components/ChatEntry.js
Outdated
| <p className="entry-time">Replace with TimeStamp component</p> | ||
| <button className="like">🤍</button> | ||
| <p>{props.body}</p> | ||
| <p className="entry-time">{props.timeStamp}</p> |
There was a problem hiding this comment.
There are a couple things to look at around the time:
- This prop is empty so the time never shows, how is this data being passed from ChatLog to ChatEntry? What would we need to update for this data to flow through like we expect?
- The TimeStamp component takes props.timeStamp and converts it to a text representation. There is a test that looks for
expect(screen.getByText(/\d+ years ago/)).toBeInTheDocument()which finds the text generated by a TimeStamp instance. How could we create an instance of TimeStamp here and pass it a prop containingprops.timeStamp?
src/components/ChatLog.js
Outdated
| id={entry.id} | ||
| sender={entry.sender} | ||
| body={entry.body} | ||
| timeStamp={entry.time} |
There was a problem hiding this comment.
I see entry.time is being passed, does this key exist in the message data in the .json file?
src/components/ChatEntry.js
Outdated
| import './ChatEntry.css'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| const ChatEntry = (props) => { | ||
| const heart = props.liked ? '🤍' : '❤️'; | ||
| console.log(heart) |
There was a problem hiding this comment.
We want to delete logging statements and other diagnostic code before opening PRs to ensure we don't bring them into the final codebase.
| const updateLike = (chatEntryId) => { | ||
| const updatedEntries = chatEntries.map((entry) => { | ||
| if (entry.id === chatEntryId) { | ||
| return { ...entry, liked: !entry.liked}; |
No description provided.