-
Notifications
You must be signed in to change notification settings - Fork 145
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Happy Thoughts App - Jenny A #103
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good job with your happy thoughts app Jenny, and kudos for following the design so closely 💃
import './index.css'; | ||
import { ListThoughts } from "./components/ListThoughts"; | ||
import { SubmitThought } from './components/SubmitThought'; | ||
import { useState, useEffect } from 'react'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Imports are usually grouped in this order:
// React and core libraries
// Third-party libraries
// Custom hooks and utilities
// Components
// Assets (icons, images, and styles)
useEffect(() => { | ||
fetch('https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts') | ||
.then((res) => res.json()) | ||
.then((json) => { | ||
setThoughts(json); | ||
}); | ||
}, []); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Some error handling would be nice 👀
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
⭐
|
||
export const LikeButton = ({ thoughtId, initialHearts }) => { | ||
// State to track if like action is in progress | ||
const [isLiking, setIsLiking] = useState(false); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What's the purpose of this? 👀
.then(newThought => { | ||
// Check if the API returned an error | ||
if (newThought.error) { | ||
setError(newThought.error); | ||
return; | ||
} | ||
setMessage(''); // Clears the input | ||
onSubmit(newThought); // Updates the list | ||
}) | ||
.catch(() => { | ||
setError('Something went wrong. Please try again.'); | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice error handling ⭐
return ( | ||
<form onSubmit={handleSubmit} className="submit-form"> | ||
<h2>What's making you happy right now?</h2> | ||
<textarea |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Don't forget labels! And be mindful when working with textareas, it's good to remove the resize option so that the user don't break the styling
https://happythoughtsapp-byjenny.netlify.app/