W7-project-happy-thoughts-vite-Yia #64
Conversation
There was a problem hiding this comment.
Great job Yia!
Your Happy Thoughts project looks like the given styling and also is responsive on different devices.
I realized that when I posted a thought, it doesn't automatically show up. After I refreshed the page, my message was there.
Try to write your README.md so we can see where you had some troubles. Also, try another approach with responsiveness and start with the mobile version first. Maybe you can tell a difference.
Overall, I like what you did and you can be proud of your project ❤️
| @@ -10,6 +10,7 @@ | |||
| "preview": "vite preview" | |||
| }, | |||
| "dependencies": { | |||
| "moment": "^2.30.1", | |||
| const handleChange = (event) => { | ||
| setMessage(event.target.value); | ||
| setError(""); |
There was a problem hiding this comment.
clever, you thought of the error message when sending an empty message.
| border: 1px solid rgb(105, 105, 105); | ||
| box-shadow: 8px 8px 0 0 rgba(0, 0, 0, 1); | ||
| padding: 20px; | ||
| overflow-wrap: break-word; |
There was a problem hiding this comment.
good! you also figured it out after someone wrote a long "word" as a thought 😄
| } | ||
| } | ||
|
|
||
| /* Mobile version */ |
There was a problem hiding this comment.
have you tried to do mobile first and then go for the bigger screens?
| import { useState } from "react"; | ||
| import "./CreateThought.css"; | ||
|
|
||
| const APIURL = "https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts"; |
There was a problem hiding this comment.
you already defined the APIURL in the ThoughtFeed.jsx. You could have passed the APIURL to this component.
|
|
||
| const handleLike = async (thoughtId) => { | ||
| try { | ||
| const response = await fetch(`${APIURL}/${thoughtId}/like`, { |
There was a problem hiding this comment.
interesting way to change the APIURL to the "liked" version. Cool to see a different approach.
There was a problem hiding this comment.
Hey Yia! great project 💪💪
Loved the folder structur, all requiirements have been met and it seems that you are even workig with moment.js which to put simply, I can see that you'r learnning curve is exponential and you are digging the framework. Now, I'll give you the passing grade here Yia but let's make a deal! .
Some knowledge for some commitment!
Basically, everytiime you post a new thought on your app, you have t manually refresh the browser which cool but who has time for that right? Ennter the useEffect to the rescue.
TO solve thiis, we can sue the dependency array in your ThoughtFeed.jsx file specifically on line 13.
Change it form this:
useEffect(() => {
fetchData();
}, []);
to this
useEffect(() => {
fetchData();
}, [recentThoughts]);
This will cover the use-case of the hard refresh and you will take ful advantage of the useEffect hook!
So, do we have a deal ?
Keep up the great work Yiia! hope that you are enjoying the react framework
Netlify link
https://yia-happy-thought.netlify.app/
Collaborators
solo