Alternative flagging solution with buttons

Author: S-Warmenhoven

public/scripts/main.js

@@ -237,7 +237,7 @@ function renderMessages(messages = []) {
           <strong>${message.id}</strong>
           ${message.username} -
           ${message.body}
-          <i data-id="${message.id}" data-flagged="${message.flagged}" class="flag-button fa fa-lg fa-flag${message.flagged ? "" : "-o"}"></i>
+          <button data-id="${message.id}" data-flagged="${message.flagged}" class="flag-button" style="background:${message.flagged ? 'lightblue' : 'yellow'}">Flag</button>
         </p>
         <button data-id="${message.id}" class="delete-button">
           Delete
@@ -293,6 +293,7 @@ document.addEventListener('DOMContentLoaded', () => {
   // This is called event delegation.
   messagesUl.addEventListener('click', event => {
     const { target } = event;
+    const flagButton = target.closest('.flag-button')
 
     if (target.matches('.delete-button')) {
       event.preventDefault();
@@ -302,13 +303,22 @@ document.addEventListener('DOMContentLoaded', () => {
       });
     }
 
-    if (target.matches('.flag-button')) {
-        event.preventDefault();
-        const messageId = target.getAttribute('data-id');
-        const flagged = target.getAttribute('data-flagged') === "false";
-        updateMessage({ flagged }, messageId).then(() => {
-          refreshMessages(messagesUl);
-        });
+
+    if (flagButton) {
+        const messageId = target.getAttribute('data-id')
+        let messageFlagged = target.getAttribute('data-flagged');
+        
+        if (messageFlagged === 'false'){
+            event.preventDefault();
+            updateMessage({ "flagged": true }, messageId).then(() => {
+            refreshMessages(messagesUl);
+            });
+        } else {
+            event.preventDefault();
+            updateMessage({ "flagged": false }, messageId).then(() => {
+            refreshMessages(messagesUl);
+            });
+        }
     }
 
   });

public/stylesheets/main.css

@@ -66,3 +66,11 @@ input[type='submit'] {
   background-color: #e67e22;
   color: #fff;
 } 
+
+.flag-button blue {
+  background: blue;
+}
+
+.flag-button green {
+  background: green;
+}