Happy Thoughts #434
Open
Happy Thoughts #434
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…changed some places where things are mounted
|
|
||
| ## The problem | ||
|
|
||
| Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? | ||
| I began by using the Example Project to help me understand how to write the code, which components I would need, and how to fetch and post the thoughts using the APIs. I also thought about which useState hooks I would need and which useEffect hook I would need to use. My first task was to fetch the recent thoughts, then create a thought using a POST request. After that I worked on the Heart (like) button. There were a lot of different elements to this week’s task and I needed help with some challenges I faced. I am pleased I managed to add a stretch goal in the end and if I had more time I would add another stretch goal, such as work on getting an error message back from the API if the message is empty, too long or too short. |
There was a problem hiding this comment.
Structured way to go about it! Always easier to divide the project in smaller bits to check off ✅
| } | ||
|
|
||
| useEffect(() => { | ||
| fetchThoughts(); |
There was a problem hiding this comment.
Is there any specific reason why you did a separate function instead of putting the fetch request directly in useEffect?
| <Hearts | ||
| thought={thought} | ||
| fetchThoughts={fetchThoughts} /> | ||
| <p className="timeStamp date">{formatDistance(new Date(thought.createdAt), Date.now(), { addSuffix: true })}</p> |
There was a problem hiding this comment.
Nice way of displaying the date!
code/src/components/Hearts.js
Outdated
Comment on lines
4
to
28
| export const Hearts = ({ thought, fetchThoughts }) => { | ||
| const onHeartCountIncreaseButtonClick = () => { | ||
| const options = { | ||
| method: 'POST' | ||
| } | ||
| console.log('options', options) | ||
|
|
||
| fetch(`https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts/${thought._id}/like`, options) | ||
| .then((res) => res.json()) | ||
| .then((data) => console.log(data)) | ||
| .catch((error) => console.log(error)) | ||
| .finally(() => fetchThoughts()) | ||
| console.log('heart count increase') | ||
| } | ||
|
|
||
| return ( | ||
| // eslint-disable-next-line react/jsx-no-comment-textnodes | ||
| <div> | ||
| <div className="heartsSection"> | ||
| <button className="heartButton" onClick={onHeartCountIncreaseButtonClick} type="button">❤️</button> | ||
| <p className="heartCount">x <span className="heartCountNumber">{thought.hearts}</span></p> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } |
Comment on lines
+12
to
+17
| <div className="characterCount">{eachThought.length < 5 || eachThought.length > 140 ? ( | ||
| <p className="redText">{eachThought.length}/140</p> | ||
| ) : ( | ||
| <p className="normalText">{eachThought.length}/140</p> | ||
| )} | ||
| </div> |
There was a problem hiding this comment.
Nice with the change depending on the characters, another way of getting the className to change with less code could be:
<p className={eachThought.length < 5 || eachThought.length > 140 ? 'redText' : 'normalText'}>{eachThought.length} / 140</p>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.