react chatlog proj #106
react chatlog proj #106
Conversation
There was a problem hiding this comment.
Hi Sujin, good work on utilizing props and passing them between components. You have a few failed tests which primarily had to do with some of the creative deviations you made for this project. The one important item you're missing is counting the total likes!
Let's meet in a 1:1 to go over this part?
Grade: 🌕
| --Implement a `ChatLog` component and | ||
| --update the `App` component to display an entire chat log. | ||
| --`ChatLog` should display a sequence of individual `ChatEntry` components. |
There was a problem hiding this comment.
Did you mean to make this change? In industry, you'll be submitting PR's with code you'd like your entire team to have. Is this change necessary? If not, we can be warier on what file changes we git add. So instead of using, git add . to add all files we changed locally, we can specify which file we want to add to our commit via git add nameOfFile.js
| @@ -5,6 +5,7 @@ | |||
| In this wave we will update the components to manage a **like** feature. | |||
|
|
|||
| - Add behavior to heart button in `ChatEntry` so that when it is clicked it toggles from an empty heart (🤍) to a filled heart (❤️) and from a filled heart (❤️) to an empty heart (🤍). | |||
|
|
|||
There was a problem hiding this comment.
This change was not necessary either. The previous comment also applies here.
| const [messageData, setMessageData] = useState(chatMessages) | ||
|
|
||
| const updateMessageData = (updatedMessage) => { | ||
| const messages = messageData.map((message) => { | ||
| if (message.id === updatedMessage.id) { | ||
| return updatedMessage; | ||
| } else { | ||
| return message; | ||
| } | ||
| }); | ||
|
|
||
| setMessageData(messages) | ||
| } |
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/
| // console.log({ | ||
| // id, | ||
| // sender, | ||
| // body, | ||
| // timeStamp, | ||
| // liked, | ||
| // onUpdate | ||
| // }) | ||
| // const firstMessage = props.messages[0] |
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.
| <section>{messageComponents}</section> | ||
| ); | ||
| }; | ||
|
|
There was a problem hiding this comment.
Don't forget to add PropTypes to help validate our props and avoid future errors.
ChatLog.propTypes = {
messages: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.number.isRequired,
sender: PropTypes.string.isRequired,
body: PropTypes.string.isRequired,
timeStamp: PropTypes.string.isRequired,
liked: PropTypes.bool,
})
),
onUpdateMessage: PropTypes.func.isRequired,
};|
|
||
|
|
| // const button = document.getElementById('button'); | ||
|
|
||
| // if (!props.liked === true){ | ||
| // button.textContent = '🌻' | ||
| // } else { | ||
| // button.textContent = '🤍' | ||
| // } | ||
|
|
||
| // const emojiChange = () => { | ||
| // if (!props.liked === true){ | ||
| // button.textContent = '🌻' | ||
| // } else { | ||
| // button.textContent = '🤍' | ||
| // } | ||
| // } | ||
|
|
||
| } | ||
|
|
||
| // not right | ||
| // const button = document.getElementById('button'); | ||
| // this is not right..... | ||
| // const emojiChange = props.liked ? button.textContent = '🌻' : button.textContent = '🤍'; | ||
| // experimenting | ||
| // const emojiChange = props.liked ? 'green' : 'red'; |
There was a problem hiding this comment.
Let's make sure we remove commented out code that we don't want our teammates to pull.
| const messageComponents = messages.map((message,index) => { | ||
| return( | ||
| <div key={message.id}> | ||
| <ChatEntry | ||
| id={message.id} | ||
| sender={message.sender} | ||
| body={message.body} | ||
| timeStamp={message.timeStamp} | ||
| liked={message.liked} | ||
| onUpdate={onUpdateMessage} | ||
| ></ChatEntry> | ||
| </div> | ||
| ) | ||
| }); |
There was a problem hiding this comment.
Good work creating multiple sibling components!!
| if (liked === true){ | ||
| icon = '🌻' | ||
| } else { | ||
| icon = '🤍' | ||
| } |
There was a problem hiding this comment.
One of the tests fail because it's expecting a different icon however I don't mind this creative deviance :)
No description provided.