From 67cbc8562d974d390dbedbfd1c44e152d8c5769a Mon Sep 17 00:00:00 2001 From: "tess.aquilon" Date: Wed, 17 May 2023 19:56:54 +0200 Subject: [PATCH 01/28] did the whole example project and completed it to fit the happy thoughts project in one go without committing whooops --- code/src/App.js | 68 ++++++++++++++++++++++++++++- code/src/components/ThoughtsForm.js | 38 ++++++++++++++++ code/src/components/ThoughtsList.js | 33 ++++++++++++++ code/src/index.js | 1 + 4 files changed, 138 insertions(+), 2 deletions(-) create mode 100644 code/src/components/ThoughtsForm.js create mode 100644 code/src/components/ThoughtsList.js diff --git a/code/src/App.js b/code/src/App.js index f2007d229..c402ced8d 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,9 +1,73 @@ -import React from 'react'; +/* eslint-disable linebreak-style */ +/* eslint-disable no-underscore-dangle */ +import React, { useState, useEffect } from 'react'; +import { ThoughtsList } from 'components/ThoughtsList'; +import { ThoughtsForm } from 'components/ThoughtsForm'; export const App = () => { + const [thoughtsList, setThoughtsList] = useState([]); + const [loading, setLoading] = useState(false); + const [newThought, setNewThought] = useState(''); + const fetchThoughts = () => { + setLoading(true); + fetch('https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts') + .then((res) => res.json()) + .then((data) => setThoughtsList(data)) + .catch((error) => console.error(error)) + .finally(() => setLoading(false)); + }; + useEffect(() => { + fetchThoughts(); + }, []); + const handleNewThoughtChange = (e) => { + setNewThought(e.target.value) + }; + const postNewThought = () => { + const options = { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + message: newThought + }) + }; + fetch('https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts', options) + .then((res) => res.json()) + .then((data) => setThoughtsList((prevList) => [data, ...prevList])); + }; + const handleFormSubmit = (e) => { + e.preventDefault(); + postNewThought(); + setNewThought(''); + } + const handleLike = (_id) => { + fetch(`https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts/${_id}/like`, { method: 'POST' }) + .then((res) => { + return res.json() + }) + .then((data) => { + const updateLikes = thoughtsList.map((like) => { + if (like._id === data._id) { + like.hearts += 1; + return like; + } else { + return like; + } + }); + setThoughtsList(updateLikes) + }) + } return (
- Find me in src/app.js! + +
); } diff --git a/code/src/components/ThoughtsForm.js b/code/src/components/ThoughtsForm.js new file mode 100644 index 000000000..52f87e3de --- /dev/null +++ b/code/src/components/ThoughtsForm.js @@ -0,0 +1,38 @@ +/* eslint-disable linebreak-style */ +import React from 'react'; + +export const ThoughtsForm = ({ newThought, onNewThoughtChange, handleFormSubmit }) => { + // disabling the submit button if characters exceed maximum allowed + const isSubmitButtonDisabled = newThought.length < 4 || newThought.length > 140; + // display warning if characters exceed maximum allowed, otherwise display amount of characters + const characterWarning = () => { + if (newThought.length > 140) { + return (

Warning! Too many characters...

) + } else { + return ( +

{newThought.length}/140

+ ) + } + } + return ( +
+