Sharks/Bahareh #42
Sharks/Bahareh #42
Conversation
| @@ -1,16 +1,63 @@ | |||
| import React from 'react'; | |||
There was a problem hiding this comment.
Let's do this instead:
| import React from 'react'; | |
| import React, {useState} from 'react'; |
| @@ -1,16 +1,63 @@ | |||
| import React from 'react'; | |||
| import './App.css'; | |||
| import chatMessages from './data/messages.json'; | |||
| import { useState } from 'react'; | |||
There was a problem hiding this comment.
| import { useState } from 'react'; |
| const updateMessageData = (updatedMessage) => { | ||
| const messages = messagesInfo.map((message) => | ||
| message.id === updatedMessage.id ? updatedMessage : message | ||
| ) | ||
|
|
||
| setMessagesInfo(messages); | ||
| }; |
There was a problem hiding this comment.
I might consider refactoring this, so that it doesn't update ALL of the message data, just the liked property
| // const updateMessageData = (updatedMessage) => { | ||
| // const messages = messagesInfo.map((message) => { | ||
| // if (message.id === updatedMessage.id) { | ||
| // return updatedMessage; | ||
| // } else { | ||
| // return message; | ||
| // } | ||
| // }); | ||
|
|
||
| // setMessagesInfo(messages); | ||
|
|
||
|
|
||
|
|
||
| // }; |
There was a problem hiding this comment.
| // const updateMessageData = (updatedMessage) => { | |
| // const messages = messagesInfo.map((message) => { | |
| // if (message.id === updatedMessage.id) { | |
| // return updatedMessage; | |
| // } else { | |
| // return message; | |
| // } | |
| // }); | |
| // setMessagesInfo(messages); | |
| // }; |
|
|
||
|
|
| const onLikeButtonClick = () => { | ||
|
|
||
| const updatedMessage = { ...props, liked: !props.liked } | ||
| props.updateMessageData(updatedMessage); | ||
|
|
||
| }; |
There was a problem hiding this comment.
hmm you are giving this function a lot of editing power when it only needs to update the liked property. Think about giving the function access only to liked.
| <p className="entry-time">Replace with TimeStamp component</p> | ||
| <button className="like">🤍</button> | ||
| <p>{props.body}</p> | ||
| <p className="entry-time">{moment(props.timeStamp).fromNow()}</p> |
There was a problem hiding this comment.
we should be using the TimeStamp component that was given to us, not import a new library moment.
This works! Great job figuring out a way to implement this on your own, though!
| @@ -0,0 +1,40 @@ | |||
| import React from 'react'; | |||
There was a problem hiding this comment.
| import React from 'react'; | |
| import React, {useState} from 'react'; |
| import './ChatEntry.css'; | ||
| import ChatEntry from './ChatEntry'; | ||
| import PropTypes from 'prop-types'; | ||
| import { useState } from 'react'; |
There was a problem hiding this comment.
| import { useState } from 'react'; |
No description provided.