Project happy thoughts #449
Conversation
There was a problem hiding this comment.
Well done!! Your project is so pretty and I loove the colours! One tiny improvement would be to split the logic for fetching and submitting thoughts into their own functions outside of the App component. That would make the code more modular and easier to test.
The App component can then call these functions as needed. The(very nice) loading spinner can be placed in its own componen as well, which can be reused throughout the application!
But that is just a preference! Be proud you have done a great job, again!! 🤩☀️
code/src/App.js
Outdated
| const fetchThoughts = () => { | ||
| setLoading(true) | ||
| fetch('https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts') | ||
| .then((response) => response.json()) | ||
| .then((data) => setThoughtsList(data)) | ||
| .catch((error) => console.log(error)) | ||
| .finally(() => { setLoading(false) }) | ||
| } |
There was a problem hiding this comment.
To keep the App component cleaner (not really necessary I think in this size of projects but a good practise for the future when we work in bigger projects) this could've been places in one of your components. Since this is fetching the thoughts from the API it would be neat to place it in your ListThoughts.js maybe!
| useEffect(() => { | ||
| fetchThoughts() | ||
| }, []) | ||
|
|
There was a problem hiding this comment.
This hook is to call the fetchThoughts function when the component is mounted so this should/could/would also be moved if so we were to change the structure for a "cleaner" App.js
| const handleFormSubmit = (event) => { | ||
| event.preventDefault() | ||
| setLoading(true) | ||
|
|
There was a problem hiding this comment.
Since the "handleFormSubmit" handles the submission of a new thought it could be moved into your component "submitThoughts.js" instead if we want to continue on "cleaning" the app.js a bit.
| return ( | ||
| <section className="listSection"> | ||
| {thoughtsList.map((thought) => { | ||
| return ( | ||
| <div className="listBox"> | ||
| <p className="thought" key={thought._id}>{thought.message}</p> | ||
| <div className="list"> | ||
| <button | ||
| className={thought.hearts === 0 ? 'heartBtn' : 'likedBtn'} | ||
| type="submit" | ||
| onClick={() => handleLikeChange(thought._id)}> | ||
| 💛 | ||
| </button> | ||
| <p>x {thought.hearts}</p> | ||
| <div> | ||
| <p className="time">{getTimeAgo(thought.createdAt)}</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| })} | ||
| </section> |
There was a problem hiding this comment.
Very nice and tidy indentation, pretty code!
| if (textLength < 5) { | ||
| setErrorAlert('Your message needs to be at least 5 characters long. 😊') | ||
| } else if (textLength > 140) { | ||
| setErrorAlert('Whoa Nelly! Save the essay for your portfolio. 😄') |
There was a problem hiding this comment.
I wish I tried writing a message that was to long, fuunny! 😂
| .errorAlert { | ||
| font-size: 12px; | ||
| margin-bottom: 10px; |
There was a problem hiding this comment.
Oh so the alert pops up in the thoughstlist instead of beeing an actual alert! Is that on purpose?
code/src/index.css
Outdated
| .thought { | ||
| margin-left: 10px; | ||
| font-family: 'Courier New', Courier, monospace; | ||
| font-weight: 500; | ||
| } |
There was a problem hiding this comment.
How and where in you code are you making the text of this card to not overflow if it where an textsnippet that was to long? In the inspect there is a "overflow-wrap: anywhere;" but i cannot find it and how you did it. Is it magic? Curios to know!
No description provided.