Refactor likes to use JS to avoid redirect

5 files changed, 17 insertions, 5 deletions

diff --git a/src/css/styles.css b/src/css/styles.css
index 88d8e68..4572569 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -147,6 +147,7 @@ p {
     vertical-align: middle;
     white-space: nowrap;
     text-decoration: none;
+    cursor: pointer;
 }
 
 .btn-primary {
@@ -232,7 +233,7 @@ a.navigation:visited, a.navigation:link {
     content: "@marks.kitchen";
 }
 
-a.cool {
+.cool {
     float: right;
 }
 
diff --git a/src/js/like.js b/src/js/like.js
new file mode 100644
index 0000000..cd1e015
--- /dev/null
+++ b/src/js/like.js
@@ -0,0 +1,11 @@
+function likePost(type, id){
+    fetch(`/post/like/${type}/${id}`)
+       .then(response => response.json())
+        .then(response => {
+          console.log(response)
+          let btn_id=`btn_${type}_${id}`
+          let el = document.getElementById(btn_id)
+          el.innerText = `👍 (${response.likes})`
+        })
+}
+
diff --git a/src/server.js b/src/server.js
index 07da08c..773feb0 100644
--- a/src/server.js
+++ b/src/server.js
@@ -153,7 +153,7 @@ function setUpRoutes(models, jwtFunctions, database, templates) {
             where: { type, id },
         });
         post.update({likes: post.likes+1})
-        res.redirect(`/post/${type}/${id}`);
+        res.status(200).send({likes: post.likes});
     })
     server.get('/tags/:name', async (req, res) => {
         const { name } = req.params;
diff --git a/src/templates/feed.html b/src/templates/feed.html
index ae3494c..3ea4f16 100644
--- a/src/templates/feed.html
+++ b/src/templates/feed.html
@@ -21,9 +21,9 @@
                 <a class="tag" href="/tags/{{this}}">{{this}}</a>
                 {{/each}}
             </span>
-            <a class="cool btn btn-secondary" href="/post/like/{{this.type}}/{{this.id}}">
+            <span class="cool btn btn-secondary" onclick="likePost('{{this.type}}', {{this.id}})" id="btn_{{this.type}}_{{this.id}}">
               &#128077; ({{this.likes}})
-            </a>
+            </span>
         </p>
     </div>
     {{/each}}
diff --git a/src/templates/header.html b/src/templates/header.html
index 2ceebfd..1989b04 100644
--- a/src/templates/header.html
+++ b/src/templates/header.html
@@ -2,4 +2,4 @@
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <link rel="icon" href="/favicon.svg">
 <link rel="alternate icon" href="/favicon.ico">
-
+<script src="/js/like.js"></script>