From 70b3882196ba2e4c6cccb673df8b3b4004d3bbfd Mon Sep 17 00:00:00 2001
From: Yi-Jyun Pan <pan93412@gmail.com>
Date: Wed, 13 Nov 2024 00:41:02 +0800
Subject: [PATCH] fix(challenge): lastQuery should be changed after submission

Also:

* Disable the submit button while the query is being executed
* Simplify $submitButton.disabled logic
---
 .../challenge_executor_controller.ts           | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/assets/controllers/challenge_executor_controller.ts b/assets/controllers/challenge_executor_controller.ts
index 1af30c4..c43d3ca 100644
--- a/assets/controllers/challenge_executor_controller.ts
+++ b/assets/controllers/challenge_executor_controller.ts
@@ -16,7 +16,7 @@ export default class extends Controller<HTMLElement> {
 
   async connect() {
     const component = await getComponent(this.element);
-    const lastQuery = this.element.dataset["lastQuery"];
+    let lastQuery = this.element.dataset["lastQuery"];
 
     const $editor = this.element.querySelector(this.editorSelectorValue);
     if (!$editor) {
@@ -35,15 +35,10 @@ export default class extends Controller<HTMLElement> {
         basicSetup,
         sql(),
         EditorView.updateListener.of(() => {
-          const doc = editorView.state.doc.toString();
+          const query = editorView.state.doc.toString();
 
-          if (doc.trim() === "" || doc === lastQuery) {
-            // Disable the button if the user does not query something new.
-            $submitButton.disabled = true;
-          } else {
-            // Enable the button if the user types something.
-            $submitButton.disabled = false;
-          }
+          // Enable the submit button only if the query is not empty and different from the last one.
+          $submitButton.disabled = query.trim() === "" || query === lastQuery;
         }),
       ],
       parent: $editor,
@@ -52,12 +47,17 @@ export default class extends Controller<HTMLElement> {
 
     // If the user presses the submit button, we'll send the query to the server.
     $submitButton.addEventListener("click", async () => {
+      // Disable the submit button while the query is being executed
+      $submitButton.disabled = true;
+
       const query = editorView.state.doc.toString();
 
       console.debug("Executing query", { query });
       await component.action("execute", {
         query,
       });
+
+      lastQuery = query;
     });
   }