From 39540c7adf2a29e34e44380a41a50d7c9a07f868 Mon Sep 17 00:00:00 2001 From: Emma Engvall Date: Sun, 19 Mar 2023 16:15:53 +0100 Subject: [PATCH 01/11] added font --- code/public/index.html | 3 ++- code/src/App.js | 3 ++- code/src/index.css | 4 +--- package-lock.json | 6 ++++++ 4 files changed, 11 insertions(+), 5 deletions(-) create mode 100644 package-lock.json diff --git a/code/public/index.html b/code/public/index.html index e6730aa66..582ee92db 100644 --- a/code/public/index.html +++ b/code/public/index.html @@ -4,6 +4,7 @@ + - Technigo React App + Project Happy Thoughts by Emma Engvall diff --git a/code/src/App.js b/code/src/App.js index f2007d229..39fcad6fe 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,9 +1,10 @@ +/* eslint-disable */ import React from 'react'; export const App = () => { return (
- Find me in src/app.js! + Here goes the heart ❤️
); } diff --git a/code/src/index.css b/code/src/index.css index 4a1df4db7..ae0d40bd1 100644 --- a/code/src/index.css +++ b/code/src/index.css @@ -1,8 +1,6 @@ body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", - "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", - sans-serif; + font-family: Roboto Mono; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 000000000..41fb8145a --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "project-happy-thoughts", + "lockfileVersion": 2, + "requires": true, + "packages": {} +} From e2f5d732747cdccfc2e010702ca9312783898134 Mon Sep 17 00:00:00 2001 From: Emma Engvall Date: Thu, 23 Mar 2023 10:20:58 +0100 Subject: [PATCH 02/11] started creating components --- code/public/index.html | 2 +- code/src/App.js | 29 ++++++++++++++++++++++++++++- code/src/components/ThoughtForm.js | 2 ++ code/src/components/ThoughtList.js | 2 ++ 4 files changed, 33 insertions(+), 2 deletions(-) create mode 100644 code/src/components/ThoughtForm.js create mode 100644 code/src/components/ThoughtList.js diff --git a/code/public/index.html b/code/public/index.html index 582ee92db..879080451 100644 --- a/code/public/index.html +++ b/code/public/index.html @@ -14,7 +14,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - Project Happy Thoughts by Emma Engvall + Project Happy Thoughts ❤️ by Emma Engvall diff --git a/code/src/App.js b/code/src/App.js index 39fcad6fe..46f8a9c23 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,10 +1,37 @@ /* eslint-disable */ -import React from 'react'; +import React, { useState, useEffect } from 'react'; +import { ThoughtList } from 'components/ThoughtsList' export const App = () => { + + const [thoughtList, setThoughtsList] = useState ([]); + const [loading, setLoading] = useState(false); + +useEffect(() => { + fetchThoughts(); +}, []); + +const fetchThoughts = () => { + setLoading(true); + fetch('https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts') + .then(res => res.json()) + .catch(error => console.error(error)) + .finally(() => setLoading(false)); +} +// add .then(data => setThoughtsList(data)) + + +const handleFormSubmit = (event) => { + event.preventDefault() +} + + return (
Here goes the heart ❤️
); } + +//button type="submit" +// Other components: ThoughtsList look at TaskList.js createdAt instead of date \ No newline at end of file diff --git a/code/src/components/ThoughtForm.js b/code/src/components/ThoughtForm.js new file mode 100644 index 000000000..486b8158c --- /dev/null +++ b/code/src/components/ThoughtForm.js @@ -0,0 +1,2 @@ +/* eslint-disable */ +import React from "react"; \ No newline at end of file diff --git a/code/src/components/ThoughtList.js b/code/src/components/ThoughtList.js new file mode 100644 index 000000000..486b8158c --- /dev/null +++ b/code/src/components/ThoughtList.js @@ -0,0 +1,2 @@ +/* eslint-disable */ +import React from "react"; \ No newline at end of file From c7400cfc6e1e093b0872bd7651e4582f8d43be41 Mon Sep 17 00:00:00 2001 From: Emma Engvall Date: Thu, 23 Mar 2023 22:02:47 +0100 Subject: [PATCH 03/11] started building the app.js --- code/src/App.js | 37 +++++++++++++++++-- code/src/components/NewThought.js | 8 ++++ .../{ThoughtForm.js => SingleThought.js} | 0 code/src/components/ThoughtList.js | 2 - code/src/components/ThoughtsList.js | 10 +++++ 5 files changed, 52 insertions(+), 5 deletions(-) create mode 100644 code/src/components/NewThought.js rename code/src/components/{ThoughtForm.js => SingleThought.js} (100%) delete mode 100644 code/src/components/ThoughtList.js create mode 100644 code/src/components/ThoughtsList.js diff --git a/code/src/App.js b/code/src/App.js index 46f8a9c23..c7ccc6d42 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,11 +1,13 @@ /* eslint-disable */ import React, { useState, useEffect } from 'react'; -import { ThoughtList } from 'components/ThoughtsList' +import { ThoughtsList } from 'components/ThoughtsList' +import { NewThought } from 'components/NewThought' export const App = () => { - const [thoughtList, setThoughtsList] = useState ([]); + const [thoughtsList, setThoughtsList] = useState ([]); const [loading, setLoading] = useState(false); + const [newTodo, setNewTodo] = useState(''); useEffect(() => { fetchThoughts(); @@ -15,20 +17,49 @@ 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)); } -// add .then(data => setThoughtsList(data)) +const handleNewTodoChange = (event) => { + setNewTodo(event.target.value) +} const handleFormSubmit = (event) => { event.preventDefault() + + const options = + { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + description: newTodo + }) + } + + fetch('https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts', options) + .then(res => res.json()) + .then(() => fetchThoughts()) + .finally(() => setNewTodo('')); } return (
Here goes the heart ❤️ + +
); } diff --git a/code/src/components/NewThought.js b/code/src/components/NewThought.js new file mode 100644 index 000000000..3e47334fb --- /dev/null +++ b/code/src/components/NewThought.js @@ -0,0 +1,8 @@ +/* eslint-disable */ +import React from "react"; + + + + + +//export const NewThought; \ No newline at end of file diff --git a/code/src/components/ThoughtForm.js b/code/src/components/SingleThought.js similarity index 100% rename from code/src/components/ThoughtForm.js rename to code/src/components/SingleThought.js diff --git a/code/src/components/ThoughtList.js b/code/src/components/ThoughtList.js deleted file mode 100644 index 486b8158c..000000000 --- a/code/src/components/ThoughtList.js +++ /dev/null @@ -1,2 +0,0 @@ -/* eslint-disable */ -import React from "react"; \ No newline at end of file diff --git a/code/src/components/ThoughtsList.js b/code/src/components/ThoughtsList.js new file mode 100644 index 000000000..80fa69a1d --- /dev/null +++ b/code/src/components/ThoughtsList.js @@ -0,0 +1,10 @@ +/* eslint-disable */ +import React from "react"; +import SingleThought from './SingleThought'; + + + + + + +//export const ThoughtsList From 09f57a57f4e6371a3fef2c39c478e6659aa35791 Mon Sep 17 00:00:00 2001 From: Emma Engvall Date: Sat, 25 Mar 2023 22:07:15 +0100 Subject: [PATCH 04/11] built ThoughtList component --- code/src/App.js | 18 ++++++-------- code/src/components/NewThought.js | 19 ++++++++------ code/src/components/SingleThought.js | 2 -- code/src/components/ThoughtList.js | 37 ++++++++++++++++++++++++++++ code/src/components/ThoughtsList.js | 10 -------- 5 files changed, 56 insertions(+), 30 deletions(-) delete mode 100644 code/src/components/SingleThought.js create mode 100644 code/src/components/ThoughtList.js delete mode 100644 code/src/components/ThoughtsList.js diff --git a/code/src/App.js b/code/src/App.js index c7ccc6d42..66b0e4f20 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,11 +1,11 @@ /* eslint-disable */ import React, { useState, useEffect } from 'react'; -import { ThoughtsList } from 'components/ThoughtsList' -import { NewThought } from 'components/NewThought' +import { ThoughtList } from 'components/ThoughtList'; +import { NewThought } from 'components/NewThought'; export const App = () => { - const [thoughtsList, setThoughtsList] = useState ([]); + const [thoughtList, setThoughtList] = useState ([]); const [loading, setLoading] = useState(false); const [newTodo, setNewTodo] = useState(''); @@ -26,7 +26,7 @@ const handleNewTodoChange = (event) => { setNewTodo(event.target.value) } -const handleFormSubmit = (event) => { +const onFormSubmit = (event) => { event.preventDefault() const options = @@ -46,7 +46,6 @@ const handleFormSubmit = (event) => { .finally(() => setNewTodo('')); } - return (
Here goes the heart ❤️ @@ -57,12 +56,9 @@ const handleFormSubmit = (event) => { />
); -} - -//button type="submit" -// Other components: ThoughtsList look at TaskList.js createdAt instead of date \ No newline at end of file +} \ No newline at end of file diff --git a/code/src/components/NewThought.js b/code/src/components/NewThought.js index 3e47334fb..0664a4366 100644 --- a/code/src/components/NewThought.js +++ b/code/src/components/NewThought.js @@ -1,8 +1,13 @@ /* eslint-disable */ -import React from "react"; - - - - - -//export const NewThought; \ No newline at end of file +import React from 'react'; + +export const NewThought =({ newTodo, onNewTodoChange, onFormSubmit }) => { + + return ( +
+

❤️ Share your happy thoughts ❤️

+