Happy Thoughts Project #96
Conversation
- changed input field into textarea - styled textarea
- re-aranged components
There was a problem hiding this comment.
Good job on creating this happy thoughts app Gitte! Looks really good and I like that you added the little animation when you submit a happy thought 🥰
You have a clean App.jsx which is good practice 👍 Also nice to see that you abstracted the fetches like we did in class. Remember that one of the benefits with async/await is that we can wrap it in a try/catch, would love to see that next time!
Some notes about clean code:
- No need for a lot of empty lines - remove! One empty line at the end of each file is convention, but not in the beginning or middle of a file
- Please set your VSC to make 2 spaces for one tab (indentation). When the indentation is more than that it becomes so much harder too read
And some more kudos:
- Really nice with the character counter
- Good structure and nice to see that you're breaking your project up into components like this ⭐
- timeDifference function! 💪
Keep up the good work Gitte!
There was a problem hiding this comment.
Well done with this project, Gitte! I learned so much from reading your code – thank you for that! I’ll definitely be using some of the smart design choices you made, like separating the API functions and hooks into their own components. How genius! This approach really makes the app scalable and easy to maintain.
I'm also really impressed that you tackled all the stretch goals! It was fun to see how they could be solved, like the cute animation on 'Submit' and the character counter with its warning.
Seeing how you used PropTypes has inspired me to try them out too. What a great way to validate data, keep the code clean, and avoid bugs!
I'm glad I picked your code to review!
src/App.jsx
Outdated
There was a problem hiding this comment.
Nice that you kept the App.jsx so clean!
src/components/HappyThoughts.jsx
Outdated
| } | ||
| } | ||
|
|
||
| // this function handles the likes of the thought by its ID. It calls the function likeThought, and if successful, updates the local state with the new number of hearts by mapping over the previous thoughts |
There was a problem hiding this comment.
I really appreciate the sections with comments! They make it much easier to understand the purpose of each part. Great job on keeping the code so readable!
|
|
||
| Time.propTypes = { | ||
| createdAt: PropTypes.string.isRequired, | ||
| } |
There was a problem hiding this comment.
Good job with adding the extra empty line in each section
src/components/form/Animation.jsx
Outdated
| @@ -0,0 +1,20 @@ | |||
|
|
|||
| import PropTypes from "prop-types" | |||
There was a problem hiding this comment.
Really cool that you're using PropTypes! A solid approach for controlling and validating when the animation should show. Great choice!
| ) | ||
| } | ||
|
|
||
| LikeButton.propTypes = { |
There was a problem hiding this comment.
Nice that you're using PropTypes to validate the data, it really helps keeping the code reliable.
| CharacterCounter.propTypes = { | ||
| currentLength: PropTypes.number.isRequired, | ||
| maxChars: PropTypes.number.isRequired, | ||
| } |
There was a problem hiding this comment.
I really liked this counter and it worked like a charm too! It gives the app even more of an old-school vibe, which I love. The isOverLimit logic is clear and easy to follow. Great job!
| export const likeThought = async (thoughtId) => { | ||
| const response = await fetch(`${BASE_URL}/${thoughtId}/like`, { method: "POST" }) | ||
| if (!response.ok) throw new Error("Failed to like thought") | ||
| } |
There was a problem hiding this comment.
Smart to make the API functions standalone! That makes it easier to reuse them across other components since you don't have to duplicate the code.
| }, []) | ||
|
|
||
| return { thoughts, setThoughts, loading, getThoughts } | ||
| } |
There was a problem hiding this comment.
Great choice to put the hooks in their own component. Really smart design!
Netlify link
https://post-happy-thoughts.netlify.app/