feat: Implement like and dislike buttons logic

Author: JanefrancessC

chat-app/.gitignore

@@ -1 +1,2 @@
 node_modules/
+.DS_Store

chat-app/README.md

@@ -7,9 +7,10 @@ https://sdc.codeyourfuture.io/decomposition/sprints/2/prep/
 You must complete and deploy a chat application. You have two weeks to complete this.
 
 It must support at least the following requirements:
-* As a user, I can send add a message to the chat.
-* As a user, when I open the chat I see the messages that have been sent by any user.
-* As a user, when someone sends a message, it gets added to what I see.
+
+- As a user, I can send add a message to the chat.
+- As a user, when I open the chat I see the messages that have been sent by any user.
+- As a user, when someone sends a message, it gets added to what I see.
 
 It must also support at least one additional feature.
 
@@ -27,8 +28,8 @@ Exploring and understanding different ways of sending information between a clie
 
 ### How to submit
 
-* Fork the Module-Decomposition repository
-* Develop and deploy your chat app
-* Create a pull request back into the original Module-Decomposition repo, including:
-    * A link to the deployed frontend on the CYF hosting environment
-    * A link to the deployed backend on the CYF hosting environment
+- Fork the Module-Decomposition repository
+- Develop and deploy your chat app
+- Create a pull request back into the original Module-Decomposition repo, including:
+  - A link to the deployed frontend on the CYF hosting environment
+  - A link to the deployed backend on the CYF hosting environment

chat-app/backend/index.js

@@ -6,21 +6,31 @@ app.use(cors());
 app.use(express.json());
 
 const port = 3000;
+let nextMessageId = 1;
 const messages = [
   {
+    id: nextMessageId++,
     message: "Hello",
     user: "Jane",
     time: Date.now() - 6000,
+    likes: 1,
+    dislikes: 2,
   },
   {
+    id: nextMessageId++,
     message: "Hey",
     user: "John",
     time: Date.now() - 3000,
+    likes: 1,
+    dislikes: 2,
   },
   {
+    id: nextMessageId++,
     message: "Hi",
     user: "Bob",
     time: Date.now(),
+    likes: 1,
+    dislikes: 2,
   },
 ];
 const callbacksForNewMessages = [];
@@ -57,18 +67,47 @@ app.post("/messages", (req, res) => {
     return;
   }
 
-  messages.push({
+  const newMessage = {
+    id: nextMessageId++,
     message,
     user,
     time: Date.now(),
-  });
+    likes: 0,
+    dislikes: 0,
+  };
+
+  messages.push(newMessage);
   while (callbacksForNewMessages.length > 0) {
     const callback = callbacksForNewMessages.pop();
     callback([messages[messages.length - 1]]);
   }
   res.status(201).json({ success: true });
 });
 
+app.post("/messages/:id/like", (req, res) => {
+  const id = Number(req.params.id);
+  const message = messages.find((msg) => msg.id === id);
+
+  if (!message) {
+    res.status(404).json({ error: "Message not found" });
+    return;
+  }
+  message.likes++;
+  res.json(message);
+});
+
+app.post("/messages/:id/dislike", (req, res) => {
+  const id = Number(req.params.id);
+  const message = messages.find((msg) => msg.id === id);
+
+  if (!message) {
+    res.status(404).json({ error: "Message not found" });
+    return;
+  }
+  message.dislikes++;
+  res.json(message);
+});
+
 app.listen(port, () => {
   console.log(`Chat server listening on port ${port}`);
 });

chat-app/frontend/script.js

@@ -5,8 +5,8 @@ let messageEl = document.getElementById("message");
 let displayBox = document.getElementById("display-message");
 let feedbackEl = document.getElementById("feedback");
 
-const serverURL = `https://janefrancessc-chat-application-backend.hosting.codeyourfuture.io/messages`;
-// const serverURL = "http://127.0.0.1:3000/messages";
+// const serverURL = `https://janefrancessc-chat-application-backend.hosting.codeyourfuture.io/messages`;
+const serverURL = "http://127.0.0.1:3000/messages";
 const state = { messages: [] };
 let pollingMode = "regular";
 let longPoll = false;
@@ -19,7 +19,7 @@ pollingForm.addEventListener("change", (e) => {
   longPoll = pollingMode === "long";
 
   feedbackEl.innerHTML = `
-  <p>${longPoll ? "Using long polling" : "Using regular polling"}</p>
+  <p>${longPoll ? "Using long polling!" : "Using regular polling!"}</p>
   `;
   setTimeout(() => {
     feedbackEl.innerHTML = "";
@@ -60,7 +60,49 @@ async function keepFetchingMessages() {
   if (longPoll) {
     keepFetchingMessages();
   } else {
-    setTimeout(keepFetchingMessages, 100);
+    setTimeout(keepFetchingMessages, 2000);
+  }
+}
+
+async function likeMessage(msgId) {
+  try {
+    const response = await fetch(`${serverURL}/${msgId}/like`, {
+      method: "POST",
+    });
+
+    if (!response.ok) {
+      feedbackEl.innerHTML = `<p>${await response.text()}</p>`;
+      return;
+    }
+    const updatedMessage = await response.json();
+
+    state.messages = state.messages.map((msg) =>
+      msg.id === updatedMessage.id ? updatedMessage : msg,
+    );
+    displayMessages();
+  } catch (error) {
+    console.error(error.message);
+  }
+}
+
+async function dislikeMessage(msgId) {
+  try {
+    const response = await fetch(`${serverURL}/${msgId}/dislike`, {
+      method: "POST",
+    });
+
+    if (!response.ok) {
+      feedbackEl.innerHTML = `<p>${await response.text()}</p>`;
+      return;
+    }
+    const updatedMessage = await response.json();
+
+    state.messages = state.messages.map((msg) =>
+      msg.id === updatedMessage.id ? updatedMessage : msg,
+    );
+    displayMessages();
+  } catch (error) {
+    console.error(error.message);
   }
 }
 
@@ -73,6 +115,8 @@ function displayMessages() {
                 <strong>${msg.user}: ${msg.message} </strong>
                 <small>${new Date(msg.time).toLocaleString()}</small>
             </p>
+            <button onclick="likeMessage(${msg.id})">${msg.likes} 👍 </button>
+            <button onclick="dislikeMessage(${msg.id})">${msg.dislikes} 👎 </button>
             </div>
         `,
     )