[xing] project happy thoughts #89
Conversation
There was a problem hiding this comment.
Your code is structured well and follows React best practices by using hooks for state management and side effects. You’ve included some really nice error handling which improves the user experience as well. A next step to improve on the structure would be to break it down even further, e.g. breaking out the fetches to its own api.js file or similar.
It’s good practice to always leave one empty line at the end of each JS or JSX file (but only one - so remove all the extra empty lines in your Header component).
A tip:
When working with textareas, you might want to style it so it’s not possible for the user to resize it and cause the styling to look buggy.
All in all, your app works well and I think you should be proud over what you’ve accomplished. Keep up the good work!
There was a problem hiding this comment.
Great work overall! I really like how you turned the concept into code. It's structured in a way that's easy to follow, and you've used meaningful names that support this.
I also appreciate your error handling and the use of try/await to wrap the async functions.
I noticed in your CSS that you've styled different containers and elements, such as the "thoughts container," "like container," buttons, etc. For larger projects, it might be helpful not only to define these parts in your CSS but also to break down your components in JSX into more reusable pieces.
Well done—keep up the great work!
| const [thought, setThought] = useState(""); | ||
| const [error, setError] = useState(""); | ||
|
|
||
| const disableSubmit = thought.length < 5 || 140 - thought.length < 5; |
There was a problem hiding this comment.
I think "disableSubmit" is a nice solution to make sure that users have to write at least 5 characters and not more than 140.
| } catch (error) { | ||
| console.log("Error is ", error); | ||
| setError("An error occurred while submitting the thought!"); | ||
|
|
There was a problem hiding this comment.
Great, that you wrapped the async await function in a try/catch
Netlify link
https://xingshappythoughts.netlify.app