Enable flagging with an icon

S-Warmenhoven · S-Warmenhoven · commit bbf1c030cb1c · 2021-05-12T18:30:23.000-07:00
diff --git a/public/scripts/main.js b/public/scripts/main.js
@@ -218,6 +218,16 @@ function createMessage(message) {
   });
 }
 
+function updateMessage(message, id) {
+    return fetch(`/messages/${id}`, {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(message)
+    });
+  }
+
 function renderMessages(messages = []) {
   return messages
     .map(
@@ -227,6 +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>
         </p>
         <button data-id="${message.id}" class="delete-button">
           Delete
@@ -290,6 +301,16 @@ document.addEventListener('DOMContentLoaded', () => {
         refreshMessages(messagesUl);
       });
     }
+
+    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);
+        });
+    }
+
   });
 });
 
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
@@ -3,6 +3,7 @@
   <head>
     <title>Chatr Express</title>
     <link rel="stylesheet" href="/stylesheets/main.css" />
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script type="text/javascript" src="/scripts/main.js"></script>
   </head>
