-
Notifications
You must be signed in to change notification settings - Fork 141
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
Sofies Happy Thought project #80
Conversation
…nd what it did differently
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.
Hej Sofie! Your code demonstrates a good grasp of React fundamentals, including component creation, state management, effect hooks, and interacting with an API!
Great job!! 🌟
import { GetThoughts } from './Thoughts' | ||
|
||
export const LikeThoughts = ({ index }) => { | ||
const [likes, setLikes] = useState(index.hearts) |
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.
I think your tab indentation setting in VS code is now four-space. Think better to change two-space instead to align the standard to avoid unnecessary changes when you work with someone :)
src/components/Thoughts.jsx
Outdated
//filtrera ut det som ska visas | ||
return ( | ||
<> | ||
{thoughts.map((index) => ( |
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 map function!
import './Thoughts.css' | ||
import { GetThoughts } from './Thoughts' | ||
|
||
export const LikeThoughts = ({ index }) => { |
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.
Maybe this prop passed to LikeThoughts is named index is a bit misleading. Consider others, like "thought" might be better I think.
export const LikeThoughts = ({ index }) => { | ||
const [likes, setLikes] = useState(index.hearts) | ||
|
||
const handleLike = (index) => { |
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.
Similarly, the parameter for handleLike is named index, which could be renamed to reflect that it's a thought object :)
@@ -0,0 +1,49 @@ | |||
import { useEffect, useState } 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.
Imported useEffect but seems like it's not used in the component. so better to remove to keep the code clean :)
src/components/Thoughts.jsx
Outdated
event.preventDefault() | ||
if (newThought.length < 5 || newThought.length > 140) { | ||
setError( | ||
'Please typ something with at least 5 letters and with the most 140 letters' |
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.
Friendly error message showing! :)
<div className="input-wrapper"> | ||
<label>What is making you happy right now?</label> | ||
<form onSubmit={handleSubmit}> | ||
<input |
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.
great job of implementing a controlled input like this!
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.
Hey Sofie,
Although the project meets all the requirements and indeed everything looks great, I just have question to ask you, both GetThoughts
and PostThoughts
are being fetched from 1 file where as you developed it works perfectly but my question is simple, are you doing this for organisation ? .
Nevertheless, the application is perfect!
Keep up the great work!
Netlify link
https://bucolic-beignet-3163b4.netlify.app