Ocelots - Xuan Hien Pham

[HienXuanPham]

No description provided.

[kelsey-steven-ada]

Looks good 🎉 I've left some feedback as comments, please check them out when you can and reach out here or on Slack if there's anything I can clarify =]

[kelsey-steven-ada]

We could combine the react imports into a single line:

import React, { useState } from 'react';

[kelsey-steven-ada]

It looks like this variable count is only used inside the function countLike, so we should move the instantiation inside of the function so the variable cannot be affected by other code.

[kelsey-steven-ada]

Nice loop to calculate the like count from the message data! 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 = chatMessagesData.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

[HienXuanPham]

Thank you! It is an interesting solution. A higher order function is take another function as its parameter. What is it in this case?

[kelsey-steven-ada]

In this case we have an anonymous function in the inner code that take in the totalLikes and currentMessage:

(totalLikes, currentMessage) => {
    // If currentMessage.liked is true add 1 to totalLikes, else add 0
    return (totalLikes += currentMessage.liked ? 1 : 0);
}

[kelsey-steven-ada]

I would consider passing the id of the message clicked to props.onUpdate and having the App code handle the new object creation. When ChatEntry creates the new object for the App state, it takes some responsibility for managing those contents. If we want the responsibility of managing the state to live solely with App, we would want it to handle defining the new message object.

This made me think of a related concept in secure design for APIs. Imagine we had an API for creating and updating messages, and it has an endpoint /<msg_id>/like meant to update a true/false liked value. We could have that endpoint accept a body in the request and let the user send an object with data for the message's record (similar to passing a message object from ChatEntry to App), but the user could choose to send any data for those values. If the endpoint only takes in an id and handles updating the liked status for the message itself, there is less opportunity for user error or malicious action.

[kelsey-steven-ada]

Having the decision logic in the JSX may make it harder to read quickly. Another option could be to have an interpolated string here that always holds chat-entry and use a placeholder where we pass only the remote or local class name:

const entryClassName = (props.sender === 'Vladimir') ? 'local' : 'remote';
...
<div className={`chat-entry ${entryClassName}`}>

[kelsey-steven-ada]

Really nice use of PropTypes.