Refactor comments

assets/controllers/comments_mercure_controller.js

@@ -37,7 +37,7 @@ export default class extends Controller {
       const data = JSON.parse(event.data); // { comments, profiles, ... }
       const live = this._getLiveController();
       if (live) {
-        live.set('payload', data); // <- updates the writable LiveProp
+        live.set('payload', JSON.stringify(data)); // <- updates the writable LiveProp
         live.render();             // <- asks server to re-render
       }
     };

src/Twig/Components/Organisms/Comments.php

@@ -20,7 +20,7 @@ final class Comments
 
     // Writable prop the browser can set
     #[LiveProp(writable: true)]
-    public array $payload = []; // { comments, profiles, ... }
+    public string $payload; // { comments, profiles, ... }
 
     // Live input
     #[LiveProp(writable: false)]
@@ -60,8 +60,9 @@ final class Comments
     /** Expose a view model to the template; keeps all parsing server-side */
     public function getPayload(): array
     {
-        $payload = $this->payload;
-        if (!$payload) {
+        if (!empty($this->payload)) {
+            $payload = json_decode($this->payload);
+        } else {
             $payload = $this->redisCacheService->getCommentsPayload($this->current) ?? [
                 'comments'      => [],
                 'profiles'      => [],