Conversation
spitsfire
left a comment
spitsfire
left a comment
There was a problem hiding this comment.
Great job, Allie! You stuck with Learn's structure (ie, keeping a single source of truth with state and functions). Only real feedback I had was removal of unused code and a tweak to the ChatEntry HTML.
| </main> | ||
| </div> | ||
| ); | ||
| // const [likesCount, setLikesCount] = useState(0); |
There was a problem hiding this comment.
Let's remove this line of code since we aren't using it anymore
| // const [likesCount, setLikesCount] = useState(0); |
| const switchHeart = (updatedEntry) => { | ||
| const updatedEntries = entries.map((entry) => { | ||
| if (entry.id === updatedEntry.id) { | ||
| // entry.liked = !entry.liked; |
There was a problem hiding this comment.
| // entry.liked = !entry.liked; |
| {/* Wave 01: Render one ChatEntry component */} | ||
|
|
||
| {/* Wave 02: Render ChatLog component */} |
There was a problem hiding this comment.
| {/* Wave 01: Render one ChatEntry component */} | |
| {/* Wave 02: Render ChatLog component */} |
| liked: !props.liked, | ||
| }; | ||
| setLikePost(!likePost); |
There was a problem hiding this comment.
Looks like we are updating the chat message data from entries state using the switchHeart. Because of this, we aren't really using likePost or displaying it in our component.
Consider removing lines 8 and 18 completely
| {/* <h2 className="entry-name">Replace with name of sender</h2> */} | ||
| <h2 className="entry-name">{props.sender}</h2> | ||
| <section className="entry-bubble"> | ||
| {/* <p>Replace with body of ChatEntry</p> */} | ||
| <p>{props.body}</p> | ||
| {/* <p className="entry-time">Replace with TimeStamp component</p> */} |
There was a problem hiding this comment.
| {/* <h2 className="entry-name">Replace with name of sender</h2> */} | |
| <h2 className="entry-name">{props.sender}</h2> | |
| <section className="entry-bubble"> | |
| {/* <p>Replace with body of ChatEntry</p> */} | |
| <p>{props.body}</p> | |
| {/* <p className="entry-time">Replace with TimeStamp component</p> */} | |
| <h2 className="entry-name">{props.sender}</h2> | |
| <section className="entry-bubble"> | |
| <p>{props.body}</p> |
| return ( | ||
| <div className="chat-log" key={message.id}> | ||
| <ChatEntry | ||
| id={message.id} | ||
| sender={message.sender} | ||
| body={message.body} | ||
| timeStamp={message.timeStamp} | ||
| liked={message.liked} | ||
| onUpdate={props.onUpdateHeart} | ||
| ></ChatEntry> | ||
| </div> | ||
| ); | ||
| }); | ||
| return chatComponents; |
There was a problem hiding this comment.
This works! HTML-wise, it is creating a lot of extra div elements that we could clean up by doing the following:
const chatComponents = entries.map((message, index) => {
return (
<ChatEntry
key={message.id}
id={message.id}
sender={message.sender}
body={message.body}
timeStamp={message.timeStamp}
liked={message.liked}
onUpdate={props.onUpdateHeart}
/>
);
});
return (
<div className="chat-log">
{chatComponents}
</div>
);Now there is only one div parent surrounding all the ChatEntry components
2 participants
No description provided.