Conversation
spitsfire
left a comment
spitsfire
left a comment
There was a problem hiding this comment.
Nice job, Melley! There's some refactoring you could do to updateLike so that it updates the count of hearts, but also updates the chatData.
If you have any questions, please let me know.
| // console.log(id, ChatData); | ||
| // console.log(like); | ||
| // console.log(id.liked); |
There was a problem hiding this comment.
Remember to delete any commented out code or print statements used for debugging before turning in your final submission
| // console.log(id, ChatData); | |
| // console.log(like); | |
| // console.log(id.liked); |
| // console.log('newMessage'); | ||
| // console.log(newMessage); | ||
| // console.log(like); |
There was a problem hiding this comment.
| // console.log('newMessage'); | |
| // console.log(newMessage); | |
| // console.log(like); |
| import React from 'react'; | ||
| import React, { useState } from 'react'; | ||
| import './App.css'; | ||
| // import ChatEntry from './components/ChatEntry'; |
There was a problem hiding this comment.
| // import ChatEntry from './components/ChatEntry'; |
| // console.log(like); | ||
| // console.log(id.liked); | ||
|
|
||
| const newMessage = ChatData.find((entry) => entry.id === id); |
There was a problem hiding this comment.
I think we can refactor this function so we aren't iterating twice. By separating the message out here, we now lose track of where it is in the data structure. So we have to iterate through a second time to put it back in.
Let's just do everything at once inside the bottom loop.
| setChatData([...ChatData]); | ||
| if (like) { | ||
| setLikeCount(likeCount + 1); | ||
| console.log('setLikeCount'); |
There was a problem hiding this comment.
| console.log('setLikeCount'); |
| } | ||
| if (!like) { | ||
| setLikeCount(likeCount - 1); | ||
| console.log('setLikeCount2'); |
There was a problem hiding this comment.
| console.log('setLikeCount2'); |
| // console.log('ChatEntry'); | ||
| const onLikeButtonClick = () => { | ||
| // console.log('onLikeButtonClick'); | ||
| // console.log(liked); |
There was a problem hiding this comment.
| // console.log('ChatEntry'); | |
| const onLikeButtonClick = () => { | |
| // console.log('onLikeButtonClick'); | |
| // console.log(liked); | |
| const onLikeButtonClick = () => { |
| const updatedMessage = { | ||
| id: id, | ||
| body: body, | ||
| sender: sender, | ||
| timeStamp: timeStamp, | ||
| liked: !liked, | ||
| }; | ||
| updateMessage(updatedMessage.id, updatedMessage.liked); | ||
| }; |
There was a problem hiding this comment.
This works just fine, and it's an example we show in Learn.
But consider that updateMessage has been given the responsibility to update the likes, right? Let updateMessage take care of it by reassigning liked. All onLikeButtonClick should do is grab the id that updateMessage needs and pass it through.
| // console.log(likeColor); | ||
| // console.log(onLikeButtonClick); |
There was a problem hiding this comment.
| // console.log(likeColor); | |
| // console.log(onLikeButtonClick); |
| // console.log(newMessage); | ||
| // console.log(like); | ||
| newMessage.liked = like; | ||
| setChatData([...ChatData]); |
There was a problem hiding this comment.
The newMessage is never put back into chatData, so the hearts in the ChatEntry components never change color, which is why one of the Wave 3 tests doesn't pass.
2 participants
No description provided.