diff --git a/README.md b/README.md index 6fc6d095..bea1ba8e 100644 --- a/README.md +++ b/README.md @@ -1,35 +1,20 @@ -

- - Project Banner Image - -

# Happy thoughts Project -In this week's project, you'll be able to practice your React state skills by fetching and posting data to an API. +We had to build an API to collect Happy Thoughts, making it look similar to X, amd make it as closer as possible to the original design -## Getting Started with the Project - -### Dependency Installation & Startup Development Server +### The Problem -Once cloned, navigate to the project's root directory and this project uses npm (Node Package Manager) to manage its dependencies. +First of all, we had to plan how the app should work, thinking how many components, the reason for each one, and the name, I decided to create 3 different components one for the message, another for the items, and a 3rd one for the list of comments that would be displayed. -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. +I had several problems starting with the planing, the logic was not very clear for me (and still), I got a lot og help from chatgpt -```bash -npm i && code . && npm run dev -``` +amother problem for me was the styling, but I managed to make it look almost exacly the same. -### The Problem +If I had more time I would try to make the Advanced stretch goals -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? ### 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. - -## Instructions - - - See instructions of this project - +Netlify link: +https://my-happy-thoughts-webby.netlify.app/ \ No newline at end of file diff --git a/api.js b/api.js new file mode 100644 index 00000000..e69de29b diff --git a/instructions.md b/instructions.md index 9016867c..4c5de379 100644 --- a/instructions.md +++ b/instructions.md @@ -13,7 +13,7 @@ To achieve this, we've built an API with three endpoints. Note that all of the t ## Fetch recent thoughts -`GET https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts` +`GET `https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts This will return the latest 20 thoughts from the API, looking something like this: diff --git a/src/App.jsx b/src/App.jsx index 1091d431..2c097008 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,3 +1,120 @@ +import React, { useEffect, useState } from "react"; +import "./index.css"; +import "./components/styleForm.css"; + +// API URL for fetching and posting thoughts +const API_URL = "https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts"; + export const App = () => { - return
Find me in src/app.jsx!
; -}; + const [thoughts, setThoughts] = useState([]); // Stores the list of thoughts + const [newThought, setNewThought] = useState(""); // Stores new thought input + const [error, setError] = useState(""); // Error message for input validation + const [likedThoughts, setLikedThoughts] = useState({}); // Tracks liked states + + // Fetch thoughts from API on component mount + useEffect(() => { + fetch(API_URL) + .then((response) => response.json()) + .then((data) => setThoughts(data)) + .catch((error) => console.error("Error fetching data:", error)); + }, []); + + // Handle form submission for a new thought + const handleFormSubmit = (event) => { + event.preventDefault(); + + // Validate input length + if (newThought.length < 5 || newThought.length > 140) { + setError("Message must be between 5 and 140 characters."); + return; + } + + setError(""); // Clear previous errors + + // Post new thought to the API + fetch(API_URL, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ message: newThought }), + }) + .then((response) => response.json()) + .then((data) => { + setThoughts([data, ...thoughts]); // Add new thought to the list + setNewThought(""); // Clear input field + }) + .catch((error) => { + console.error("Error posting thought:", error); + setError("Failed to post the thought. Please try again."); + }); + }; + + // Handle like button click for a thought + const handleLikeClick = (thoughtId) => { + const likeUrl = `${API_URL}/${thoughtId}/like`; + + fetch(likeUrl, { method: "POST" }) + .then((response) => response.json()) + .then((updatedThought) => { + // Update thought in the list + setThoughts((prevThoughts) => + prevThoughts.map((thought) => + thought._id === updatedThought._id ? updatedThought : thought + ) + ); + + // Toggle liked state for the thought + setLikedThoughts((prevLiked) => ({ + ...prevLiked, + [thoughtId]: !prevLiked[thoughtId], + })); + }) + .catch((error) => console.error("Error liking thought:", error)); + }; + + return ( +
+

Happy Thoughts

+ + {/* Thought submission form */} +
+ What's making you happy right now? + +