Switch boost button, js

assets/controllers/subject_controller.js

@@ -8,7 +8,7 @@ import GLightbox from 'glightbox';
 /* stimulusFetch: 'lazy' */
 export default class extends Controller {
     static previewInit = false;
-    static targets = ['loader', 'more', 'container', 'commentsCounter', 'favCounter']
+    static targets = ['loader', 'more', 'container', 'commentsCounter', 'favCounter', 'upvoteCounter', 'downvoteCounter']
     static values = {
         loading: Boolean,
         isExpandedValue: Boolean
@@ -299,18 +299,21 @@ export default class extends Controller {
     }
 
     updateVotes(data) {
-        const upButton = this.element.querySelector('.vote__up button');
-        upButton.replaceChild(document.createTextNode(data.detail.up + ' '), upButton.firstChild);
+        this.upvoteCounterTarget.innerText = `(${data.detail.up})`;
 
-        const downButton = this.element.querySelector('.vote__down button');
-        if (downButton) {
-            downButton.replaceChild(document.createTextNode(data.detail.down + ' '), downButton.firstChild);
+        if(data.detail.up > 0) {
+            this.upvoteCounterTarget.classList.remove('hidden');
+        } else {
+            this.upvoteCounterTarget.classList.add('hidden');
+        }
+
+        if (this.hasDownvoteCounterTarget) {
+            this.downvoteCounterTarget.innerText = data.detail.down;
         }
     }
 
     updateFavourites(data) {
         if (this.hasFavCounterTarget) {
-            this.favCounterTarget.parentElement.classList.remove('hidden');
             this.favCounterTarget.innerText = data.detail.count;
         }
     }

config/kbin_api/magazine.yaml

@@ -1,8 +1,6 @@
 resources:
   App\DTO\MagazineDto:
     properties:
-      name:
-        identifier: true
     shortName: 'magazine'
     collectionOperations:
       get:

templates/base.html.twig

@@ -34,7 +34,7 @@
         </script>
         <script>
             window.KBIN_USER = "{{ app.user ? app.user.username : null }}";
-            window.KBIN_MAGAZINE = "{{ magazine is defined and magazine ? magazine.name : null }}"
+            window.KBIN_MAGAZINE = "{{ magazine is defined and magazine ? magazine.id : null }}"
             window.KBIN_ENTRY_ID = "{{ entry is defined and entry ? entry.id : null }}"
             window.KBIN_POST_ID = "{{ post is defined and post ? post.id : null }}"
         </script>

templates/components/boost.html.twig

@@ -6,8 +6,7 @@
     <button class="{{ html_classes('stretched-link', {'active': app.user and user_choice is same as(VOTE_UP) }) }}"
             type="submit"
             data-action="subject#favourite">
-        {{ 'up_vote'|trans|lower }} <span class="{{ html_classes({'hidden': not subject.countUpvotes}) }}">
-            (<span data-subject-target="favCounter">{{ subject.countUpvotes }}</span>)
-        </span>
+        {{ 'up_vote'|trans|lower }} <span class="{{ html_classes({'hidden': not subject.countUpvotes}) }}"
+                                          data-subject-target="upvoteCounter">({{ subject.countUpvotes }})</span>
     </button>
 </form>

templates/components/vote.html.twig

@@ -30,7 +30,7 @@
                 aria-label="{{ 'favourite'|trans }}"
                 data-action="subject#vote"
                 {{ html_classes({'disabled': app.user and subject.isAuthor(app.user)}) }}>
-            {{ subject.favouriteCount }} <span><i class="fa-solid fa-arrow-up"></i></span>
+            <span data-subject-target="favCounter">{{ subject.favouriteCount }}</span> <span><i class="fa-solid fa-arrow-up"></i></span>
         </button>
         <input type="hidden" name="token" value="{{ csrf_token('favourite') }}">
     </form>
@@ -45,7 +45,7 @@
                     aria-label="{{ 'down_vote'|trans }}"
                     data-action="subject#vote"
                     {{ html_classes('vote__up', {'disabled': app.user and subject.isAuthor(app.user)}) }}>
-                {{ subject.countDownvotes }} <span><i class="fa-solid fa-arrow-down"></i></span>
+                <span data-subject-target="downvoteCounter">{{ subject.countDownvotes }}</span> <span><i class="fa-solid fa-arrow-down"></i></span>
             </button>
             <input type="hidden" name="token" value="{{ csrf_token('vote') }}">
         </form>