Nora Terbocs - Happy thoughts #440
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,23 @@ | ||
| # Happy Thoughts | ||
|
|
||
| The project "Happy Thoughts" is about practicing React state skills by fetching and posting data to an API. | ||
|
|
||
| ## The problem | ||
|
|
||
| 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 | ||
|
|
||
| noras-happy-thoughts-project.netlify.app |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,97 @@ | ||
| 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. 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. 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 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> | ||
|
|
||
| ); | ||
| } | ||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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" : "") | ||
| // } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 /> | ||
|
|
||
| </section> | ||
| ) | ||
| } | ||
|
|
||
| export default Loading; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.