Skip to content

Phoenix_Marjana #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Phoenix_Marjana #30

wants to merge 4 commits into from

Conversation

marjanak
Copy link

No description provided.

Copy link
Collaborator

@kelsey-steven-ada kelsey-steven-ada left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment on lines +10 to +13
if (chat.id === id){
return {...chat, liked: !chat.liked};
}else {
return chat;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
}else {
} else {

}
}));
};
const totalLikes = chatData.filter((chat) => chat.liked).length;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment on lines +7 to 18
const [chatData, setChatData] = useState(message);
const togglelikes = (id) => {
setChatData( chatData => chatData.map(chat => {
if (chat.id === id){
return {...chat, liked: !chat.liked};
}else {
return chat;
}
}));
};
const totalLikes = chatData.filter((chat) => chat.liked).length;
return (
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 (

sender: PropTypes.string.isRequired,
body: PropTypes.string.isRequired,
timeStamp: PropTypes.string.isRequired,
liked: PropTypes.string.isRequired,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

<p className="entry-time">
<TimeStamp time={timeStamp}/>
</p>
<button className="like" onClick={() => chatClicked(id)}>{heartColor}</button>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.


const ChatEntry = () => {
const ChatEntry = ({id,sender,body,timeStamp,liked,chatClicked}) => {
const heartColor = liked ? '❤️' : '🤍';
return (
<div className="chat-entry local">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

const ChatLog = ({entries, chatClicked}) => {
const chatComponents = entries.map((chat) => {
return (
<li key={chat.id}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

import './ChatLog.css';

const ChatLog = ({entries, chatClicked}) => {
const chatComponents = entries.map((chat) => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice mapping! 🙌🏻

};

ChatLog.propTypes = {
entries: PropTypes.arrayOf(PropTypes.shape({
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice use of PropTypes.arrayOf and PropTypes.shape!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants