Conversation
| import { DateTime } from 'luxon'; | ||
|
|
||
| const ChatEntry = () => { | ||
| const ChatEntry = ({id,sender,body,timeStamp,onLikes, liked}) => { |
There was a problem hiding this comment.
👀 Nitpick: the spacing is inconsistent here because you're missing whitespaces in several places.
| const ChatEntry = ({id,sender,body,timeStamp,onLikes, liked}) => { | |
| const ChatEntry = ({ id, sender, body, timeStamp, onLikes, liked }) => { |
| <button className="like">🤍</button> | ||
| </section> | ||
| </replace-with-relevant-semantic-element> | ||
| <section className="chat-entry local"> |
There was a problem hiding this comment.
It was an optional enhancement, but how could you determine if a chat was from a 'local' sender vs a 'remote' sender so that the chat bubbles would have different styles applied to it?
If you have time to re-visit this project for React.js review, it would be good practice to try applying local vs. remote classes to the components so they render differently depending on who sent the message.
| <h2 className="entry-name">{sender}</h2> | ||
| <div className="entry-bubble"> | ||
| <p className="entry-body">{body}</p> | ||
| <p className="entry-time"><TimeStamp time={timeStamp}/></p> |
There was a problem hiding this comment.
Nice work using the provided TimeStamp component 👍
| import PropTypes from 'prop-types'; | ||
|
|
||
| const ChatLog =({entries, onLikeEntry }) => { | ||
| const ChatEntryLogs = entries.map(entry=> { |
There was a problem hiding this comment.
ChatEntryLogs isn't a component but a variable, so we can use standard camelCase to name it to avoid any confusion.
| const ChatEntryLogs = entries.map(entry=> { | |
| const chatEntryLogs = entries.map(entry=> { |
| timeStamp={entry.timeStamp} | ||
| liked={entry.liked} | ||
| onLikes={onLikeEntry} | ||
|
|
There was a problem hiding this comment.
Nitpick: Remove unnecessary blank line
| const handleLikes = id => { | ||
| setMessages(prevMessages=>{ | ||
| return prevMessages.map(entry => { | ||
| if(entry.id === id){ |
There was a problem hiding this comment.
You'll want to fix up code style issues while you're writing code and use a linter to check for style issues before submitting code for review.
| if(entry.id === id){ | |
| if (entry.id === id) { |
| return ( | ||
| <div id="App"> | ||
| <header> | ||
| <h1>Chat between Vladimir and Estragon</h1> |
There was a problem hiding this comment.
Can you think of a way to dynamically get the senders' names without hardcoding "Vladimir" and "Estragon" here?
| <div id="App"> | ||
| <header> | ||
| <h1>Chat between Vladimir and Estragon</h1> | ||
| <h2>{`${totalLikes} ❤️s`}</h2> |
There was a problem hiding this comment.
You can directly invoke countTotalLikes here instead of creating a variable first since the logic is straight forward and doesn't compromise the readability.
| <h2>{`${totalLikes} ❤️s`}</h2> | |
| <h2>{`${countTotalLikes(messages)} ❤️s`}</h2> |
| import ChatEntry from './ChatEntry'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| const ChatLog =({entries, onLikeEntry }) => { |
There was a problem hiding this comment.
👀 Nitpick: issue with whitespacing
| const ChatLog =({entries, onLikeEntry }) => { | |
| const ChatLog = ({ entries, onLikeEntry }) => { |
| }; | ||
|
|
||
| function App() { | ||
| const[messages, setMessages] = useState(messagesData); |
There was a problem hiding this comment.
| const[messages, setMessages] = useState(messagesData); | |
| const [messages, setMessages] = useState(messagesData); |
2 participants
No description provided.