C22 - Phoenix - Kristina Nguyen

[kstinanguyen]

No description provided.

[kelsey-steven-ada]

Great work! Let me know if you have questions on any of the feedback ^_^

[kelsey-steven-ada]

Love the theme toggle!

[kelsey-steven-ada]

Great work calculating the hearts count from the chatsData! Since we don't need the contents of the array we get from 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 likedCount = 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

[kelsey-steven-ada]

Nice managing of data & making sure we return a new object when we need to alter a message in our list.

[kelsey-steven-ada]

Since we aren't taking any other actions with the mode argument, I think we could factor out the toggleDarkMode function and pass setTheme directly to the DarkMode component.

[kelsey-steven-ada]

It can be a little easier to read and understand code when we co-locate variables rather than placing them in-between functions. One possible re-organization could look like:

  const [chatData, setChatData] = useState(CHATS);
  const [theme, setTheme] = useState('App');
  const likedCount = chatData.filter((chat) => chat.liked).length;

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

  const toggleDarkMode = (mode) => {
    setTheme(mode);
  };

[kelsey-steven-ada]

Suggested change

	const setMessageBubble = id%2 ? 'local' : 'remote';
	const setMessageBubble = id % 2 ? 'local' : 'remote';

[kelsey-steven-ada]

Great use of a variable and interpolated string to form the className value.

[kelsey-steven-ada]

Nice use of Prop-Types and flagging those necessary for render with isRequired!.

[kelsey-steven-ada]

Nice mapping! 🙌🏻

[kelsey-steven-ada]

Nice use of PropTypes.arrayOf and PropTypes.shape!