Shark - Ying Ye #101
Shark - Ying Ye #101
Conversation
audreyandoy
left a comment
audreyandoy
left a comment
There was a problem hiding this comment.
Great job Ying! You passed all the tests and did a great job in developing PropTypes. I have left comments in your PR. Let me know if you have any questions!
Grade: 🟢
| import ChatLog from './components/ChatLog'; | ||
|
|
||
| const App = () => { | ||
| const [messages, setMessages] = React.useState([]); |
There was a problem hiding this comment.
If you add useState as an import, you wouldn't need to refer to the React object in order to use useState.
import React, { useState } from 'react'; const [messages, setMessages] = useState([]);| const heartToggling = (updatedMessage) => { | ||
| const updatedMessages = messages.map((message) => { | ||
| if (message.id === updatedMessage.id) { | ||
| return updatedMessage; | ||
| } else { | ||
| return message; | ||
| } | ||
| }); | ||
|
|
||
| setMessages(updatedMessages); | ||
| }; |
There was a problem hiding this comment.
Nice work managing the data and returning a brand new object!
Here's a refresher on updating state in React:
React components re-render whenever there is a change/update to state data. In this case, our data is an object and we are modifying values nested within that object.
Under the hood, React uses Object.is() to compare the previous state object with the one that's been provided viasetMessages(updatedMessages). Object.is() checks if the object has changed and more specifically if the object passed has a different reference in memory. In Javascript, changing the properties and/or values in an object does NOT change the object reference, which is why we must create a new version of our state object ( contains a copy of all the properties that weren't updated along with the properties/values that were).
Here is an article with more info: https://www.valentinog.com/blog/react-object-is/
| remote = eachMessage.sender; | ||
| } | ||
| } | ||
| // console.log('App', local); |
There was a problem hiding this comment.
In industry, you'll be submitting PR's containing code you'd like your team members to have. In this case, is it necessary for your teammates to have this console.log ? If not, we can remove this line.
| const local = chatMessages[0].sender; | ||
| let remote; | ||
| for (const eachMessage of chatMessages) { | ||
| if (eachMessage.sender !== local) { | ||
| remote = eachMessage.sender; | ||
| } | ||
| } |
There was a problem hiding this comment.
Nice work differentiating the chat participants!
| // const updateMessage = (updatedMessage) => { | ||
| // //update only the current message | ||
| // const allMessages = [...props.messages]; | ||
| // allMessages[index] = updatedMessage; | ||
| // props.setMessages(allMessages); | ||
| // }; | ||
|
|
||
| //optional: decide local and remote~~~~~~~~~~~~~ | ||
| // console.log('Log', props.local); | ||
| //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ | ||
|
|
There was a problem hiding this comment.
Please remove commented-out code in future PR's. This work could exist in a local branch.
| let pastYear = parseInt(props.timeStamp.slice(0, 4)); | ||
| // console.log(pastYear); | ||
| const agoTime = currentYear - pastYear; | ||
| console.log(props.sender); |
There was a problem hiding this comment.
Be sure to remove all print statements/console logs in PRs. Anything that we do locally to test our code should be left out of PRs.
| let currentYear = new Date().getFullYear(); | ||
| let pastYear = parseInt(props.timeStamp.slice(0, 4)); | ||
| // console.log(pastYear); | ||
| const agoTime = currentYear - pastYear; |
| import "@testing-library/jest-dom/extend-expect"; | ||
| import ChatLog from "./ChatLog"; | ||
| import { render, screen } from "@testing-library/react"; | ||
| import React from 'react'; |
There was a problem hiding this comment.
Good catch on changing the single quotes! ESLinters are really finicky about style rules!
| ChatEntry.propTypes = { | ||
| //Fill with correct proptypes | ||
| id: PropTypes.number.isRequired, | ||
| sender: PropTypes.string.isRequired, | ||
| body: PropTypes.string.isRequired, | ||
| timeStamp: PropTypes.string.isRequired, | ||
| liked: PropTypes.bool, | ||
| heartToggling: PropTypes.func.isRequired, | ||
| }; |
| const handleHeartClick = () => { | ||
| const messageUpdated = { | ||
| id: props.id, | ||
| sender: props.sender, | ||
| body: props.body, | ||
| timeStamp: props.timeStamp, | ||
| liked: !props.liked, | ||
| }; | ||
| props.heartToggling(messageUpdated); | ||
| }; | ||
|
|
||
| const button = props.liked ? ( | ||
| <button onClick={handleHeartClick} className="like"> | ||
| ❤️ | ||
| </button> | ||
| ) : ( | ||
| <button onClick={handleHeartClick} className="like"> | ||
| 🤍 | ||
| </button> | ||
| ); |
There was a problem hiding this comment.
Great work constructing the event handler and using conditional rendering to change the heart icon!
2 participants
No description provided.