BumbleBee-WendyWang

[wendyww9]

No description provided.

[kelsey-steven-ada]

Really nice work! Let me know if you have any questions on the feedback.

[kelsey-steven-ada]

Great work calculating the like count from the chat data! Since we don't need the contents of the array we create with filter, another option is to use a higher order function like array.reduce to take our list of messages and reduce it down to a single value.

// This could be returned from a helper function
// totalLikes is a variable that accumulates a value as we loop over each entry in chatEntries
const likesCount = chatEntries.reduce((totalLikes, currentMessage) => {
    // If currentMessage.liked is true add 1 to totalLikes, else add 0
    return (totalLikes += currentMessage.liked ? 1 : 0);
}, 0); // The 0 here sets the initial value of totalLikes to 0

[wendyww9]

Will look into reduce function more.

[kelsey-steven-ada]

What is the benefit of placing these functions outside of App?

Both functions rely on application specific data and formatting, so I would strongly consider bundling these inside the App function, similar to the chatLiked function.

[wendyww9]

Got it, will move them inside. Initially, put them outside because we can call them and pass the data to them, so it would be fine if they are outside of App and make App code shorter.

[kelsey-steven-ada]

Nice work ensuring we're creating a new array of messages to trigger the re-render after updating the liked value!

[kelsey-steven-ada]

This is the same under the hood, but since we have a situation where we return either one thing or the other, we could replace the if/else with a ternary operator:

return chatData.map(chat => {
    return (id === chat.id) ? {...chat, liked: !chat.liked} : chat;
});

[wendyww9]

Nice! Will try this way.

[kelsey-steven-ada]

Since this is a user facing piece of text, we should prefer to use a semantic element like p to hold the text and use CSS to style it as desired.

[wendyww9]

Will update it to p element. Thank you.

[kelsey-steven-ada]

These can be a little easier to read with adjusted indentation and using the self-closing tag:

<ChatLog
    entries={chatData}
    onLike ={chatLiked}
    uniqueSenders = {uniqueSenders}
/>

[wendyww9]

Thank you for pointing it out. Will update.

[kelsey-steven-ada]

I like this pattern of sending just the id to props.onLike since it keeps all the state management and message object creation confined to App.

[kelsey-steven-ada]

chatLiked is named in a way that many developers might assume the name represents a boolean variable rather than a function. Including a verb that indicates action is very typical for function names and helps other developers make safer assumptions when reading code. Names like like setChatLiked or updateLikedValue help indicate that the variable is something that takes action over holding a static value.

[wendyww9]

Thank you for the feedback. Will look into how to name variables and functions more.

[kelsey-steven-ada]

Nice use of the entry.id for list item key values since our messages have unique ids!

[kelsey-steven-ada]

There are extra layers to the HTML that aren't necessary. Right now ChatEntry is wrapped in an li at the ChatLog layer and gets wrapped in another div at the ChatEntry layer.

We could remove the li tags in ChatLog and replace the outermost div in ChatEntry with li so that we do not use a div at all, factoring out elements that are not semantic and removing a layer of wrapping!

[wendyww9]

Got it. Will update this part and work more on refactoring code.