From 9fd9694c0938d0b01452278e214eed92199fea86 Mon Sep 17 00:00:00 2001 From: Vera Sjunnesson Date: Wed, 22 Mar 2023 12:40:11 +0100 Subject: [PATCH 01/27] fetched data - initial start --- code/src/App.js | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/code/src/App.js b/code/src/App.js index f2007d229..d04930052 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,9 +1,25 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; export const App = () => { + const [thoughtList, setThoughtList] = useState([]); + const [loading, setLoading] = useState(false); + + useEffect(() => { + setLoading(true); + fetch('https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts') + .then((response) => response.json()) + .then((data) => setThoughtList(data)) + .catch((error) => console.log(error)) + .finally(() => { setLoading(false) }) + }, []) + return (
- Find me in src/app.js! + {!loading && thoughtList.map((thought) => { + // eslint-disable-next-line no-underscore-dangle + return (

{thought.message}

) + })} + {loading && (

Loading...

)}
); } From 794979d947e9c1850933b7c66bb29611c0cd71a3 Mon Sep 17 00:00:00 2001 From: Vera Sjunnesson Date: Sun, 26 Mar 2023 23:51:06 +0200 Subject: [PATCH 02/27] finalized the project, fixing a lot of bugs --- code/package-lock.json | 18 +++++++++ code/package.json | 1 + code/src/App.js | 23 ++--------- code/src/SingleThought.js | 0 code/src/components/ThoughtFeed.js | 65 ++++++++++++++++++++++++++++++ code/src/components/ThoughtForm.js | 56 +++++++++++++++++++++++++ code/src/index.css | 44 ++++++++++++++++++-- 7 files changed, 185 insertions(+), 22 deletions(-) create mode 100644 code/src/SingleThought.js create mode 100644 code/src/components/ThoughtFeed.js create mode 100644 code/src/components/ThoughtForm.js diff --git a/code/package-lock.json b/code/package-lock.json index f7e97e1e9..fab8e56d2 100644 --- a/code/package-lock.json +++ b/code/package-lock.json @@ -9,6 +9,7 @@ "version": "1.0.0", "dependencies": { "babel-eslint": "^10.1.0", + "date-fns": "^2.29.3", "eslint": "^8.21.0", "eslint-config-airbnb": "^19.0.4", "eslint-plugin-import": "^2.26.0", @@ -6205,6 +6206,18 @@ "node": ">=10" } }, + "node_modules/date-fns": { + "version": "2.29.3", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz", + "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==", + "engines": { + "node": ">=0.11" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/date-fns" + } + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -21996,6 +22009,11 @@ "whatwg-url": "^8.0.0" } }, + "date-fns": { + "version": "2.29.3", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz", + "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==" + }, "debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", diff --git a/code/package.json b/code/package.json index 68869f589..4cbbdb2d2 100644 --- a/code/package.json +++ b/code/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "babel-eslint": "^10.1.0", + "date-fns": "^2.29.3", "eslint": "^8.21.0", "eslint-config-airbnb": "^19.0.4", "eslint-plugin-import": "^2.26.0", diff --git a/code/src/App.js b/code/src/App.js index d04930052..665645b39 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,25 +1,10 @@ -import React, { useState, useEffect } from 'react'; +import React from 'react'; +import { ThoughtFeed } from './components/ThoughtFeed'; export const App = () => { - const [thoughtList, setThoughtList] = useState([]); - const [loading, setLoading] = useState(false); - - useEffect(() => { - setLoading(true); - fetch('https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts') - .then((response) => response.json()) - .then((data) => setThoughtList(data)) - .catch((error) => console.log(error)) - .finally(() => { setLoading(false) }) - }, []) - return ( -
- {!loading && thoughtList.map((thought) => { - // eslint-disable-next-line no-underscore-dangle - return (

{thought.message}

) - })} - {loading && (

Loading...

)} +
+
); } diff --git a/code/src/SingleThought.js b/code/src/SingleThought.js new file mode 100644 index 000000000..e69de29bb diff --git a/code/src/components/ThoughtFeed.js b/code/src/components/ThoughtFeed.js new file mode 100644 index 000000000..edc788ea9 --- /dev/null +++ b/code/src/components/ThoughtFeed.js @@ -0,0 +1,65 @@ +/* eslint-disable no-underscore-dangle */ +import React, { useState, useEffect } from 'react'; +import { formatDistance } from 'date-fns'; +import { ThoughtForm } from './ThoughtForm'; + +const API = 'https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts' + +export const ThoughtFeed = () => { + const [thoughtList, setThoughtList] = useState([]) + const [isLoading, setIsLoading] = useState(false) + + const fetchThoughts = () => { + fetch(`${API}`) + .then((response) => response.json()) + .then((data) => setThoughtList(data)) + .catch((error) => console.log(error)) + .finally(() => { setIsLoading(false) }) + } + + useEffect(() => { + fetchThoughts(); + }, []); + + const HandleLikes = (thoughtId) => { + fetch(`${API}/${thoughtId}/like`, { method: 'POST' }) + .then((response) => response.json()) + .then((data) => { + const changeLikeCount = thoughtList.map((like) => { + if (like._id === data._id) { + like.hearts += 1 + return like + } else { return like } + }) + setThoughtList(changeLikeCount) + }) + }; + + return ( + <> +
+ +
+
+ {!isLoading && thoughtList.map((thought) => { + return ( +
+

{thought.message}

+
+
+ + x {thought.hearts} +
+

{formatDistance(new Date(thought.createdAt), Date.now(), { addSuffix: true })}

+
+
+ ) + })} +
+ {isLoading && (

Loading in progress...

)} + + ) +} + diff --git a/code/src/components/ThoughtForm.js b/code/src/components/ThoughtForm.js new file mode 100644 index 000000000..dcb29416d --- /dev/null +++ b/code/src/components/ThoughtForm.js @@ -0,0 +1,56 @@ +import React, { useState } from 'react'; + +export const ThoughtForm = () => { + const [newThought, setNewThought] = useState(''); + const [minMaxCount, setMinMaxCount] = useState(false); + + const API = 'https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts' + + const onFormSubmit = (event) => { + event.preventDefault() + if (newThought.length < 5 || newThought.length >= 141) { + setMinMaxCount(true) + return alert('Oh no, you have too few or too many characters! Please, try again.') + } else { + const options = { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ message: newThought }) + }; + fetch(`${API}`, options) + .then((response) => response.json()) + .then(() => { + setNewThought(''); + window.location.reload(); + minMaxCount(false) + }) + } + } + + const onNewThoughtChange = (event) => { + setNewThought(event.target.value); + } + + return ( +
+

What's making you happy right now?

+