From f20f0a715db3ec5dedb94a962223dcdf10d66df1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=20Gramn=C3=A6s=20Tjernshaugen?=
 <jotjernshaugen@gmail.com>
Date: Tue, 21 Jan 2025 12:51:16 +0100
Subject: [PATCH] Add optimistic updates to checking in (#3348)

---
 assets/common/utils/request.js    |  2 +-
 assets/dashboard/events/events.js | 19 +++++++++++++++----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/assets/common/utils/request.js b/assets/common/utils/request.js
index 4df4b667c..3ce75a3f0 100644
--- a/assets/common/utils/request.js
+++ b/assets/common/utils/request.js
@@ -69,5 +69,5 @@ export const ajax = (method, url, data, success, error, type) => {
       payload.dataType = 'json';
     }
   }
-  $.ajax(payload);
+  return $.ajax(payload);
 };
diff --git a/assets/dashboard/events/events.js b/assets/dashboard/events/events.js
index db024185f..b10f5e618 100644
--- a/assets/dashboard/events/events.js
+++ b/assets/dashboard/events/events.js
@@ -1,6 +1,7 @@
 import jQuery from 'jquery';
 import { plainUserTypeahead } from 'common/typeahead';
-import { ajax, showStatusMessage } from 'common/utils';
+import { ajax, showStatusMessage, setChecked } from 'common/utils';
+import { element } from 'prop-types';
 import bootstrapTabJs from 'common/bootstrap-tab';
 
 bootstrapTabJs(jQuery);
@@ -155,6 +156,7 @@ const Event = (function PrivateEvent($) {
 
     // Attendee module, toggles and adding
     attendee: {
+      setCheckedXhr: null,
       setChecked(cell, action, checked) {
         const data = {
           attendee_id: $(cell).data('id'),
@@ -164,11 +166,20 @@ const Event = (function PrivateEvent($) {
         const success = (eventData) => {
           drawTable('attendeelist', eventData.attendees, eventData.is_payment_event, eventData.has_extras);
         };
-        const error = (xhr, txt, errorMessage) => {
-          showStatusMessage(errorMessage, 'alert-danger');
+        let originalChecked = Boolean(cell.querySelector(".checked"));
+        const error = (error) => {
+          if (error.statusText !== 'abort') {
+            showStatusMessage(error.statusText, 'alert-danger');
+            setChecked(cell, originalChecked);
+          }
         };
 
-        ajax('POST', attendanceEndpoint, data, success, error, null);
+        setChecked(cell, checked);
+        if (this.setCheckedXhr) {
+          this.setCheckedXhr.abort();
+        }
+        this.setCheckedXhr = ajax('POST', attendanceEndpoint, data, success, error, null);
+        console.log(this.setCheckedXhr)
       },
       add(userId) {
         const data = {