Project Happy Thoughts - Hannah Ek #435
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
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,16 @@ | ||
| import React from 'react'; | ||
| import { ThoughtFeed } from 'components/ThoughtFeed'; | ||
| import { NewThought } from 'components/NewThought'; | ||
|
|
||
| export const App = () => { | ||
| return ( | ||
| <> | ||
| <section> | ||
| <NewThought /> | ||
| </section> | ||
| <section> | ||
| <ThoughtFeed /> | ||
| </section> | ||
| </> | ||
|
Comment on lines
+7
to
+14
There was a problem hiding this comment. If you look in the inspector, the
|
||
| ) | ||
| } | ||
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,51 @@ | ||
| import React, { useState } from 'react'; | ||
|
|
||
| export const NewThought = () => { | ||
| const [newThought, setNewThought] = useState(''); | ||
|
|
||
| const HandleFormSubmit = (event) => { | ||
| event.preventDefault(); | ||
| if (newThought.length < 5) { | ||
| return alert('Get on that keyboard, more than 5 characters, please!') | ||
| } else if (newThought.length > 140) { | ||
| return alert('Are you some sort of hacker?! No more than 140 characters, please!') | ||
| } else { | ||
|
Comment on lines
+8
to
+12
There was a problem hiding this comment. Love the messages haha! Also great and condense way of writing the error conditionals. |
||
| const Submit = { | ||
| method: 'POST', | ||
| headers: { 'Content-Type': 'application/json' }, | ||
| body: JSON.stringify({ message: newThought }) | ||
| }; | ||
| fetch('https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts', Submit) | ||
| .then((response) => response.json()) | ||
| .then(() => { | ||
| setNewThought(''); | ||
| setTimeout(() => window.location.reload(), 3000) | ||
|
There was a problem hiding this comment. Really great idea to use the timed function here! |
||
| }) | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <section className="main-container"> | ||
|
There was a problem hiding this comment. I like that you re-used the className for both the NewThought section and the ThoughtFeed section. Great way of keeping down the amount of code! It shows that you have really thought it through :) |
||
| <form onSubmit={HandleFormSubmit} className="form-card"> | ||
| <label htmlFor="newThought" className="head-thought">What is making you happy right now? | ||
| <textarea | ||
| id="newThought" | ||
| type="text" | ||
| placeholder="Type your happy thoughts here..." | ||
| rows="4" | ||
| cols="40" | ||
| value={newThought} | ||
| onChange={(event) => setNewThought(event.target.value)} /> | ||
| </label> | ||
| <p className={newThought.length > 140 ? 'counter' : 'counter'}>{newThought.length} / 140</p> | ||
|
There was a problem hiding this comment. Also a comment regarding the speak-reader. Now it never reads the "/", which makes it confusing to understand the length that is written and allowed. I recommend adding an aria-label to this section.
|
||
| <button className="submitBtn" type="submit"> | ||
| <span> | ||
| <span className="heart" role="img" aria-label="heart"> 💗 </span> | ||
|
There was a problem hiding this comment. Nice with the aria label! Sounded good when I listened to it. |
||
| Send happy thought | ||
| <span className="heart" role="img" aria-label="heart"> 💗 </span> | ||
| </span> | ||
| </button> | ||
| </form> | ||
| </section> | ||
| ) | ||
| }; | ||
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,11 @@ | ||
| import React from 'react' | ||
|
|
||
| const Spinning = () => ( | ||
| <div className="loading-thoughts"> | ||
| <div className="loading-spinner"> | ||
| 💖 | ||
| </div> | ||
| </div> | ||
|
Comment on lines
+3
to
+8
|
||
| ) | ||
|
|
||
| export default Spinning; | ||
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,55 @@ | ||
| /* eslint-disable no-underscore-dangle */ | ||
| import React, { useState, useEffect } from 'react'; | ||
| import { formatDistance } from 'date-fns'; | ||
| import Spinning from './Spinning'; | ||
| // import { Loading } from './Loading' | ||
|
|
||
|
|
||
| const API = 'https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts' | ||
|
There was a problem hiding this comment. Nice idea to have the fetch adress outside the function, makes it look a lot cleaner inside the fetch! |
||
|
|
||
| export const ThoughtFeed = () => { | ||
| const [thoughtsList, setThoughtsList] = useState([]); | ||
| const [loading, setLoading] = useState(false); | ||
|
|
||
| useEffect(() => { | ||
| setLoading(true); | ||
| fetch(`${API}`) | ||
| .then((res) => res.json()) | ||
| .then((data) => setThoughtsList(data)) | ||
| .catch((error) => console.log(error)) | ||
| .finally(() => { setLoading(false) }) | ||
| }, []); | ||
|
|
||
| const HandleLike = (thoughtId) => { | ||
| fetch(`${API}/${thoughtId}/like`, { method: 'POST' }) | ||
| .then((res) => res.json()) | ||
| .then((data) => { | ||
| const UpdateHearts = thoughtsList.map((like) => { | ||
| if (like._id === data._id) { | ||
| like.hearts += 1 | ||
| return like | ||
| } else { return like } | ||
| }) | ||
| setThoughtsList(UpdateHearts) | ||
| }) | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <section className="main-container"> | ||
| {!loading && thoughtsList.map((thought) => { | ||
| return ( | ||
| <div key={thought._id} className="card"> | ||
| <p className="post-text">{thought.message}</p> | ||
| <button type="button" className={thought.hearts === 0 ? 'noLikesBtn' : 'likesBtn'} onClick={() => HandleLike(thought._id)}> | ||
| <span role="img" aria-label="Like this post">💗</span> | ||
| </button> | ||
| <span className="sum-hearts">x {thought.hearts}</span> | ||
|
There was a problem hiding this comment. I listened to your app and this sounds a bit funny, it really says e.g. "x four". Could you maybe add an aria-label to it, so that the speaker reads "likes times four" or similar?
|
||
| <p className="date"> {formatDistance(new Date(thought.createdAt), Date.now(), { addSuffix: true })}</p> | ||
| </div> | ||
| ) | ||
| })} | ||
| </section> | ||
| {loading && (<Spinning />)} | ||
| </> | ||
| ) | ||
| }; | ||
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
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.
Nice job including the og tags! I suggest you check what it looks like through this page: https://www.opengraph.xyz/url/https%3A%2F%2Fproject-happy-thoughts-hannah-ek.netlify.app%2F
I think it would look even better if you make the image wider with white space, then more of it will be shown and not "cut".