Snow Leopards - Anika SW

[anika-sw]

No description provided.

[yangashley]

Nice work on react chat log!

Let me know if you have any questions about my comments

[yangashley]

Instead of using useEffect here to set the values for chatEntryData on page load, you can omit this completely and directly set the state on line 8. That would look like:

  const [chatEntryData, setChatEntryData] = useState(chatMessages);

[yangashley]

We should always be on the lookout for whether we need to create state or not. Creating additional pieces of state adds complexity to a project. When possible, we should prefer to calculate values instead of using state to keep track of it.

To remove the state likesCount you'd need to have a method like calculateLikesCount that iterates over chatEntryData and adds up the likes from each message:

const calculateLikesCount = (chatEntryData) => {
    return chatEntryData.reduce((total, message) => {
      return message.liked ? (total += 1) : total;
    }, 0); 
};

[yangashley]

Since the total number of likes can be found without introducing state, this line can be removed.

[yangashley]

You're already keeping track of chatEntryData in app.js (updateChatEntryData on line 24) so we should keep all chatEntryData logic in app.js instead of having it in different components which makes the code hard to maintain. It's easier to remember that everything is in app.js (instead of having to check each component to see if make changes to chatEntryData). In industry, an application could have hundreds of components so keeping logic organized is important.

We also discussed lifting up state in the Learn readings. Here, we can lift up the like state out of ChatEntry and into App.js to follow this pattern of lifting state up.

This means toggleLikeButton should live in app.js and get passed down to ChatEntry as a prop. So you'd have a method like toggleLike in app.js:

const toggleLike = (id) => {
    setChatData((chatData) =>
    chatData.map((message) => {
      if (message.id === id) {
        return {...message, liked: !message.liked};
      } else {
        return message;
      }
    })
    );
  };

and then your onClick event handler on line 29 below would look like:

onClick={() => props.toggleLike(props.id)}

[yangashley]

We should only use index for the key prop when we do not have an object ID, use index as a last resort. Since you have entry.id, use that id for key instead here

[yangashley]

While Learn does show using a variable to reference the return value from calling .map() and then using the variable in the JSX like you've done here, I did want to call out that you'll see another, more common way of writing code that iterates over a list of objects:

return (
    <ul>
        {props.entries.map.((entry, index) => {
            <li key={index}>
            <ChatEntry
                id={entry.id}
                sender={entry.sender}
                body={entry.body}
                timeStamp={entry.timeStamp}
                liked={entry.liked}
                onHandleLikes={props.onUpdateLikes}>
            </ChatEntry>
            </li> 
            }
        }
)

[yangashley]

Nice use of the provided TimeStamp component to properly display the time

[yangashley]

👍

[yangashley]

Instead of using likesCount here, you'd invoke your helper method that calculates the likes

<h2>{calculateLikesCount()} ❤️</h2>