From d2b9ff9c0bd685a0c08eb5ad0917fde931abdb6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20Cora=C3=A7=C3=A3o?= <nunocoracao@gmail.com>
Date: Tue, 11 Oct 2022 00:09:30 +0100
Subject: [PATCH] fixed bug with like button

---
 layouts/_default/single.html            | 24 ++++++++++++++----------
 layouts/partials/meta/likes_button.html |  7 +++++--
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 16b0fa4b..bba6fff9 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -63,20 +63,23 @@
 
           if (liked) {
             liked_article = true
-            document.querySelectorAll("button[id='likes_button']")[0].textContent = "Remove Like"
+            document.querySelectorAll("span[id='likes_button_heart']")[0].style.display = ""
+            document.querySelectorAll("span[id='likes_button_emtpty_heart']")[0].style.display = "none"
+            document.querySelectorAll("span[id='likes_button_text']")[0].innerText = "Remove Like"
           }
 
         }
 
         function like_article(id_likes) {
-          console.log("add")
-          liked_article = true
-          localStorage.setItem(id_likes, true);
-          document.querySelectorAll("button[id='likes_button']")[0].innerText = "Remove Like"
           auth.signInAnonymously()
             .then(() => {
               var docRef = db.collection('likes').doc(id_likes)
               docRef.get().then((doc) => {
+                liked_article = true
+                localStorage.setItem(id_likes, true);
+                document.querySelectorAll("span[id='likes_button_heart']")[0].style.display = ""
+                document.querySelectorAll("span[id='likes_button_emtpty_heart']")[0].style.display = "none"
+                document.querySelectorAll("span[id='likes_button_text']")[0].innerText = "Remove Like"
                 if (doc.exists) {
                   db.collection('likes').doc(id_likes).update({
                     likes: firebase.firestore.FieldValue.increment(1)
@@ -96,14 +99,15 @@
         }
 
         function remove_like_article(id_likes) {
-          console.log("remove")
-          liked_article = false
-          localStorage.removeItem(id_likes);
-          document.querySelectorAll("button[id='likes_button']")[0].innerText = "Like"
           auth.signInAnonymously()
             .then(() => {
               var docRef = db.collection('likes').doc(id_likes)
               docRef.get().then((doc) => {
+                liked_article = false
+                localStorage.removeItem(id_likes);
+                document.querySelectorAll("span[id='likes_button_heart']")[0].style.display = "none"
+                document.querySelectorAll("span[id='likes_button_emtpty_heart']")[0].style.display = ""
+                document.querySelectorAll("span[id='likes_button_text']")[0].innerText = "Like"
                 if (doc.exists) {
                   db.collection('likes').doc(id_likes).update({
                     likes: firebase.firestore.FieldValue.increment(-1)
@@ -151,4 +155,4 @@
     {{ end }}
   </footer>
 </article>
-{{ end }}
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/meta/likes_button.html b/layouts/partials/meta/likes_button.html
index bfdc264d..7747f8ef 100644
--- a/layouts/partials/meta/likes_button.html
+++ b/layouts/partials/meta/likes_button.html
@@ -5,10 +5,13 @@
 
 
     <button id="likes_button"
-        style="height: 24px; padding-top: 0;"
+        style="height: 24px; padding-top: 0px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px"
         class="!rounded-md bg-primary-600 px-4 py-2 !text-neutral !no-underline hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
         onclick="process_article()">
-        {{ partial "icon.html" "like" }} 
+        <span id="likes_button_heart" style="display:none">{{ partial "icon.html" "heart" }} </span>
+        <span id="likes_button_emtpty_heart">{{ partial "icon.html" "heart-empty" }}</span>
+        &nbsp;
+        <span id="likes_button_text">Like</span>
     </button>
 
 </span>