From 986457f2df42a0db59611ca2f725a99a463abed6 Mon Sep 17 00:00:00 2001 From: AjmalZ Date: Thu, 23 Mar 2023 22:56:42 +0100 Subject: [PATCH 01/14] added a form with a button and list with fetched messages. --- code/.eslintrc.json | 4 +-- code/public/index.html | 24 +++++++++--------- code/src/App.js | 39 +++++++++++++++++++++++++++--- code/src/components/MessageCard.js | 12 +++++++++ code/src/components/ThoughtForm.js | 13 ++++++++++ code/src/components/ThoughtList.js | 14 +++++++++++ code/src/index.css | 13 ++++++++++ 7 files changed, 102 insertions(+), 17 deletions(-) create mode 100644 code/src/components/MessageCard.js create mode 100644 code/src/components/ThoughtForm.js create mode 100644 code/src/components/ThoughtList.js diff --git a/code/.eslintrc.json b/code/.eslintrc.json index c9c0675c3..263550e9c 100644 --- a/code/.eslintrc.json +++ b/code/.eslintrc.json @@ -54,7 +54,7 @@ "import/no-unresolved": "off", "import/prefer-default-export": "off", "indent": [ - "error", + "off", 2, { "SwitchCase": 1 @@ -128,4 +128,4 @@ "react-hooks/exhaustive-deps": "warn", "semi": "off" } -} +} \ No newline at end of file diff --git a/code/public/index.html b/code/public/index.html index e6730aa66..8281d14c1 100644 --- a/code/public/index.html +++ b/code/public/index.html @@ -1,10 +1,10 @@ - - - - - Technigo React App - + Happy thoughts + - - -
- - + - + \ No newline at end of file diff --git a/code/src/App.js b/code/src/App.js index f2007d229..0f8eb8e29 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,9 +1,42 @@ -import React from 'react'; +/* eslint-disable max-len */ +/* eslint-disable no-unused-vars */ +import React, { useState, useEffect } from 'react'; +import ThoughtList from 'components/ThoughtList'; +import ThoughtForm from 'components/ThoughtForm'; export const App = () => { + const [thoughts, setThoughts] = useState([]); + const [newThought, setNewThought] = useState('') + + const fetchMessage = () => { + fetch('https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts', { + method: 'GET' + }) + .then((res) => res.json()) + .then((data) => { + setThoughts(data) + }) + } + const sendMessage = (event) => { + event.preventDefault() + fetch('https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ message: newThought }) + }) + .then((res) => res.json()) + .then((data) => { + fetchMessage() + }) + } + useEffect(() => { + fetchMessage(); + }, []); + return (
- Find me in src/app.js! + +
); -} +} \ No newline at end of file diff --git a/code/src/components/MessageCard.js b/code/src/components/MessageCard.js new file mode 100644 index 000000000..4f5f8b0ee --- /dev/null +++ b/code/src/components/MessageCard.js @@ -0,0 +1,12 @@ +import React from 'react'; + +const MessageCard = ({ item }) => { + return ( +
+

{item.message}

+
{item.hearts}
+
+ ); +} + +export default MessageCard \ 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..fae44a994 --- /dev/null +++ b/code/src/components/ThoughtForm.js @@ -0,0 +1,13 @@ +import React from 'react'; + +const ThoughtForm = ({ newThought, setNewThought, onFormSubmit }) => { + return ( +
+

What makes you happy?

+