From 99b88a039a816a217a51e097e0ff64cc648ca405 Mon Sep 17 00:00:00 2001 From: Anna Date: Thu, 24 Oct 2024 14:48:13 +0200 Subject: [PATCH 01/41] added components for form, hearts and thought list and corresponding css files, fetched the thoughts data from API --- src/App.jsx | 47 +++++++++++++++++++++++++++++++- src/Components/ThoughtForm.jsx | 40 +++++++++++++++++++++++++++ src/Components/ThoughtHearts.jsx | 0 src/Components/ThoughtList.jsx | 18 ++++++++++++ src/Styles/ThoughtForm.css | 0 src/Styles/ThoughtList.css | 21 ++++++++++++++ 6 files changed, 125 insertions(+), 1 deletion(-) create mode 100644 src/Components/ThoughtForm.jsx create mode 100644 src/Components/ThoughtHearts.jsx create mode 100644 src/Components/ThoughtList.jsx create mode 100644 src/Styles/ThoughtForm.css create mode 100644 src/Styles/ThoughtList.css diff --git a/src/App.jsx b/src/App.jsx index 1091d431..8ff884df 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,3 +1,48 @@ +import { useState, useEffect } from 'react'; +// import { ThoughtForm } from './Components/ThoughtForm'; +import { ThoughtList } from './Components/ThoughtList'; + + +const BASE_URL = 'https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts'; + export const App = () => { - return
Find me in src/app.jsx!
; + const [thoughts, setThoughts] = useState([]); + const [isLoading, setIsLoading] = useState(true); // loading state + + useEffect(() => { + const fetchThoughts = async () => { + try { + const response = await fetch(BASE_URL); + const result = await response.json(); + setThoughts(result); + } catch (error) { + console.error('Error fetching data:', error); + } finally { + setIsLoading(false); + } + }; + fetchThoughts(); + }, []); + + return ( +
+ {isLoading &&

Loading...

} + {!isLoading && ( +
+ {/* */} + +
+ )} +
+ ); }; + + + +{/* /* //Planning of components + +// App Component: Main component that manages state and handles API calls. +// ThoughtList Component: Displays a list of thoughts. +// ThoughtForm Component: Form for adding new thoughts. +// ThoughtHearts Component: Displays each individual thought with a like button. Is also the child of the ThoughtLIst component. */ } + diff --git a/src/Components/ThoughtForm.jsx b/src/Components/ThoughtForm.jsx new file mode 100644 index 00000000..7c28ad44 --- /dev/null +++ b/src/Components/ThoughtForm.jsx @@ -0,0 +1,40 @@ +import { useState } from "react"; +import "../Styles/ThoughtForm.css"; + +export const ThoughtForm = () => { + + const [body, setBody] = useState(''); + const [response, setResponse] = (null); + + const handleSubmit = async (event) => { + event.preventDeafult() + const URL = "https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts" + + const response = await fetch(URL, { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify({ + body, + userId: 1 + }); + }) + const data = await response.json() + setResponse() + } + + return ( +
; +

What´s making you happy right now?

; +
; +