C22 Phoenix - Liubov D. #22
Conversation
Implemented wave-01
Implemented wave-02
Implemented local-remote
Changed is required
| id: PropTypes.number.isRequired, | ||
| sender: PropTypes.string.isRequired, | ||
| body: PropTypes.string.isRequired, | ||
| timeStamp: PropTypes.string.isRequired, | ||
| liked: PropTypes.bool.isRequired, | ||
| onToggleLiked: PropTypes.func |
There was a problem hiding this comment.
👍 The id, sender, body, timeStamp, and liked props are always passed (they're defined explicitly in the data and also provided in the test) so we can (and should) mark them isRequired, as you did.
The remaining props were up to you, and the tests don't know about them. As a result, using isRequired causes a warning when running any tests that only pass the known props.
To properly mark any other props isRequired, we would also need to update the tests to include at least dummy values (such as an empty callback () => {} for the like handler) to make the proptype checking happy.
Alternatively, for any props that we leave not required, we should also have logic in our component to not try to use the value if it's undefined.
| <p className="entry-time">Replace with TimeStamp component</p> | ||
| <button className="like">🤍</button> | ||
| <p>{props.body}</p> | ||
| <p className="entry-time"><TimeStamp time={props.timeStamp}></TimeStamp></p> |
There was a problem hiding this comment.
Nice use of the supplied TimeStamp. All we need to do is pass in the timeStamp string from the message data and it takes care of the rest. All we had to do was confirm the name and type of the prop it was expecting (which we could do through its PropTypes) and we're all set!
Note that the TimeStamp component doesn't receive children components (it resembles "void" HTML tags such as input or img rather than tags like p or a that can have children). For such components, prefer to write them using "self-closing" style (note the /> to complete the tag rather than a regular >).
<TimeStamp time={props.timeStamp} />| key={chatEntry.id} | ||
| id={chatEntry.id} |
There was a problem hiding this comment.
👍 The key attribute is important for React to be able to detect certain kinds of data changes in an efficient manner. We're also using the id for our own id prop, so it might feel redundant to pass both, but one is for our logic and one is for React internals (we can't safely access the key value in any meaningful way).
| import PropTypes from 'prop-types'; | ||
|
|
||
| const ChatLog = (props) => { | ||
| const chatEntryComponents = props.entries.map(chatEntry => { |
There was a problem hiding this comment.
Nice use of map to convert from the message data into ChatEntry components. We can perform this mapping storing the result into a variable we use in the JSX result as you did here (components are functions, so we can run JS code as usual before we reach the return, and even sometimes have multiple return statements with different JSX), we could make a helper function that we call as part of the return, or this expression itself could be part of the return JSX, which I often like since it helps me see the overall structure of the component, though can make debugging a little more tricky. But any of those approaches will work fine.
| @@ -1,14 +1,42 @@ | |||
| import './App.css'; | |||
| import ChatLog from './components/ChatLog'; | |||
| import chatLogDataFromFile from '../src/data/messages.json'; | |||
There was a problem hiding this comment.
This file is alreasy in src, so we don't need to move up a folder and come back down again
import chatLogDataFromFile from './data/messages.json';| import { useState } from 'react'; | ||
|
|
||
| const ChatEntry = (props) => { | ||
| const [isLiked, setIsLiked] = useState(props.liked); |
There was a problem hiding this comment.
👀 We don't need (and shouldn't make) an additional piece of state to copy the liked prop. The liked value will already be managed and passed down by the App. It may look like this would update the local state when this happens, but that's not the case. The value passed to useState is used only on the first render, so to keep this local state in sync with the global state, the ChatEntry has to duplicate the logic that also exists in App. This local state violates the idea of lifting state up.
| const [isLiked, setIsLiked] = useState(props.liked); | ||
|
|
||
| const likeButtonClicked = () => { | ||
| setIsLiked(!props.liked); |
There was a problem hiding this comment.
👀 This logic is only required because of the local state used for the liked value. This duplicates logic also found in App and requires this presentation component to have extra information about how to manage the data for the chat. We should remove the additional state, and then we wouldn't need this logic.
|
|
||
| const likeButtonClicked = () => { | ||
| setIsLiked(!props.liked); | ||
| props.onToggleLiked(props.id); |
There was a problem hiding this comment.
👍 Passing the id of this message lets the logic defined up in the App find the message to update in its data.
| <button className="like">🤍</button> | ||
| <p>{props.body}</p> | ||
| <p className="entry-time"><TimeStamp time={props.timeStamp}></TimeStamp></p> | ||
| <button className="like" onClick={likeButtonClicked}>{isLiked ? '❤️' : '🤍'}</button> |
There was a problem hiding this comment.
👀 We can figure out which emoji to use for the liked status based on the liked data for this message. Rather than tracking a local piece of state, we can and should use the prop value here directly. This would let us remove the local state.
<button className="like" onClick={likeButtonClicked}>{props.liked ? '❤️' : '🤍'}</button>There was a problem hiding this comment.
👍 We need a wrapper of some kind rather than calling the received callback through props, since our callback function is expecting a message id as its parameter. If we tried to use it directly as the click event handler, React would end up passing it a clink event, since any function registered as an event handler will always be given the event detail information as its argument.
| return ( | ||
| <div className="chat-entry local"> | ||
| <h2 className="entry-name">Replace with name of sender</h2> | ||
| <div className={props.sender == 'Vladimir' ? 'chat-entry local' : 'chat-entry remote'} id={props.id}> |
There was a problem hiding this comment.
Nice logic to decide whether to treat a message as local or remote. How could we generalize this so that it didn't need to look explicitly for Vladimir? This project only passes in a single conversation, but ideally, our components should work in other situations.
In the general case, does the ChatEntry itself have enough information as it is to "know" which messages are local and which are remote?
No description provided.