Week 7 - Happy Thought - Mai #82
Conversation
There was a problem hiding this comment.
Hi Mai! Great job this week, especially after being sick for several days ⭐️
I found your code clean and easy to follow. I like that you have split up the app in a lot of components, makes it even easier to understand which part is responsible for what.
I would just review the responsiveness, since right now it looks very stretched on desktop viewport 🖥
| const incrementLikedPostsCount = () => { | ||
| setLikedPostsCount((prevCount) => { | ||
| const newCount = prevCount + 1; | ||
| localStorage.setItem("likedPostsCount", newCount.toString()); |
There was a problem hiding this comment.
Nice and clean App.jsx! I liked that you used localStorage to store number of likes!
|
|
||
| let wordCountMessage; | ||
| if (remainingLength >= 0) { | ||
| wordCountMessage = `You have typed ${typedLength} letters, you still can type ${remainingLength} letters.`; |
There was a problem hiding this comment.
I like this friendly way of helping the user to keep track of the character count, not just 0/140
src/components/ThoughtForm.jsx
Outdated
| const handleSubmit = (event) => { | ||
| event.preventDefault(); | ||
|
|
||
| if (message.length === 0) { | ||
| setError("Message cannot be empty."); | ||
| return; | ||
| } | ||
| if (message.length < minLength) { | ||
| setError(`Message must be at least ${minLength} characters long.`); | ||
| return; | ||
| } | ||
| if (message.length > maxLength) { | ||
| setError(`Message must be no more than ${maxLength} characters.`); | ||
| return; | ||
| } | ||
|
|
There was a problem hiding this comment.
Good way of handling different scenarios!
There was a problem hiding this comment.
Great Job Mai!
loving to see the topLevel app.jsx comp logic and api calls that are then passed down through props! Great approach as far as implementing the requirements of the project. I will leave you 1 piece of feedback which is related to your function called fetchThoughts on your app.jsx file on line 21. The function structure is great with 1 extra layer that you can add that will enhance it's power. Which is using the async/await syntax. This way you effectively run this call which is calling an 'outsde' resource .
const fetchThoughts = async () => { await fetch("https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts") .then((response) => response.json()) .then((data) => setThoughts(data)) .catch((error) => console.error(error)); };
.
This way slight change brings a lot of power.
Great job!
Netlify link
https://project-happy-thoughts-maikanetaka.netlify.app/