Zoisite - Jackie Aponte

[japonte08]

No description provided.

[yangashley]

Nice job on react-chatlog! I do see a test failing. Did you get a chance to look into why it's failing?

Good work getting the local and remote conversation feature.

I made a couple suggestions about coding patterns that I think are important to recognize and follow for React.

Let me know if you have questions about my review comments.

[yangashley]

What if textMessage[0] and textMessage[1] were both messages from the same person? How else could you find a way to get the names of the senders?

[yangashley]

👍 nice job setting up state for chat messages.

[yangashley]

We can use the reduce method to calculate the total likes too:

  const totalLikes = () => { 
    return chatData.reduce((total, text) => {
      return text.liked ? total + 1 : total;
    }, 0)
  };

[yangashley]

👍

[yangashley]

Rather than receiving a new entry with it's like status already changed here, rewrite this method to accept only an id. The logic about how to copy the message and change the liked status would be better if it was written in App.js, since the state must have all the information necessary to make a new message.

const onUpdateChat = id => {
const messages = chatData.map(chat => {
      if (chat.id === id){
        return {...chat, liked: !chat.liked};
      } 
      else {
        return chat;
      }
    });

[yangashley]

Small note that variables don't begin with a capital letter. The prop key should go on each ChatEntry, not on the entire div. When you have an array of components (like you have an array of ChatEntries), each component in the array gets a prop key.

Also, instead of writing a method ChatLogEntries to reference the return value from calling map() on props.chatData, it's more common to directly iterate over the chat entries in your component like this without using a variable:

const ChatLog = (props) => {
    return (
     <div>
        {props.entries.map((message) => (
            <ChatEntry 
                key={entry.id} // the key should go on each ChatEntry
                id={entry.id}
                sender={entry.sender}
                body={entry.body}
                timeStamp={entry.timeStamp}
                liked={entry.liked}
                onUpdateChat={props.onUpdateChat}
            />
        ))}
    </div>
    )
};

The logic on line 20 to determine the class name for remote or local should live in ChatEntry.js I think you can omit line 20 completely and have this logic live in the child component. I think this because each child component should know who its sender is and thus should be in charge of determining the class.

[yangashley]

Instead of getting the class 'remote' or 'local' from props, we can calculate it here.

<div className={props.sender === 'Estragon' ? 'chat-entry remote' : 'chat-entry local'}>

[yangashley]

The PropType check is missing id and chatEntry that are passed into each ChatEntry component on lines 14 and 20 of ChatLog.js

[yangashley]

When you just pass in an id to props.onUpdateChat(), then this method can be refactored to just be one line:

const onLikeButtonClick = () => {
    props.onUpdateChat(props.id);
};

[yangashley]

Nitpick - there should be whitespace around the equal sign. When we pass props to a component, then by convention we should omit the spaces around the equal sign, but when we're declaring variables we should have them.