Zoisite Yvett J

[yvett-codes]

No description provided.

[yangashley]

Nice work wrapping this project up 🥳

I left a couple comments related to how you can lift the state of messages up from ChatEntry up to App.js. My point spans several comments so have a look at them together. Ultimately, we should use state to keep track of chatMessages, but we don't need it for keeping track of likes.

Let me know if you have questions about my review comments! You're done with core curriculum 💪

[yangashley]

You can actually keep track of the number of likes across all the messages without using state, thus we should prefer to not use state to reduce the complexity of the project.

Instead, you can create a function that iterates over all the chats and adds up the number of likes, something like:

const getHeartCount = () => {
    return chatMessages.reduce((total, chat) => {
      return chat.liked ? total + 1 : total;
    }, 0)
};

// then on line 21, you can write this:
<h2>{getHeartCount()} ❤️s</h2>

This approach for calculating the total likes across all messages, would require you to keep track of the messages as state though and you'd need an event handler for updating when a message is liked. I'll leave more details about that in another comment.

[yangashley]

Instead of just passing in chatMessages from the messages.json file, we should use state as a single source of truth for keeping track of the data related to messages. Therefore, we should have a piece of state on line 8 like:

const [chatMessageData, setChatMessagData] = useState(chatMessages);

You'd also need an event handler that you can pass down to ChatEntry.js that would help you toggle the liked value on a single chat. It would be better for the logic about how to copy the message and change the liked status to be written in App.js

const updateEntryData = id => {
const entries = chatMessageData.map(entry => {
      if (entry.id === id){
        return {...entry, liked: !entry.liked};
      } 
      else {
        return entry;
      }
    });
    setChatMessagData(entries);
}

[yangashley]

Following my comment above about creating an event handler in app.js to help you keep track of a message's 'liked' status, you would need to pass that event handler from App to ChatLog and finally into ChatEntry.

<ChatLog
    entries={chatMessageData}
    updateEntryData={updateEntryData}
/>

[yangashley]

Nice job using the provided TimeStamp component

[yangashley]

Don't need state here to keep track of a message's 'liked' status.

[yangashley]

Following my suggestion about passing down an event handler that can be used to change a message's 'liked' status, you would use that event handler in toggleHeart here:

  const toggleHeart = () => {
    props.updateEntryData(props.id);
  };

[yangashley]

Be sure to write out the full propTypes in the future to include shapeOf

[yangashley]

propTypes is missing a couple values that are passed in from ChatLog to ChatEntry: likeMessage and unlikeMessage

[yangashley]

👍

[yangashley]

We should also use the id for the key prop since we're iterating over many entries to create many ChatEntrys:

 <ChatEntry
     id={entry.id}
     key={entry.id}
     // the rest of your props for your component
/>