From 27656025303fe322a578087d05effe7cb39602c8 Mon Sep 17 00:00:00 2001 From: JosefinRobertsson Date: Wed, 22 Mar 2023 19:32:31 +0100 Subject: [PATCH 01/22] Made component that fetches API --- code/src/App.js | 21 +++++++++++++++------ code/src/components/FetchAPIData.js | 27 +++++++++++++++++++++++++++ 2 files changed, 42 insertions(+), 6 deletions(-) create mode 100644 code/src/components/FetchAPIData.js diff --git a/code/src/App.js b/code/src/App.js index f2007d229..dd43e4a1e 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,9 +1,18 @@ -import React from 'react'; +import React, { useState } from 'react'; +import FetchAPIData from 'components/FetchAPIData'; export const App = () => { + const [happyThoughtsList, setHappyThoughtsList] = useState([]); + const [loading, setLoading] = useState(false); + return ( -
- Find me in src/app.js! -
- ); -} + <> +

YO

+ + + ) +} \ No newline at end of file diff --git a/code/src/components/FetchAPIData.js b/code/src/components/FetchAPIData.js new file mode 100644 index 000000000..b81518cfc --- /dev/null +++ b/code/src/components/FetchAPIData.js @@ -0,0 +1,27 @@ +import React, { useEffect } from 'react'; + +const FetchAPIData = ({ happyThoughtsList, setHappyThoughtsList, loading, setLoading }) => { + useEffect(() => { + setLoading(true); + console.log(happyThoughtsList); + fetch('https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts') + .then((response) => response.json()) + .then((data) => setHappyThoughtsList(data)) + .catch((error) => console.log(error)) + .finally(() => { + console.log('it worked'); + setLoading(false); + console.log(loading); + }); + }, []); + + return ( +
+ {!loading && happyThoughtsList.map((thought) => { + return (

{thought.message}

) + })} +
+ ); +}; + +export default FetchAPIData; \ No newline at end of file From 5791e3590fe30093c92a59e17f1fb39b80afbd57 Mon Sep 17 00:00:00 2001 From: JosefinRobertsson Date: Fri, 24 Mar 2023 23:54:16 +0100 Subject: [PATCH 02/22] all needed for blue level except styling --- code/src/App.js | 47 +++++++++++++++--- code/src/components/DataList.js | 46 ++++++++++++++++++ code/src/components/InputForm.js | 73 ++++++++++++++++++++++++++++ code/src/components/SingleThought.js | 14 ++++++ code/src/index.css | 5 ++ 5 files changed, 178 insertions(+), 7 deletions(-) create mode 100644 code/src/components/DataList.js create mode 100644 code/src/components/InputForm.js create mode 100644 code/src/components/SingleThought.js diff --git a/code/src/App.js b/code/src/App.js index dd43e4a1e..2efb885e8 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,18 +1,51 @@ import React, { useState } from 'react'; -import FetchAPIData from 'components/FetchAPIData'; +import DataList from 'components/DataList'; +import InputForm from 'components/InputForm'; export const App = () => { const [happyThoughtsList, setHappyThoughtsList] = useState([]); const [loading, setLoading] = useState(false); + const [newThought, setNewThought] = useState(''); + const onHeartClick = (thought) => { + const options = { + method: 'POST' + }; + + console.log('options', options); + // eslint-disable-next-line no-underscore-dangle + fetch(`https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts/${thought._id}/like`, options) + .then((response) => response.json()) + .then((updatedThought) => { + console.log(updatedThought); + + // create a new array with the updated thought + const updatedThoughtsList = happyThoughtsList.map((thoughtItem) => { + // eslint-disable-next-line no-underscore-dangle + if (thoughtItem._id === updatedThought._id) { + return updatedThought; + } + return thoughtItem; + }); + + // set the updated thoughts list + setHappyThoughtsList(updatedThoughtsList); + }) + .catch((error) => console.log(error)) + .finally(() => { + console.log('heart count increased') + }); + }; return ( <> -

YO

- + setLoading={setLoading} + newThought={newThought} + setNewThought={setNewThought} + setHappyThoughtsList={setHappyThoughtsList} + happyThoughtsList={happyThoughtsList} /> + ) -} \ No newline at end of file +}; \ No newline at end of file diff --git a/code/src/components/DataList.js b/code/src/components/DataList.js new file mode 100644 index 000000000..603ebf717 --- /dev/null +++ b/code/src/components/DataList.js @@ -0,0 +1,46 @@ +import React from 'react'; +import SingleThought from './SingleThought'; + +const DataList = ({ happyThoughtsList, setHappyThoughtsList, onHeartClick }) => { + const heartCountClick = (thought) => { + onHeartClick(thought) + const options = { + method: 'POST' + }; + + console.log('options', options); + // eslint-disable-next-line no-underscore-dangle + fetch(`https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts/${thought._id}/like`, options) + .then((response) => response.json()) + .then((updatedThought) => { + console.log(updatedThought); + + // create a new array with the updated thought + const updatedThoughtsList = happyThoughtsList.map((thoughtItem) => { + // eslint-disable-next-line no-underscore-dangle + if (thoughtItem._id === updatedThought._id) { + return updatedThought; + } + return thoughtItem; + }); + + // set the updated thoughts list + setHappyThoughtsList(updatedThoughtsList); + }) + .catch((error) => console.log(error)) + .finally(() => { + console.log('heart count increased') + }); + }; + + return ( +
+ {happyThoughtsList.map((thought) => ( + // eslint-disable-next-line no-underscore-dangle + + ))} +
+ ) +}; + +export default DataList; diff --git a/code/src/components/InputForm.js b/code/src/components/InputForm.js new file mode 100644 index 000000000..3cf17e5d4 --- /dev/null +++ b/code/src/components/InputForm.js @@ -0,0 +1,73 @@ +import React, { useEffect } from 'react'; + +const InputForm = ({ + loading, + setLoading, + newThought, + setNewThought, + setHappyThoughtsList, + happyThoughtsList +}) => { + const updateThoughtsList = () => { + setLoading(true); + + fetch('https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts') + .then((response) => response.json()) + .then((data) => setHappyThoughtsList(data)) + .catch((error) => console.log(error)) + .finally(() => { + console.log('it worked'); + setLoading(false); + console.log('loading-Get'); + console.log(happyThoughtsList); + }); + }; + + const handleFormSubmit = (event) => { + event.preventDefault(); + setLoading(true); + const options = { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + message: newThought + }) + }; + + console.log('options', options); + fetch('https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts', options) + .then((response) => response.json()) + .then((data) => { + setHappyThoughtsList([data, ...happyThoughtsList]); + console.log(data); + }) + .catch((error) => console.log(error)) + .finally(() => { + setLoading(false); + console.log(happyThoughtsList) + setNewThought(''); // clear textarea + }); + }; + + useEffect(() => { + updateThoughtsList(); + }, []); + + if (loading) { + return (

loading in process...

); + } + + return ( +
+
+

Submit thought below

+