From 73951f1d9bb5e45a62ea6e25c94a37648519dac6 Mon Sep 17 00:00:00 2001 From: Jenny Date: Wed, 23 Oct 2024 17:29:51 +0200 Subject: [PATCH 1/9] thoughts in list added + submit thought form inplemented --- index.html | 2 + src/App.jsx | 40 ++++++++++++++- src/components/ListThoughts.jsx | 12 +++++ src/components/SubmitThought.jsx | 46 +++++++++++++++++ src/components/ThoughtCard.jsx | 12 +++++ src/index.css | 87 ++++++++++++++++++++++++++++++++ src/main.jsx | 2 + 7 files changed, 199 insertions(+), 2 deletions(-) create mode 100644 src/components/ListThoughts.jsx create mode 100644 src/components/SubmitThought.jsx create mode 100644 src/components/ThoughtCard.jsx diff --git a/index.html b/index.html index 21cce4e0..be63ba5b 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,5 @@ + + diff --git a/src/App.jsx b/src/App.jsx index 1091d431..c64d9545 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,3 +1,39 @@ +// App.jsx + +import './index.css'; +import { ListThoughts } from "./components/ListThoughts"; +import { SubmitThought } from './components/SubmitThought'; +import { useState, useEffect } from 'react'; + export const App = () => { - return
Find me in src/app.jsx!
; -}; + const [thoughts, setThoughts] = useState([]); + + const handleNewThought = (newThought) => { + setThoughts(prevThoughts => [newThought, ...prevThoughts]); + }; + + useEffect(() => { + fetch('https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts') + .then((res) => res.json()) + .then((json) => { + setThoughts(json); + }); + }, []); + + return ( +
+
+

Project Happy Thoughts

+

Made by Jenny Andersén

+
+ +
+ +
+ +
+ +
+
+ ); +}; \ No newline at end of file diff --git a/src/components/ListThoughts.jsx b/src/components/ListThoughts.jsx new file mode 100644 index 00000000..c066105a --- /dev/null +++ b/src/components/ListThoughts.jsx @@ -0,0 +1,12 @@ +// ListThoughts.jsx +import { ThoughtCard } from './ThoughtCard'; + +export const ListThoughts = ({ thoughts }) => { + return (
+ {/* We'll add the form component here */} + {thoughts.map((thought) => ( + + ))} +
+ ); +}; \ No newline at end of file diff --git a/src/components/SubmitThought.jsx b/src/components/SubmitThought.jsx new file mode 100644 index 00000000..dc293feb --- /dev/null +++ b/src/components/SubmitThought.jsx @@ -0,0 +1,46 @@ +// SubmitThought.jsx + +// First, we import what we need +import { useState } from 'react'; // We need useState to handle the input value + +// Create the component that receives onSubmit as a prop from App.jsx +export const SubmitThought = ({ onSubmit }) => { + // Create a state variable 'message' and a function to update it 'setMessage' + // Initially the message is an empty string '' + const [message, setMessage] = useState(''); + + // This function runs when the form is submitted + const handleSubmit = (event) => { + event.preventDefault(); // Prevents the page from refreshing when form is submitted + + // Make a POST request to the API + fetch('https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts', { + method: 'POST', // Specify that this is a POST request + headers: { + 'Content-Type': 'application/json' // Tell the API we're sending JSON + }, + body: JSON.stringify({ message: message }) // Convert our message to JSON + }) + .then(res => res.json()) // Convert the API response to JSON + .then(newThought => { + setMessage(''); // Clear the input field + onSubmit(newThought); // Send the new thought back to App.jsx to update the list + }); + }; + + // The JSX (HTML) that will be rendered + return ( +
+

What's making you happy right now?

+