Phoenix_Marjana

[marjanak]

No description provided.

[kelsey-steven-ada]

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

[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]

Suggested change

	}else {
	} else {

[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
// likesCount is a variable that accumulates a value as we loop over each entry in chatData
const totalLikes = chatData.reduce((likesCount, currentMessage) => {
    // If currentMessage.liked is true add 1 to likesCount, else add 0
    return (likesCount += currentMessage.liked ? 1 : 0);
}, 0); // The 0 here sets the initial value of likesCount to 0

[kelsey-steven-ada]

Please use blank lines to break up sections of code so it's easy as a reader to see where different areas of responsibility in the file are. It can also help flow and ease of reading to organize variables together, followed by functions, then the return value of the file. A possible reorganization could look like:

  const [chatData, setChatData] = useState(message);
  const totalLikes = chatData.filter((chat) => chat.liked).length;

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

[kelsey-steven-ada]

If we take a look in the messages.json file, what is the datatype of the "liked" key in each object? Something I noticed when running the tests both in VS Code and in the Terminal was a message in the test output:

Warning: Failed prop type: Invalid prop liked of type boolean supplied to ChatEntry, expected string.
at ChatEntry (/Users/kelseysteven/Documents/grading/C22/ChatLog/Marjana-react-chatlog/src/components/ChatEntry.jsx:9:22)

What does this error tell us?

[kelsey-steven-ada]

I like this pattern of sending just the id to chatClicked since it keeps all the state management and message object creation confined to App.

[kelsey-steven-ada]

If we wanted to implement the local and remote styles, we could use another ternary operator to determine our sender value and then set the class as local or remote accordingly. It could be helpful to look at how to create an interpolated string in Javascript for that.

[kelsey-steven-ada]

Rather than wrapping our ChatEntry in a li here, another option could be to change ChatEntry so that it's outermost element was an li instead of a div

[kelsey-steven-ada]

Nice mapping! 🙌🏻

[kelsey-steven-ada]

Nice use of PropTypes.arrayOf and PropTypes.shape!