fix(challenge): Prevent bloated query update AJAX

Author: pan93412

assets/controllers/challenge_executor_controller.ts

@@ -5,44 +5,65 @@ import { basicSetup, EditorView } from "codemirror";
 
 export default class extends Controller<HTMLElement> {
   static values = {
-    modelName: String,
     editorSelector: String,
+    submitButtonSelector: String,
   };
 
-  declare modelNameValue: string;
   declare editorSelectorValue: string;
+  declare submitButtonSelectorValue: string;
 
-  view: EditorView | undefined;
+  #editorView: EditorView | undefined;
 
   async connect() {
     const component = await getComponent(this.element);
+    const lastQuery = this.element.dataset["lastQuery"];
 
-    const modelName = this.modelNameValue;
-    const editorSelector = this.editorSelectorValue;
-
-    const $editor = this.element.querySelector(editorSelector);
+    const $editor = this.element.querySelector(this.editorSelectorValue);
     if (!$editor) {
-      throw new Error(`Element not found: ${editorSelector}`);
+      throw new Error(`Element not found: ${this.editorSelectorValue}`);
     }
 
-    const lastQuery = this.element.dataset["lastQuery"];
+    const $submitButton = this.element.querySelector(this.submitButtonSelectorValue);
+    if (!$submitButton || !($submitButton instanceof HTMLButtonElement)) {
+      throw new Error(`Element not found or not a button: ${this.submitButtonSelectorValue}`);
+    }
 
-    this.view = new EditorView({
+    // Create the code editor with the last query.
+    const editorView = new EditorView({
       doc: lastQuery,
       extensions: [
         basicSetup,
         sql(),
-        EditorView.updateListener.of((update) => {
-          component.set(modelName, update.state.doc.toString(), true, true);
+        EditorView.updateListener.of(() => {
+          const doc = 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;
+          }
         }),
       ],
       parent: $editor,
     });
+    this.#editorView = editorView;
+
+    // If the user presses the submit button, we'll send the query to the server.
+    $submitButton.addEventListener("click", async () => {
+      const query = editorView.state.doc.toString();
+
+      console.debug("Executing query", { query });
+      await component.action("execute", {
+        query,
+      });
+    });
   }
 
   disconnect() {
     super.disconnect();
 
-    this.view?.destroy();
+    this.#editorView?.destroy();
   }
 }

src/Twig/Components/Challenge/Executor.php

@@ -15,6 +15,7 @@
 use Symfony\Component\Serializer\SerializerInterface;
 use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
 use Symfony\UX\LiveComponent\Attribute\LiveAction;
+use Symfony\UX\LiveComponent\Attribute\LiveArg;
 use Symfony\UX\LiveComponent\Attribute\LiveProp;
 use Symfony\UX\LiveComponent\ComponentToolsTrait;
 use Symfony\UX\LiveComponent\DefaultActionTrait;
@@ -38,12 +39,6 @@ public function __construct(
     #[LiveProp]
     public User $user;
 
-    /**
-     * @var string the query to execute
-     */
-    #[LiveProp(writable: true)]
-    public string $query;
-
     public function getPreviousQuery(): string
     {
         $se = $this->solutionEventRepository->findOneBy([
@@ -55,19 +50,21 @@ public function getPreviousQuery(): string
     }
 
     #[LiveAction]
-    public function execute(SerializerInterface $serializer): void
-    {
-        if ('' === $this->query) {
+    public function execute(
+        SerializerInterface $serializer,
+        #[LiveArg] string $query,
+    ): void {
+        if ('' === $query) {
             return;
         }
 
         $solutionEvent = (new SolutionEvent())
             ->setQuestion($this->question)
             ->setSubmitter($this->user)
-            ->setQuery($this->query);
+            ->setQuery($query);
 
         try {
-            $result = $this->questionDbRunnerService->getQueryResult($this->question, $this->query);
+            $result = $this->questionDbRunnerService->getQueryResult($this->question, $query);
 
             $answer = $this->questionDbRunnerService->getAnswerResult($this->question);
             $same = $result === $answer;

templates/components/Challenge/Executor.html.twig

@@ -1,29 +1,19 @@
 {% set previousQuery = this.previousQuery %}
 
 <section {{ attributes.defaults({class: 'challenge-sql-executor'}|merge(stimulus_controller('challenge-executor', {
-    modelName: 'query',
     editorSelector: '.challenge-sql-executor__editor',
+    submitButtonSelector: '.challenge-sql-executor__action__submit',
 }))) }} data-last-query="{{ previousQuery }}">
     <section class="challenge-sql-executor__actions hstack">
         <div class="challenge-sql-executor__actions__left me-auto">
             {% block actions %}{% endblock %}
         </div>
 
         <div class="challenge-sql-executor__actions__right">
-            {% if query is not empty and query is not same as(previousQuery) %}
-                <button type="button" class="btn btn-primary"
-                        data-loading="action(execute)|addAttribute(disabled)"
-                        data-action="live#action"
-                        data-live-action-param="execute">
-                    <i class="bi bi-send"></i>
-                    提交
-                </button>
-            {% else %}
-                <button type="button" class="btn btn-primary" disabled>
-                    <i class="bi bi-send"></i>
-                    提交
-                </button>
-            {% endif %}
+            <button type="button" class="btn btn-primary challenge-sql-executor__action__submit">
+                <i class="bi bi-send"></i>
+                提交
+            </button>
         </div>
     </section>
     <hr>