Katarina's Happy Thoughts #87
Conversation
| return ( | ||
| <div> | ||
| <Header /> | ||
| <ThoughtsForm /> | ||
| <ThoughtsList /> | ||
| </div> | ||
| ) |
| } | ||
|
|
||
| .submit-button:hover { | ||
| transform: scale(1.02); |
| } | ||
|
|
||
| .thought { | ||
| min-width: 600px; |
There was a problem hiding this comment.
Should this be max-width, to make sure the content doesn't spill out of the wrapper?
| } | ||
|
|
||
| .thought { | ||
| min-width: 700px; |
| headers: { "Content-Type": "application/json" }, | ||
| body: JSON.stringify({ message: newThought }), | ||
| }) | ||
|
|
There was a problem hiding this comment.
Maybe there could be a way of adding the new new post into the list showing right away, instead of the user having to update the site to see the post?
Something like this:
const json = await response.json()
setThoughts((previousThoughts) => [json, ...previousThoughts])
| return ( | ||
| <div className="new-thought-wrapper"> | ||
| <h2>What's making you happy right now?</h2> | ||
| {error && <p style={{ color: "red" }}>{error}</p>} |
| rows="5" | ||
| cols="30" | ||
| minLength={5} | ||
| maxLength={140} |
There was a problem hiding this comment.
Good way to ensure that the user is not exceeding the limit!
| } | ||
| if (like.includes(thoughtId)) { | ||
|
|
||
| setLike(like.filter((id) => id !== thoughtId)) |
There was a problem hiding this comment.
Is there an easier way of handling the color change?
| ❤️ | ||
| </button> | ||
| <p className="like-number">x {thought.hearts}</p> | ||
| <div className="time">{formatDistance(new Date(thought.createdAt), Date.now(), { addSuffix: true, })}</div> |
| .submit-button { | ||
| background-color: #ffadad; | ||
| padding: 10px; | ||
| border-radius: 20px; | ||
| width: 50%; | ||
| min-width: 220px; | ||
| border: 1px solid transparent; | ||
| font-weight: bold; | ||
| cursor: pointer; | ||
| transform: 0.5s; | ||
| } | ||
|
|
||
| .submit-button:hover { | ||
| transform: scale(1.02); | ||
| } |
There was a problem hiding this comment.
Hi Katarina, one step away from passing this project! When posting a message, you want the post to be immediately listed without refreshing the page. You could, on the post method, call your fetchData() function, you could pass it as a prop to your ThoughtsForm component, and then move thefetchData()inside the parent component, in your case App.jsx file where you're using your components. Hope this makes sense, take a look at a very similar example shown during class here to understand the flow 👍
Netlify link
https://katarina-happy-thoughts.netlify.app/