chore: discovery

KnpLabs · Apr 4, 2023 · 4b4bb5e · 4b4bb5e
1 parent e343118
commit 4b4bb5e
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 3 deletions.
diff --git a/public/js/dinosaur.js b/public/js/dinosaur.js
@@ -0,0 +1,21 @@
+const alertContainer = document.querySelector('#alert-container')
+const template = document.querySelector('#dinosaur-item-template')
+const dinosaurList = document.querySelector('#dinosaur-list')
+const dinosaurSection = document.querySelector('#dinosaur-section')
+const dinosaurId = dinosaurSection.dataset.id
+
+fetch(`/api/dinosaurs/${dinosaurId}`)
+  .then(async response => {
+    // Extract the hub URL from the Link header
+    const hubUrl = response.headers.get('Link').match(/<([^>]+)>;\s+rel=(?:mercure|"[^"]*mercure[^"]*")/)[1]
+
+    const hub = new URL(hubUrl, window.origin);
+    const body = await response.json()
+
+    console.log(body)
+    hub.searchParams.append('topic', body.topic)
+
+    // Subscribe to updates
+    const eventSource = new EventSource(hub);
+    eventSource.onmessage = event => window.location.reload()
+  });
diff --git a/public/js/realtime.js b/public/js/realtime.js
@@ -3,7 +3,7 @@ const template = document.querySelector('#dinosaur-item-template')
 const dinosaurList = document.querySelector('#dinosaur-list')
 
 const url = new URL("http://localhost:81/.well-known/mercure")
-url.searchParams.append('topic', 'http://localhost/dinosaurs/create')
+url.searchParams.append('topic', 'http://dinosaur-app/dinosaurs/create')
 
 const eventSource = new EventSource(url)
 

diff --git a/src/Controller/DinosaursController.php b/src/Controller/DinosaursController.php
@@ -7,8 +7,10 @@
 use App\Form\Type\SearchType;
 use Doctrine\Persistence\ManagerRegistry;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Mercure\Discovery;
 use Symfony\Component\Mercure\HubInterface;
 use Symfony\Component\Mercure\Update;
 use Symfony\Component\Routing\Annotation\Route;
@@ -46,13 +48,20 @@ public function list(Request $request, ManagerRegistry $doctrine): Response
         name: 'app_single_dinosaur',
         requirements: ['id' => '\d+']
     )]
-    public function single(string $id, ManagerRegistry $doctrine): Response
+    public function single(
+        string $id,
+        ManagerRegistry $doctrine,
+        Request $request,
+        Discovery $discovery
+    ): Response
     {
         $dinosaur = $doctrine
             ->getRepository(Dinosaur::class)
             ->find($id)
         ;
 
+        $discovery->addLink($request);
+
         if ($dinosaur === false) {
             throw $this->createNotFoundException(
                 'The dinosaur you are looking for does not exists.'
@@ -64,6 +73,41 @@ public function single(string $id, ManagerRegistry $doctrine): Response
         ]);
     }
 
+    #[Route(
+        '/api/dinosaurs/{id}',
+        name: 'api_single_dinosaur',
+        requirements: ['id' => '\d+']
+    )]
+    public function apiSingle(
+        string $id,
+        ManagerRegistry $doctrine,
+        Request $request,
+        Discovery $discovery
+    ): Response
+    {
+        $dinosaur = $doctrine
+            ->getRepository(Dinosaur::class)
+            ->find($id)
+        ;
+
+        $discovery->addLink($request);
+
+        if ($dinosaur === false) {
+            throw $this->createNotFoundException(
+                'The dinosaur you are looking for does not exists.'
+            );
+        }
+
+        return new JsonResponse([
+            'id' => $dinosaur->getId(),
+            'name' => $dinosaur->getName(),
+            'gender' => $dinosaur->getGender(),
+            'age' => $dinosaur->getAge(),
+            'eyeColor' => $dinosaur->getEyesColor(),
+            'topic' => "http://dinosaur-app/api/dinosaurs/{$dinosaur->getId()}"
+        ]);
+    }
+
     #[Route('/dinosaurs/create', name: 'app_create_dinosaur')]
     public function create(
         Request $request,

diff --git a/templates/dinosaur.html.twig b/templates/dinosaur.html.twig
@@ -9,6 +9,7 @@
 
 {% block javascripts  %}
 <script src="{{ asset('js/bootstrap.min.js') }}"></script>
+<script src="{{ asset('js/dinosaur.js') }}" defer></script>
 {% endblock %}
 
 {% block body %}
@@ -21,7 +22,7 @@
     </a>
     <h1>{{ dinosaur.name }}</h1>
   </header>
-  <section>
+  <section data-id="{{ dinosaur.id }}" id="dinosaur-section">
     <img src="{{ asset('img/dino.png') }}" alt="twbs" class="rounded-circle flex-shrink-0">
     <div>
       <p>