From 41a0b75a45b053cb35d25ab9363010120c343a66 Mon Sep 17 00:00:00 2001 From: Ylva Karlsson <121539816+YlvaKarlsson@users.noreply.github.com> Date: Fri, 24 Mar 2023 22:28:36 +0100 Subject: [PATCH 01/12] First commit --- code/package-lock.json | 14 +++++++ code/package.json | 1 + code/src/App.js | 9 ++--- code/src/Footer.js | 23 +++++++++++ code/src/HappyThought.js | 33 ++++++++++++++++ code/src/HappyThoughtsFeed.js | 72 +++++++++++++++++++++++++++++++++++ code/src/index.css | 29 ++++++++++++++ package-lock.json | 20 ++++++++++ package.json | 5 +++ 9 files changed, 200 insertions(+), 6 deletions(-) create mode 100644 code/src/Footer.js create mode 100644 code/src/HappyThought.js create mode 100644 code/src/HappyThoughtsFeed.js create mode 100644 package-lock.json create mode 100644 package.json diff --git a/code/package-lock.json b/code/package-lock.json index f7e97e1e9..e361ead57 100644 --- a/code/package-lock.json +++ b/code/package-lock.json @@ -15,6 +15,7 @@ "eslint-plugin-jsx-a11y": "^6.6.1", "eslint-plugin-react": "^7.30.1", "eslint-plugin-react-hooks": "^4.6.0", + "moment": "^2.29.4", "react": "^18.2.0", "react-dom": "^18.2.0" }, @@ -12155,6 +12156,14 @@ "mkdirp": "bin/cmd.js" } }, + "node_modules/moment": { + "version": "2.29.4", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz", + "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==", + "engines": { + "node": "*" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -26401,6 +26410,11 @@ "minimist": "^1.2.6" } }, + "moment": { + "version": "2.29.4", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz", + "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==" + }, "ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", diff --git a/code/package.json b/code/package.json index 68869f589..2bda29bbd 100644 --- a/code/package.json +++ b/code/package.json @@ -10,6 +10,7 @@ "eslint-plugin-jsx-a11y": "^6.6.1", "eslint-plugin-react": "^7.30.1", "eslint-plugin-react-hooks": "^4.6.0", + "moment": "^2.29.4", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/code/src/App.js b/code/src/App.js index f2007d229..c8da02960 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,9 +1,6 @@ import React from 'react'; +import HappyThoughtsFeed from './HappyThoughtsFeed'; export const App = () => { - return ( -
- Find me in src/app.js! -
- ); -} + return ; +}; \ No newline at end of file diff --git a/code/src/Footer.js b/code/src/Footer.js new file mode 100644 index 000000000..51b366472 --- /dev/null +++ b/code/src/Footer.js @@ -0,0 +1,23 @@ +import React from 'react'; + +const Footer = () => { + return ( + + ); +}; + +export default Footer; diff --git a/code/src/HappyThought.js b/code/src/HappyThought.js new file mode 100644 index 000000000..573a0fe7b --- /dev/null +++ b/code/src/HappyThought.js @@ -0,0 +1,33 @@ +import React, { useState } from 'react'; +import moment from 'moment'; + +const HappyThought = (props) => { + const [hearts, setHearts] = useState(props.hearts); // initialize state with the number of likes + + const handleLike = () => { + fetch(`https:///thoughts/${props.id}/like`, { // send a POST request to your API endpoint to increase the number of likes for this thought + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ increment: 1 }) + }) + .then((response) => response.json()) + .then((data) => setHearts(data.hearts)); // update the state with the new number of likes + }; + + return ( +
+

{props.text}

+
+
+ x{hearts} + {/* update the number of likes with the state value */} +
+
+

{moment(props.timestamp).startOf('hour').fromNow()}

+
+
+
+ ); +}; + +export default HappyThought; diff --git a/code/src/HappyThoughtsFeed.js b/code/src/HappyThoughtsFeed.js new file mode 100644 index 000000000..b53dd279a --- /dev/null +++ b/code/src/HappyThoughtsFeed.js @@ -0,0 +1,72 @@ +/* eslint-disable import/no-named-as-default */ +/* eslint-disable no-trailing-spaces */ +import React, { useState, useEffect } from 'react'; +import HappyThought from './HappyThought'; +import Footer from './Footer'; +import './index.css'; + +const HappyThoughtsFeed = () => { + const [thoughtsList, setThoughtsList] = useState([]); + const [loading, setLoading] = useState(false); + const [happyThought, setHappyThought] = useState(''); + + const API_URL = 'https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts'; + + useEffect(() => { + setLoading(true); + fetch(API_URL) + .then((response) => response.json()) + .then((data) => setThoughtsList(data)) + .catch((error) => console.log(error)) + .finally(() => { + setLoading(false); + }); + }, []); + const handleChange = (event) => { + setHappyThought(event.target.value); + }; + const CreateThought = (event) => { + event.preventDefault(); + fetch(API_URL, { + method: 'POST', + body: JSON.stringify({ message: happyThought }), + headers: { + 'Content-Type': 'application/json', + Accept: 'application/json' + } + }) + .then((response) => response.json()) + .then((status) => console.log(status)) + .catch((error) => console.log(error)); + setHappyThought(''); + }; + return ( +
+

Happy Thoughts!

+
+

Textruta

+
+ + +
+
+ {!loading && thoughtsList.map((thought) => ( + + ))} + {loading &&

LOADING

} +
+
+
+
+ ); +}; + +export default HappyThoughtsFeed; diff --git a/code/src/index.css b/code/src/index.css index 4a1df4db7..7c94ce644 100644 --- a/code/src/index.css +++ b/code/src/index.css @@ -11,3 +11,32 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } + +.App { + font-family: sans-serif; + text-align: center; + margin-left: 25%; + margin-right: 25%; +} + +.happy-thoughts-form-wrapper { + display: flex; + align-self: center; + background: yellow; + width: auto; + height: 20rem; +} + +.happy-thoughts-wrapper { + display: flex; + align-self: center; + background: blue; + width: auto; + height: 20rem; +} + +.data-wrapper { + display: flex; + flex-direction: row; + justify-content: space-between; +} diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 000000000..0e0109b3f --- /dev/null +++ b/package-lock.json @@ -0,0 +1,20 @@ +{ + "name": "project-happy-thoughts", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "dependencies": { + "moment": "^2.29.4" + } + }, + "node_modules/moment": { + "version": "2.29.4", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz", + "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==", + "engines": { + "node": "*" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 000000000..29a0c7b8d --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "moment": "^2.29.4" + } +} From 5db29c053dbfa93efeec4f2fb5632f4ef56ac819 Mon Sep 17 00:00:00 2001 From: Ylva Karlsson <121539816+YlvaKarlsson@users.noreply.github.com> Date: Fri, 24 Mar 2023 22:31:45 +0100 Subject: [PATCH 02/12] Something is working --- code/src/Footer.js | 1 + code/src/HappyThought.js | 1 + code/src/HappyThoughtsFeed.js | 1 + code/src/index.js | 1 + 4 files changed, 4 insertions(+) diff --git a/code/src/Footer.js b/code/src/Footer.js index 51b366472..bb8b37f16 100644 --- a/code/src/Footer.js +++ b/code/src/Footer.js @@ -1,3 +1,4 @@ +/* eslint-disable linebreak-style */ import React from 'react'; const Footer = () => { diff --git a/code/src/HappyThought.js b/code/src/HappyThought.js index 573a0fe7b..19e776991 100644 --- a/code/src/HappyThought.js +++ b/code/src/HappyThought.js @@ -1,3 +1,4 @@ +/* eslint-disable linebreak-style */ import React, { useState } from 'react'; import moment from 'moment'; diff --git a/code/src/HappyThoughtsFeed.js b/code/src/HappyThoughtsFeed.js index b53dd279a..16f54fae5 100644 --- a/code/src/HappyThoughtsFeed.js +++ b/code/src/HappyThoughtsFeed.js @@ -1,3 +1,4 @@ +/* eslint-disable linebreak-style */ /* eslint-disable import/no-named-as-default */ /* eslint-disable no-trailing-spaces */ import React, { useState, useEffect } from 'react'; diff --git a/code/src/index.js b/code/src/index.js index ec9ad93c9..c9a11c1c4 100644 --- a/code/src/index.js +++ b/code/src/index.js @@ -1,3 +1,4 @@ +/* eslint-disable linebreak-style */ import React from 'react'; import { createRoot } from 'react-dom/client'; import './index.css'; From 046197313358fc71270b43f1a59a9c955d4337a1 Mon Sep 17 00:00:00 2001 From: Ylva Karlsson <121539816+YlvaKarlsson@users.noreply.github.com> Date: Fri, 24 Mar 2023 22:47:09 +0100 Subject: [PATCH 03/12] And again --- code/src/HappyThought.js | 18 +++--------------- 1 file changed, 3 insertions(+), 15 deletions(-) diff --git a/code/src/HappyThought.js b/code/src/HappyThought.js index 19e776991..ae97697d7 100644 --- a/code/src/HappyThought.js +++ b/code/src/HappyThought.js @@ -1,27 +1,15 @@ /* eslint-disable linebreak-style */ -import React, { useState } from 'react'; +import React from 'react'; import moment from 'moment'; +// {props.text} const HappyThought = (props) => { - const [hearts, setHearts] = useState(props.hearts); // initialize state with the number of likes - - const handleLike = () => { - fetch(`https:///thoughts/${props.id}/like`, { // send a POST request to your API endpoint to increase the number of likes for this thought - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ increment: 1 }) - }) - .then((response) => response.json()) - .then((data) => setHearts(data.hearts)); // update the state with the new number of likes - }; - return (

{props.text}

- x{hearts} - {/* update the number of likes with the state value */} +

❤️x{props.hearts}

{moment(props.timestamp).startOf('hour').fromNow()}

From 5cf620bb527f7860f7d716a3da684e1069b94516 Mon Sep 17 00:00:00 2001 From: Ylva Karlsson <121539816+YlvaKarlsson@users.noreply.github.com> Date: Fri, 24 Mar 2023 23:38:40 +0100 Subject: [PATCH 04/12] added a component for new happy thought but now the app isn't working, will do more tomorrow --- code/src/HappyThought.js | 54 +++++++++++++++++++++++++++++------ code/src/HappyThoughtsFeed.js | 2 ++ code/src/NewHappyThought.js | 35 +++++++++++++++++++++++ code/src/index.css | 25 ++++++++++++++++ 4 files changed, 107 insertions(+), 9 deletions(-) create mode 100644 code/src/NewHappyThought.js diff --git a/code/src/HappyThought.js b/code/src/HappyThought.js index ae97697d7..a4e753496 100644 --- a/code/src/HappyThought.js +++ b/code/src/HappyThought.js @@ -1,22 +1,58 @@ /* eslint-disable linebreak-style */ +/* eslint-disable padded-blocks */ +/* eslint-disable no-trailing-spaces */ import React from 'react'; import moment from 'moment'; // {props.text} -const HappyThought = (props) => { +// const HappyThought = (props) => { +const HappyThought = ({ thoughtId, messageText, hearts, timestamp, onHeartClick }) => { + + const heartButtonGrey = ( + + ); + + const heartButtonPink = ( + + ); + return ( -
-

{props.text}

-
-
-

❤️x{props.hearts}

+
+

{messageText}

+
+
+ {hearts !== 0 ? heartButtonPink : heartButtonGrey} + x {hearts}
-
-

{moment(props.timestamp).startOf('hour').fromNow()}

+
+

{moment(timestamp).startOf('hour').fromNow()}

-
+
); + // return ( + //
+ //

{props.text}

+ //
+ //
+ //

❤️x{props.hearts}

+ //
+ //
+ //

{moment(props.timestamp).startOf('hour').fromNow()}

+ //
+ //
+ //
+ // ); }; export default HappyThought; diff --git a/code/src/HappyThoughtsFeed.js b/code/src/HappyThoughtsFeed.js index 16f54fae5..fc221f674 100644 --- a/code/src/HappyThoughtsFeed.js +++ b/code/src/HappyThoughtsFeed.js @@ -2,6 +2,7 @@ /* eslint-disable import/no-named-as-default */ /* eslint-disable no-trailing-spaces */ import React, { useState, useEffect } from 'react'; +import NewHappyThought from 'NewHappyThought'; import HappyThought from './HappyThought'; import Footer from './Footer'; import './index.css'; @@ -53,6 +54,7 @@ const HappyThoughtsFeed = () => { onChange={handleChange} /> +
{!loading && thoughtsList.map((thought) => ( { + const isSubmitButtonDisabled = newHappyThought.length < 5 || newHappyThought.length > 140; + + return ( +
+