-
Notifications
You must be signed in to change notification settings - Fork 434
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
Nora Terbocs - Happy thoughts #440
base: master
Are you sure you want to change the base?
Changes from all commits
821f879
7cc160f
a3e97a5
95a9cde
52e3225
16d1d32
c4250a3
3dea3b3
4bb1131
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,13 +1,23 @@ | ||
# Happy Thoughts | ||
|
||
Replace this readme with your own information about your project. | ||
|
||
Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. | ||
The project "Happy Thoughts" is about practicing React state skills by fetching and posting data to an API. | ||
|
||
## The problem | ||
|
||
Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? | ||
Basic requirements: | ||
Following the provided design. | ||
Publishing the most recent thoughts at the top and older thoughts at the bottom of the page. | ||
The thoughts show the content of the message and how many likes they've received. | ||
Having a form to post new thoughts. | ||
Implementing the heart button to send likes on a thought. | ||
|
||
Stretch goals: | ||
Show a count below the form input that updates as the user types and shows how many characters are remaining. Make it go red when the user has typed over 140 characters | ||
When POSTing a new thought, if the message was empty, too long, or too short, you get an error message back from the API. | ||
Handling loading states. | ||
Keep count of how many different posts the user have liked. | ||
|
||
|
||
## View it live | ||
|
||
Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. | ||
noras-happy-thoughts-project.netlify.app |
Large diffs are not rendered by default.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,97 @@ | ||
import React from 'react'; | ||
import React, { useState, useEffect } from 'react'; | ||
import Form from 'components/Form.js' | ||
import Thoughts from 'components/Thoughts.js' | ||
import Loading from 'components/Loading.js' | ||
|
||
export const App = () => { | ||
const [newThought, setNewThought] = useState('') | ||
const [loading, setLoading] = useState(true) | ||
const [thoughts, setThoughts] = useState([]) | ||
const [countLikes, setCountLikes] = useState(0) | ||
const [characters, setCharacters] = useState(0) | ||
const [errorMsg, setErrorMsg] = useState(false) | ||
const url = 'https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts' | ||
|
||
const fetchThoughts = () => { | ||
setLoading(true); | ||
fetch(url) | ||
.then((response) => response.json()) | ||
.then((data) => setThoughts(data)) | ||
.catch((error) => console.log(error)) | ||
.finally(() => { setLoading(false) }) | ||
} | ||
useEffect(() => { | ||
fetchThoughts() | ||
}, []) | ||
console.log(errorMsg) | ||
const handleFormSubmit = (event) => { | ||
console.log(newThought) | ||
event.preventDefault() | ||
const options = { | ||
method: 'POST', | ||
headers: { | ||
'Content-Type': 'application/json' | ||
}, | ||
body: JSON.stringify({ | ||
message: newThought | ||
}) | ||
} | ||
if (newThought.length > 4) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It seems like this if condition is not fully functional, because a new thought is still posted if the length = 4. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think that shouldn't be possible because even without adding an if statement the post request blocks it if the text is under 5 characters. The if statement only adds the error msg. |
||
fetch('https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts', options) | ||
.then((response) => response.json()) | ||
.then(() => { fetchThoughts() }) | ||
.catch((error) => console.error(error)) | ||
.finally(() => { | ||
setNewThought('') | ||
}) | ||
setErrorMsg(false); | ||
} else if (newThought.length < 5) { | ||
setErrorMsg(true); | ||
} | ||
|
||
console.log(thoughts) | ||
} | ||
|
||
const handleLike = ( | ||
currentThoughtID, | ||
currentThoughtHearts, | ||
currentThought, | ||
setCurrentThought | ||
) => { | ||
setCurrentThought({ currentThought, hearts: currentThoughtHearts + 1 }); | ||
setCountLikes(countLikes + 1) | ||
const options = { method: 'POST', | ||
headers: { | ||
'Content-Type': 'application/json' | ||
} } | ||
|
||
fetch(`${url}/${currentThoughtID}/like`, options) | ||
.then((response) => response.json()) | ||
.catch((error) => console.error(error)) | ||
.finally(() => { setLoading(false) }) | ||
} | ||
|
||
return ( | ||
<div> | ||
Find me in src/app.js! | ||
<div className="container"> | ||
<Form | ||
newThought={newThought} | ||
setNewThought={setNewThought} | ||
thoughts={thoughts} | ||
setThoughts={setThoughts} | ||
url={url} | ||
handleFormSubmit={handleFormSubmit} | ||
countLikes={countLikes} | ||
characters={characters} | ||
setCharacters={setCharacters} | ||
errorMsg={errorMsg} /> | ||
{loading && (<Loading />)} | ||
{!loading && ( | ||
<Thoughts | ||
thoughts={thoughts} | ||
handleLike={handleLike} | ||
url={url} /> | ||
)} | ||
</div> | ||
|
||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import React from 'react'; | ||
|
||
const Form = ({ newThought, setNewThought, handleFormSubmit, countLikes, errorMsg }) => { | ||
return ( | ||
<form className="form-section" onSubmit={handleFormSubmit}> | ||
<h1 className="form-question">What's making you happy right now?</h1> | ||
<textarea rows="5" type="text" value={newThought} minLength={5} maxLength={140} onChange={(e) => setNewThought(e.target.value)} /> | ||
<div className="textarea-footer"> | ||
{errorMsg && <p className="error-msg">Your message has to be between 5 and 140 characters!</p>} | ||
<p className="character-counter">{newThought.length}/140</p> | ||
</div> | ||
<div className="form-counter"> | ||
<p className="total-likes">🤍 {countLikes}</p> | ||
</div> | ||
<button className="form-btn" type="submit">❤️ Send happy thoughts! ❤️</button> | ||
|
||
</form> | ||
) | ||
} | ||
|
||
export default Form; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
/* eslint-disable no-underscore-dangle */ | ||
|
||
import React from 'react'; | ||
|
||
const LikeBtn = ({ | ||
currentThought, | ||
handleLike, setCurrentThought | ||
}) => { | ||
return ( | ||
<div className="likes-container"> | ||
<button | ||
key={currentThought._id} | ||
className={`likes-btn ${currentThought.hearts > 0 | ||
? 'more-likes' : ''}`} | ||
type="button" | ||
onClick={() => { | ||
handleLike( | ||
currentThought._id, | ||
currentThought.hearts, | ||
currentThought, | ||
setCurrentThought | ||
); | ||
}}> <span>❤️</span> | ||
</button><p className="single-thought-likes-counter"> x {currentThought.hearts} </p> | ||
</div> | ||
) | ||
} | ||
|
||
export default LikeBtn; | ||
|
||
// { | ||
// "likes-btn" + (clickEffect ? "likes-btn-clickeffect" : "") | ||
// } |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import React from 'react'; | ||
import FadeLoader from 'react-spinners/FadeLoader' | ||
|
||
const Loading = () => { | ||
return ( | ||
<section> | ||
<FadeLoader /> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nice addition of the loader |
||
</section> | ||
) | ||
} | ||
|
||
export default Loading; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
/* eslint-disable no-underscore-dangle */ | ||
import React, { useState } from 'react'; | ||
import { formatDistance } from 'date-fns' | ||
import LikeBtn from './LikeBtn.js' | ||
|
||
const SingleThought = ({ thought, handleLike }) => { | ||
const [currentThought, setCurrentThought] = useState(thought); | ||
return ( | ||
<section className="single-thought-section" key={thought._id}> | ||
<p className="single-thought-message">{thought.message}</p> | ||
<div className="single-thought-like"> | ||
<LikeBtn | ||
handleLike={handleLike} | ||
currentThought={currentThought} | ||
setCurrentThought={setCurrentThought} /> | ||
<div className="single-thought-date"> | ||
{formatDistance(new Date(thought.createdAt), Date.now(), { addSuffix: true })} | ||
</div> | ||
</div> | ||
</section> | ||
) | ||
} | ||
|
||
export default SingleThought; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
/* eslint-disable no-underscore-dangle */ | ||
import React from 'react'; | ||
import SingleThought from './SingleThought.js'; | ||
|
||
const Thoughts = ({ thoughts, handleLike }) => { | ||
return ( | ||
<section className="thoughts-section"> | ||
{thoughts.map((thought) => { | ||
return ( | ||
<SingleThought | ||
thought={thought} | ||
handleLike={handleLike} /> | ||
) | ||
})} | ||
</section> | ||
) | ||
} | ||
|
||
export default Thoughts; |
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 idea storing the method in a variable.