-
Notifications
You must be signed in to change notification settings - Fork 45
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
base: main
Are you sure you want to change the base?
Phoenix_Marjana #30
Conversation
There was a problem hiding this 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 ^_^
if (chat.id === id){ | ||
return {...chat, liked: !chat.liked}; | ||
}else { | ||
return chat; |
There was a problem hiding this comment.
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 { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
}else { | |
} else { |
} | ||
})); | ||
}; | ||
const totalLikes = chatData.filter((chat) => chat.liked).length; |
There was a problem hiding this comment.
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
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 ( |
There was a problem hiding this comment.
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, |
There was a problem hiding this comment.
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 typeboolean
supplied toChatEntry
, expectedstring
.
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> |
There was a problem hiding this comment.
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"> |
There was a problem hiding this comment.
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}> |
There was a problem hiding this comment.
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) => { |
There was a problem hiding this comment.
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({ |
There was a problem hiding this comment.
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
!
No description provided.