Technigo · cholpoun · Oct 27, 2024 · Oct 27, 2024 · Oct 27, 2024 · Oct 27, 2024
diff --git a/README.md b/README.md
@@ -4,6 +4,11 @@
   </a>
 </h1>
 
+### View it live
+
+https://happythoughtscholpon.netlify.app/
+
+
 # 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.
@@ -24,9 +29,7 @@ npm i && code . && npm run dev
 
 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
 

diff --git a/index.html b/index.html
@@ -3,11 +3,20 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Happy Thought - Project - Week 7</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>Happy Thoughts</title>
+    <link rel="stylesheet" href="/src/index.css" /> 
+
+
+ <!-- Font import -->
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Afacad+Flux:[email protected]&family=Cinzel:[email protected]&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
+
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>
-</html>
+</html>
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,3 +1,56 @@
-export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
-};
+import React, { useState, useEffect } from 'react';
+import ThoughtsList from './components/ThoughtsList';
+import ThoughtForm from './components/ThoughtForm';
+
+function App() {
+  const [thoughts, setThoughts] = useState([]);
+
+  useEffect(() => {
+    const fetchThoughts = async () => {
+      const response = await fetch('https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts');
+      const data = await response.json();
+      const sortedThoughts = data.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
+      setThoughts(sortedThoughts);
+    };
+
+    fetchThoughts();
+  }, []);
+
+  const addNewThought = (newThought) => {
+    setThoughts([newThought, ...thoughts]);
+  };
+
+
+  const handleLike = async (thoughtId) => {
+    try {
+      const response = await fetch(
+        `https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts/${thoughtId}/like`,
+        {
+          method: 'POST',
+        }
+      );
+
+      if (response.ok) {
+        setThoughts((prevThoughts) =>
+          prevThoughts.map((thought) =>
+            thought._id === thoughtId ? { ...thought, hearts: thought.hearts + 1 } : thought
+          )
+        );
+      } else {
+        console.error('Failed to like the thought');
+      }
+    } catch (error) {
+      console.error('Error:', error);
+    }
+  };
+
+  return (
+    <div className="App">
+      <h1>Happy Thoughts</h1>
+      <ThoughtForm onNewThought={addNewThought} />
+      <ThoughtsList thoughts={thoughts} onLike={handleLike} />
+    </div>
+  );
+}
+
+export default App;
diff --git a/src/components/ThoughtForm.jsx b/src/components/ThoughtForm.jsx
@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+
+const ThoughtForm = ({ onNewThought }) => {
+  const [message, setMessage] = useState('');
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+
+    if (message.length < 5 || message.length > 140) {
+      alert("Message must be between 5 and 140 characters.");
+      return;
+    }
+
+    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 send thought');
+
+      const newThought = await response.json();
+      onNewThought(newThought); 
+      setMessage(''); 
+    } catch (error) {
+      console.error('Error sending thought:', error);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="thought-form">
+      <textarea
+        value={message}
+        onChange={(e) => setMessage(e.target.value)}
+        placeholder="What's making you happy right now?"
+        rows="3"
+      />
+      <button type="submit">Post</button>
+    </form>
+  );
+};
+
+export default ThoughtForm;
diff --git a/src/components/ThoughtsList.jsx b/src/components/ThoughtsList.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+const ThoughtsList = ({ thoughts, onLike }) => {
+  return (
+    <div className="thoughts-list">
+      {thoughts.map((thought) => (
+        <div key={thought._id} className="thought">
+          <p>{thought.message}</p>
+          <div className="like-section">
+            <button className="like-button" onClick={() => onLike(thought._id)}>❤️</button>
+            <span className="like-count"> x {thought.hearts}</span>
+          </div>
+          <span className="timestamp">{new Date(thought.createdAt).toLocaleString()}</span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ThoughtsList;