Liked messages

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@tailwindcss/vite": "^4.1.5",
     "framer-motion": "^12.10.3",
+    "jwt-decode": "^4.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.6.2",

src/components/Form.jsx

@@ -1,5 +1,8 @@
 import React, { useState } from "react";
 
+const url = "https://api-project-ns11.onrender.com";
+// const url = "http://localhost:8080";
+
 const Form = ({ setMessages }) => {
   const [message, setMessage] = useState("");
   const [errorMessage, setErrorMessage] = useState("");
@@ -23,17 +26,14 @@ const Form = ({ setMessages }) => {
     try {
       const token = localStorage.getItem("token"); // or wherever you store the JWT
 
-      const response = await fetch(
-        "https://api-project-ns11.onrender.com/thoughts",
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            Authorization: `Bearer ${token}`, // include token here
-          },
-          body: JSON.stringify(newMessage),
-        }
-      );
+      const response = await fetch(`${url}/thoughts`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`, // include token here
+        },
+        body: JSON.stringify(newMessage),
+      });
 
       if (!response.ok) {
         throw new Error("Failed to post message");

src/components/LikedMessages.jsx

@@ -16,18 +16,18 @@ const getUserFromToken = () => {
   }
 };
 
-const LikedMessages = (props) => {
+const LikedMessages = ({ messages, onUpdateLike }) => {
   const [likedMessages, setLikedMessages] = useState([]);
 
   useEffect(() => {
     const currentUser = getUserFromToken();
     if (!currentUser) return;
 
-    const likedMessages = props.messages.filter((message) =>
+    const likedMessages = messages.filter((message) =>
       message.likedBy?.includes(currentUser)
     );
     setLikedMessages(likedMessages);
-  }, [props.messages]);
+  }, [messages]);
 
   return (
     <div className="mb-20">
@@ -50,6 +50,7 @@ const LikedMessages = (props) => {
                 message={message.message}
                 time={message.createdAt}
                 likes={message.hearts}
+                onUpdateLike={onUpdateLike}
               />
             ))
           ) : (

src/components/Message.jsx

@@ -1,101 +1,100 @@
-import React, { useEffect, useState } from "react";
-
-const Message = ({ id, message, time, likes, onDelete, onUpdate }) => {
-  const thoughtIdUrl = `https://api-project-ns11.onrender.com/thoughts/${id}/like`;
+import { jwtDecode } from "jwt-decode";
+import { useEffect, useState } from "react";
+
+const url = "https://api-project-ns11.onrender.com";
+// const url = "http://localhost:8080";
+
+const Message = ({
+  id,
+  message,
+  time,
+  likes,
+  onDelete,
+  onUpdate,
+  onUpdateLike,
+}) => {
+  const thoughtIdUrl = `${url}/thoughts/${id}/like`;
 
   const [liked, setLiked] = useState(false);
   const [likeCount, setLikeCount] = useState(likes);
 
   useEffect(() => {
-    const likedMessages =
-      JSON.parse(localStorage.getItem("likedMessages")) || [];
-    if (likedMessages.includes(id)) {
-      setLiked(true);
-    }
-  }, [id]);
+    const fetchLikedStatus = async () => {
+      try {
+        const token = localStorage.getItem("token");
+        if (!token) return;
 
-  const handleLike = async () => {
-    try {
-      const token = localStorage.getItem("token");
+        const decoded = jwtDecode(token);
+        const userId = decoded.id;
 
-      let response;
-      if (liked) {
-        response = await fetch(thoughtIdUrl, {
-          method: "DELETE",
-          headers: {
-            "Content-Type": "application/json",
-            Authorization: `Bearer ${token}`,
-          },
-        });
-        if (!response.ok) throw new Error("Failed to unlike");
-
-        const likedMessages =
-          JSON.parse(localStorage.getItem("likedMessages")) || [];
-        const updatedLikedMessages = likedMessages.filter(
-          (currentId) => currentId !== id
-        );
-        localStorage.setItem(
-          "likedMessages",
-          JSON.stringify(updatedLikedMessages)
-        );
-
-        setLiked(false);
-        setLikeCount((count) => count - 1);
-      } else {
-        response = await fetch(thoughtIdUrl, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            Authorization: `Bearer ${token}`,
-          },
+        const res = await fetch(`${url}/thoughts/liked/${userId}`, {
+          headers: { Authorization: `Bearer ${token}` },
         });
-        if (!response.ok) throw new Error("Failed to like");
 
-        const likedMessages =
-          JSON.parse(localStorage.getItem("likedMessages")) || [];
-        likedMessages.push(id);
-        localStorage.setItem("likedMessages", JSON.stringify(likedMessages));
+        if (!res.ok) throw new Error("Failed to fetch liked thoughts");
+        const data = await res.json();
 
-        setLiked(true);
-        setLikeCount((count) => count + 1);
+        const likedIds = data.response.map((t) => t._id);
+        setLiked(likedIds.includes(id)); // true if this thought is liked
+      } catch (err) {
+        console.error(err);
       }
-    } catch (error) {
-      console.error(error);
-    }
-  };
+    };
 
-  const handleDelete = async () => {
+    fetchLikedStatus();
+  }, [id]);
+
+  const handleLike = async () => {
     try {
-      const response = await fetch(
-        `https://api-project-ns11.onrender.com/thoughts/${id}`,
-        {
-          method: "DELETE",
-        }
-      );
+      const token = localStorage.getItem("token");
+
+      const response = await fetch(thoughtIdUrl, {
+        method: liked ? "DELETE" : "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      });
 
       if (!response.ok) {
-        const data = await response.json();
-        alert("Delete failed: " + data.message);
-        return;
+        const errData = await response.json();
+        throw new Error(errData.message || "Failed to like/unlike");
       }
 
-      onDelete(id);
+      const data = await response.json();
+      setLiked(!liked);
+      setLikeCount(data.thought.hearts);
+
+      // Notify parent to update messages state
+      onUpdateLike(id, data.thought.likedBy, data.thought.hearts);
     } catch (error) {
-      console.error(error);
-      alert("Delete request failed");
+      console.error("Error liking/unliking:", error.message);
     }
   };
 
+  const handleDelete = () => {
+    const confirmDelete = window.confirm(
+      "Are you sure you want to delete this message?"
+    );
+    if (!confirmDelete) return;
+
+    onDelete(id);
+  };
+
   const handleUpdate = async (newMessage) => {
+    if (!newMessage || newMessage.trim() === "") return;
+
     try {
-      const response = await fetch(
-        `https://api-project-ns11.onrender.com/thoughts/${id}`,
-        {
-          method: "PATCH",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ message: newMessage }),
-        }
-      );
+      const token = localStorage.getItem("token");
+
+      const response = await fetch(`${url}/thoughts/${id}`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({ newMessage }),
+      });
 
       if (!response.ok) {
         const data = await response.json();
@@ -160,6 +159,8 @@ const Message = ({ id, message, time, likes, onDelete, onUpdate }) => {
         <button
           onClick={() => {
             const newMessage = prompt("Enter new message:", message);
+            console.log("Updating message to:", newMessage);
+
             if (newMessage && newMessage.trim() !== "") {
               handleUpdate(newMessage);
             }

src/components/Messages.jsx

@@ -2,7 +2,7 @@ import { motion } from "framer-motion";
 
 import Message from "./Message";
 
-const Messages = ({ messages, onDelete, onUpdate }) => {
+const Messages = ({ messages, onDelete, onUpdate, onUpdateLike }) => {
   return (
     <div className="flex flex-col gap-12 mb-12">
       <h2 className="font-sans mb-6 text-2xl text-pink-500">Latest Messages</h2>
@@ -20,6 +20,7 @@ const Messages = ({ messages, onDelete, onUpdate }) => {
             likes={message.hearts}
             onDelete={onDelete}
             onUpdate={onUpdate}
+            onUpdateLike={onUpdateLike}
           />
         </motion.div>
       ))}

src/pages/Login.jsx

@@ -1,6 +1,9 @@
 import { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 
+const url = "https://api-project-ns11.onrender.com";
+// const url = "http://localhost:8080";
+
 const Login = () => {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
@@ -10,17 +13,36 @@ const Login = () => {
 
   const handleLogin = async (e) => {
     e.preventDefault();
+
+    const trimmedEmail = email.trim();
+    const trimmedPassword = password.trim();
+
+    const emailRegex = /^\S+@\S+\.\S+$/;
+    if (!trimmedEmail) {
+      setError("Email is required.");
+      return;
+    }
+    if (!emailRegex.test(trimmedEmail)) {
+      setError("Please enter a valid email address.");
+      return;
+    }
+    if (!trimmedPassword) {
+      setError("Password is required.");
+      return;
+    }
+
+    setError("");
     setIsLoading(true);
 
     try {
-      const response = await fetch(
-        "https://api-project-ns11.onrender.com/auth/login",
-        {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ email, password }),
-        }
-      );
+      const response = await fetch(`${url}/auth/login`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          email: trimmedEmail,
+          password: trimmedPassword,
+        }),
+      });
 
       const data = await response.json();
 
@@ -29,7 +51,6 @@ const Login = () => {
       }
 
       localStorage.setItem("token", data.token);
-
       navigate("/app");
     } catch (error) {
       setError(error.message);
@@ -40,7 +61,7 @@ const Login = () => {
 
   return (
     <div className="flex items-center justify-center py-10 px-4">
-      <div className="w-full max-w-[500px] rounded-md bg-white p-8 ">
+      <div className="w-full max-w-[500px] rounded-md bg-white p-8">
         <h2 className="mb-6 text-center font-sans text-4xl font-bold text-pink-500">
           Log in
         </h2>
@@ -60,6 +81,7 @@ const Login = () => {
               id="email"
               className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-pink-500 focus:outline-none focus:ring-1 focus:ring-pink-500"
               placeholder="[email protected]"
+              value={email}
               onChange={(e) => setEmail(e.target.value)}
             />
           </div>
@@ -75,12 +97,13 @@ const Login = () => {
               id="password"
               className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-pink-500 focus:outline-none focus:ring-1 focus:ring-pink-500"
               placeholder="••••••••"
+              value={password}
               onChange={(e) => setPassword(e.target.value)}
             />
           </div>
           <button
             type="submit"
-            className="self-start flex items-center justify-center gap-1 px-3 py-2 border-none rounded-[15px] bg-pink-200 font-bold text-sm cursor-pointer  hover:bg-pink-300 transition"
+            className="self-start flex items-center justify-center gap-1 px-3 py-2 border-none rounded-[15px] bg-pink-200 font-bold text-sm cursor-pointer hover:bg-pink-300 transition"
           >
             Log In
           </button>