Update likebutton.js

resources/assets/js/components/likebutton.js

@@ -1,6 +1,29 @@
 $(document).ready(function() {
+
   if(!ls.get('likes')) {
-    ls.set('likes', []);
+    axios.get('/api/v1/likes')
+    .then(function (res) {
+      ls.set('likes', res.data);
+      console.log(res);
+    })
+    .catch(function (res) {
+      ls.set('likes', []);
+    })
+  }
+
+  hydrateLikes();
+
+  function hydrateLikes() {
+    var likes = ls.get('likes');
+    $('.like-form').each(function(i, el) {
+      var el = $(el);
+      var id = el.data('id');
+      var heart = el.find('.status-heart');
+
+      if(likes.indexOf(id) != -1) {
+        heart.addClass('fas fa-heart').removeClass('far fa-heart');
+      }
+    });
   }
 
   $('.like-form').submit(function(e) {
@@ -10,19 +33,26 @@ $(document).ready(function() {
     var res = axios.post('/i/like', {item: id});
     var likes = ls.get('likes');
     var action = false;
-    var counter = el.parent().parent().find('.like-count');
+    var counter = el.parents().eq(2).find('.like-count');
     var count = parseInt(counter.text());
+    var heart = el.find('.status-heart');
+
     if(likes.indexOf(id) > -1) {
-      likes.splice(id, 1);
-      count--;
+      heart.addClass('far fa-heart').removeClass('fas fa-heart');
+      likes = likes.filter(function(item) { 
+          return item !== id
+      });
+      count = count == 0 ? 0 : count--;
       counter.text(count);
       action = 'unlike';
     } else {
+      heart.addClass('fas fa-heart').removeClass('far fa-heart');
       likes.push(id);
       count++;
       counter.text(count);
       action = 'like';
     }
+
     ls.set('likes', likes);
     console.log(action + ' - ' + $(this).data('id') + ' like event');
   });