diff --git a/README.md b/README.md index 6fc6d095..269e48e8 100644 --- a/README.md +++ b/README.md @@ -8,25 +8,13 @@ In this week's project, you'll be able to practice your React state skills by fetching and posting data to an API. -## Getting Started with the Project - -### Dependency Installation & Startup Development Server - -Once cloned, navigate to the project's root directory and this project uses npm (Node Package Manager) to manage its dependencies. - -The command below is a combination of installing dependencies, opening up the project on VS Code and it will run a development server on your terminal. - -```bash -npm i && code . && npm run dev -``` - ### The Problem -Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? +I have used useState and useEffect hooks to handle state and API fetching and posting. I'm also using components to handle different parts of the app, the form component for posting and the thoughts list for reading previous posts. I'm happy with how it turned out! ### View it live -Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. +https://happii.netlify.app/ ## Instructions diff --git a/index.html b/index.html index 21cce4e0..5a8f1ccb 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,24 @@ - - - - - Happy Thought - Project - Week 7 - - -
- - - + + + + + + Happy Thought - Project + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index 1091d431..e7ea9982 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,3 +1,9 @@ +import HappyThoughtsApp from "./components/HappyApp" + + + export const App = () => { - return
Find me in src/app.jsx!
; + return <> + + ; }; diff --git a/src/components/Form.jsx b/src/components/Form.jsx new file mode 100644 index 00000000..7a3a4b16 --- /dev/null +++ b/src/components/Form.jsx @@ -0,0 +1,74 @@ +import { useState } from 'react'; +import PropTypes from 'prop-types'; + +const MessageForm = ({ onThoughtAdded }) => { + const [message, setMessage] = useState(''); + const [error, setError] = useState(''); + const [loading, setLoading] = useState(false); // New loading state for form submission + + const handleChange = (e) => { + setMessage(e.target.value); + setError(''); + }; + + const handleSubmit = async (e) => { + e.preventDefault(); + if (message.length < 1 || message.length > 140) { + setError('Message must be between 1 and 140 characters long.'); + return; + } + + setLoading(true); + + try { + const response = await fetch('https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ message }), + }); + + if (!response.ok) { + throw new Error('Failed to post the thought'); + } + + const data = await response.json(); + setMessage(''); + onThoughtAdded(data); + } catch (err) { + setError('An error occurred while posting the thought.'); + console.error(err); + } finally { + setLoading(false); + } + }; + + return ( +
+