Update logic of message to support multilang

1 files changed, 44 insertions, 39 deletions

diff --git a/src/js/love.js b/src/js/love.js
index b99ea05..a375538 100644
--- a/src/js/love.js
+++ b/src/js/love.js
@@ -62,53 +62,58 @@ window.addEventListener('DOMContentLoaded', () => {
       }
     });
 
-    let messageText;
     icon.addEventListener('click', () => {
       const c = icon.children[1];
       const lang = getCurrentPageLang();
-      {
-        const path = c.querySelector('path');
-        console.log(path)
-        path.classList.add('anim-click');
-        path.getAnimations().forEach(anim => {
-          anim.cancel();
-          anim.play();
-        });
-
-        fetch(getLikeEndPoint(), {
-          method: 'POST',
-          headers: {
-            'i-love-what-you-do': '<3',
-            'lang': lang,
-          },
-        }).then(response => {
-          const currentText = messagesLike.textContent;
-          const t = response.text().then(text => {
-            messagesLike.textContent = text;
-            return text;
-          });
 
-          if (response.ok) {
-            messagesLike.classList.remove('err');
-            t.then(t => messageText = t);
-            updateNbLikes();
-          } else {
-            if (!messageText) {
-              messageText = currentText;
-            }
+      const path = c.querySelector('path');
+
+      path.classList.add('anim-click');
+      path.getAnimations().forEach(anim => {
+        anim.cancel();
+        anim.play();
+      });
+
+      fetch(getLikeEndPoint(), {
+        method: 'POST',
+        headers: {
+          'i-love-what-you-do': '<3',
+          'lang': lang,
+        },
+      }).then(response => {
+        const t = response.text();
+
+        if (response.ok) {
+          messagesLike.classList.remove('err');
+          t.then(t => messagesLike.textContent = t);
+          updateNbLikes();
+        } else {
+          t.then(t => {
+            // In case of error, we want to be able to set the initial message back
+            const currentText = messagesLike.textContent;
+            const timeoutErr = 3000;
 
+            // Set the error
             messagesLike.classList.add('err');
+            if (response.status / 100 == 4) {
+              messagesLike.textContent = t;
+            } else {
+              messagesLike.textContent = lang == 'fr' ? 'Désolé, le service est indisponible.' : 'Sorry, service unavailable.';
+            }
+
+            // Set the initial message back
             setTimeout(() => {
               messagesLike.classList.remove('err');
-              messagesLike.textContent = messageText;
-            }, 3000);
-          }
-        }).catch(() => {
-          messagesLike.classList.add('err');
-          messagesLike.textContent = lang == fr ? 'Désolé, le service est indisponible.' : 'Sorry, service unavailable.';
-          messageText = '';
-        });
-      }
+              messagesLike.textContent = currentText;
+            }, timeoutErr);
+          });
+        }
+      }).catch(() => {
+        // In case of exception error. We don't want to set back the initial message.
+        messagesLike.classList.add('err');
+        messagesLike.textContent = lang == 'fr' ? 'Désolé, le service est indisponible.' : 'Sorry, service unavailable.';
+        messageText = '';
+      });
     });
   }
 });