Technigo · christina-baldwin · Apr 29, 2025 · Apr 29, 2025 · Apr 29, 2025 · Apr 29, 2025
diff --git a/index.html b/index.html
@@ -2,15 +2,28 @@
 <html lang="en">
   <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" />
+
+    <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=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
+      rel="stylesheet"
+    />
+    <link href="/src/index.css" rel="stylesheet" />
+
     <title>Happy Thoughts</title>
   </head>
   <body>
     <div id="root"></div>
+    <script type="module" src="./src/main.jsx"></script>
     <script
       type="module"
-      src="./src/main.jsx">
-    </script>
+      src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"
+    ></script>
+    <script
+      nomodule
+      src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"
+    ></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -10,18 +10,26 @@
     "preview": "vite preview"
   },
   "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-dom": "^19.0.0",
+    "react-router-dom": "^7.6.2",
+    "styled-components": "^6.1.17"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.21",
     "eslint": "^9.21.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^15.15.0",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^4.1.5",
     "vite": "^6.2.0"
   }
 }
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,5 +1,18 @@
+import Landing from "./pages/Landing";
+import Login from "./pages/Login";
+import Main from "./pages/Main";
+import Register from "./pages/Register";
+import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
+
 export const App = () => {
   return (
-    <h1>Happy Thoughts</h1>
-  )
-}
+    <Router>
+      <Routes>
+        <Route path="/" element={<Landing />} />
+        <Route path="/register" element={<Register />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/app" element={<Main />} />
+      </Routes>
+    </Router>
+  );
+};
diff --git a/src/components/Form.jsx b/src/components/Form.jsx
@@ -0,0 +1,89 @@
+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("");
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const newMessage = { message };
+
+    if (message.length === 0) {
+      setErrorMessage("Can't submit an empty message!");
+      return;
+    }
+
+    if (message.length > 140) {
+      setErrorMessage("Message can't be longer than 140 characters!");
+      return;
+    }
+
+    setErrorMessage("");
+
+    try {
+      const token = localStorage.getItem("token"); // or wherever you store the JWT
+
+      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");
+      }
+
+      const data = await response.json();
+      console.log("Message posted:", data);
+
+      setMessages((prev) => [data.response, ...prev]);
+
+      setMessage("");
+    } catch (error) {
+      console.error("Error posting message:", error);
+    }
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="flex flex-col justify-between gap-4 border border-black bg-[#f5f5f5] p-4 shadow-[4px_4px_0px_#000] mb-12"
+    >
+      <h1 className="text-base font-medium">
+        What is making you happy right now?
+      </h1>
+      <input
+        type="text"
+        onChange={(e) => setMessage(e.target.value)}
+        value={message}
+        className="font-mono h-[70px] px-2 text-sm font-normal border border-gray-400 rounded bg-white focus:outline-none focus:ring-2 focus:ring-pink-300"
+      />
+      <p
+        className={`text-sm mt-2 ${
+          message.length > 140 ? "text-red-500 text-sm mt-2" : "text-[#333]"
+        }`}
+      >
+        Character count: {message.length}
+      </p>
+      {errorMessage && (
+        <p className="text-red-500 text-sm mt-2">{errorMessage}</p>
+      )}
+      <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"
+      >
+        <ion-icon name="heart"></ion-icon>
+        Send Happy Thought
+        <ion-icon name="heart"></ion-icon>
+      </button>
+    </form>
+  );
+};
+
+export default Form;
diff --git a/src/components/LikedMessages.jsx b/src/components/LikedMessages.jsx
@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+
+import Message from "./Message";
+
+const getUserFromToken = () => {
+  const token = localStorage.getItem("token");
+  if (!token) return null;
+
+  try {
+    const base64Payload = token.split(".")[1];
+    const payload = JSON.parse(atob(base64Payload));
+    return payload.email || payload.id || null;
+  } catch (error) {
+    console.error("Invalid token", error);
+    return null;
+  }
+};
+
+const LikedMessages = ({ messages, onUpdateLike }) => {
+  const [likedMessages, setLikedMessages] = useState([]);
+
+  useEffect(() => {
+    const currentUser = getUserFromToken();
+    if (!currentUser) return;
+
+    const likedMessages = messages.filter((message) =>
+      message.likedBy?.includes(currentUser)
+    );
+    setLikedMessages(likedMessages);
+  }, [messages]);
+
+  return (
+    <div className="mb-20">
+      <div>
+        <h2 className="font-sans mb-6 text-2xl text-pink-500">
+          Liked Messages
+        </h2>
+        <div className="mb-4 text-right">
+          <h3 className="text-base text-gray-500 font-sans">
+            You have liked {likedMessages.length} message
+            {likedMessages.length === 1 ? "" : "s"}
+          </h3>
+        </div>
+        <div className="flex flex-col gap-12">
+          {likedMessages.length > 0 ? (
+            likedMessages.map((message) => (
+              <Message
+                key={message._id}
+                id={message._id}
+                message={message.message}
+                time={message.createdAt}
+                likes={message.hearts}
+                onUpdateLike={onUpdateLike}
+              />
+            ))
+          ) : (
+            <p>No liked messages.</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LikedMessages;