Kunzite - Allie S.

[azs6189]

No description provided.

[spitsfire]

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.

[spitsfire]

Let's remove this line of code since we aren't using it anymore

Suggested change

// const [likesCount, setLikesCount] = useState(0);

[spitsfire]

Suggested change

// entry.liked = !entry.liked;

[spitsfire]

Suggested change

	{/* Wave 01: Render one ChatEntry component */}
	{/* Wave 02: Render ChatLog component */}

[spitsfire]

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

[spitsfire]

Suggested change

	{/* <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>

[spitsfire]

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