Use stimulus for bookmark toggling

Author: cbeer

app/components/blacklight/document/bookmark_component.html.erb

@@ -7,15 +7,16 @@
              method:  bookmarked? ? :delete : :put,
              class: "bookmark-toggle",
              data: {
-               'doc-id' => @document.id,
-               present: t('blacklight.search.bookmarks.present'),
-               absent: t('blacklight.search.bookmarks.absent'),
-               inprogress: t('blacklight.search.bookmarks.inprogress')
+              controller: 'blacklight--checkbox-submit',
+              'blacklight--checkbox-submit-present-value': t('blacklight.search.bookmarks.present'),
+              'blacklight--checkbox-submit-absent-value': t('blacklight.search.bookmarks.absent'),
+              'blacklight--checkbox-submit-inprogress-value': t('blacklight.search.bookmarks.inprogress'),
+              'doc-id' => @document.id
             }) do %>
   <div class="checkbox toggle-bookmark">
-    <label class="toggle-bookmark" data-checkboxsubmit-target="label">
-      <input type="checkbox" class="toggle-bookmark" data-checkboxsubmit-target="checkbox" <%= 'checked="checked"' if bookmarked? %>>
-      <span data-checkboxsubmit-target="span"><%= bookmarked? ? t('blacklight.search.bookmarks.present') : t('blacklight.search.bookmarks.absent') %></span>
+    <label class="toggle-bookmark" data-blacklight--checkbox-submit-target="label">
+      <input type="checkbox" class="toggle-bookmark" data-action="change->blacklight--checkbox-submit#change" <%= 'checked="checked"' if bookmarked? %> data-blacklight--checkbox-submit-target="checkbox">
+      <span data-blacklight--checkbox-submit-target="span"><%= bookmarked? ? t('blacklight.search.bookmarks.present') : t('blacklight.search.bookmarks.absent') %></span>
     </label>
   </div>
 

app/javascript/blacklight/bookmark_toggle.js

@@ -1,11 +1,9 @@
-import BookmarkToggle from 'blacklight/bookmark_toggle'
 import ButtonFocus from 'blacklight/button_focus'
 import Modal from 'blacklight/modal'
 import SearchContext from 'blacklight/search_context'
 import Core from 'blacklight/core'
 
 export default {
-  BookmarkToggle,
   ButtonFocus,
   Modal,
   SearchContext,

app/javascript/blacklight/checkbox_submit.js

@@ -0,0 +1,63 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ['checkbox', 'label', 'span']
+  static values = { present: String, absent: String, inprogress: String }
+
+  async change() {
+    this.spanTarget.innerHTML = this.inprogressValue;
+    this.labelTarget.setAttribute('disabled', 'disabled');
+    this.checkboxTarget.setAttribute('disabled', 'disabled');
+
+    const response = await this.submit();
+
+    this.labelTarget.removeAttribute('disabled')
+    this.checkboxTarget.removeAttribute('disabled')
+
+    if (response.ok) {
+      const json = await response.json()
+      this.updateStateTo(this.checked)
+      this.updateGlobalBookmarkCounter(json.bookmarks.count)
+    } else {
+      alert('Error')
+    }
+  }
+
+  get checked() {
+    return this.checkboxTarget.checked;
+  }
+
+  async submit() {
+    const method = this.checked ? 'put' : 'delete';
+
+    //Set the Rails hidden field that fakes an HTTP verb
+    //properly for current state action.
+    this.element.querySelector('input[name=_method]').value = method;
+
+    const response = await fetch(this.element.getAttribute('action'), {
+      body: new FormData(this.element),
+      method: method.toUpperCase(),
+      headers: {
+        'Accept': 'application/json',
+        'X-Requested-With': 'XMLHttpRequest',
+        'X-CSRF-Token': document.querySelector('meta[name=csrf-token]')?.content
+      }
+    })
+
+    return response;
+  }
+
+  updateGlobalBookmarkCounter(value) {
+    document.querySelector('[data-role=bookmark-counter]').innerHTML = value;
+  }
+
+  updateStateTo(state) {
+    if (state) {
+      this.labelTarget.classList.add('checked')
+      this.spanTarget.innerHTML = this.presentValue;
+    } else {
+      this.labelTarget.classList.remove('checked')
+      this.spanTarget.innerHTML = this.absentValue;
+    }
+  }
+}