fix: practical work 1 updates

KnpLabs · May 3, 2023 · abad022 · abad022
1 parent 9ba31f3
commit abad022
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 54 deletions.
diff --git a/public/js/dinosaurs.js b/public/js/dinosaurs.js
@@ -2,34 +2,64 @@ const alertContainer = document.querySelector('#alert-container')
 const template = document.querySelector('#dinosaur-item-template')
 const dinosaurList = document.querySelector('#dinosaur-list')
 
-fetch(window.location)
-  .then(async response => {
-      const topic = response.headers.get('x-mercure-topic')
-      const hubUrl = response.headers.get('Link').match(/<([^>]+)>;\s+rel=(?:mercure|"[^"]*mercure[^"]*")/)[1]
+const displayToast = (message) => {
+  alertContainer.innerHTML = `<div class='alert alert-success'>${message}</div>`
+  window.setTimeout(() => {
+    const alert = document.querySelector('.alert')
+    alert.parentNode.removeChild(alert)
+  }, 5000)
+}
+
+const createDinosaur = (name, link) => {
+  const clone = template.content.cloneNode(true)
+  const dinosaurTemplateNameContainer = clone.querySelector('#dinosaur-item-template-name')
+  const dinosaurTemplateLinkContainer = clone.querySelector('#dinosaur-item-template-link')
+
+  dinosaurTemplateNameContainer.innerHTML = name
+  dinosaurTemplateLinkContainer.href = link
 
-      const hub = new URL(hubUrl);
+  dinosaurList.append(clone)
 
-      hub.searchParams.append('topic', topic)
+  displayToast(`Welcome to ${name}!`)
+}
 
-      const es = new EventSource(hub)
+const removeDinosaur = (id) => {
+  const item = document.querySelector(`a[data-id="${id}"]`)
+  item.remove()
 
-      es.onmessage = e => {
-        const dinosaur = JSON.parse(e.data)
+  displayToast(`A dinosaur has been removed !`)
+}
+
+const editDinosaur = (data) => {
+  const item = document.querySelector(`a[data-id="${data.id}"]`)
+  const name = item.querySelector('div')
+  name.innerHTML = data.name
+}
+
+fetch(window.location)
+  .then(async response => {
+    const topic = response.headers.get('x-mercure-topic')
+    const hubUrl = response.headers.get('Link').match(/<([^>]+)>;\s+rel=(?:mercure|"[^"]*mercure[^"]*")/)[1]
 
-        const clone = template.content.cloneNode(true)
-        const dinosaurTemplateNameContainer = clone.querySelector('#dinosaur-item-template-name')
-        const dinosaurTemplateLinkContainer = clone.querySelector('#dinosaur-item-template-link')
+    const hub = new URL(hubUrl);
 
-        dinosaurTemplateNameContainer.innerHTML = dinosaur.name
-        dinosaurTemplateLinkContainer.href = dinosaur.link
+    hub.searchParams.append('topic', topic)
 
-        dinosaurList.append(clone)
+    const es = new EventSource(hub)
 
-        alertContainer.innerHTML =`<div class='alert alert-success'>Welcome to ${dinosaur.name}!</div>`
+    es.onmessage = e => {
+      const message = JSON.parse(e.data)
 
-        window.setTimeout(() => {
-          const alert = document.querySelector('.alert')
-          alert.parentNode.removeChild(alert)
-        }, 5000);
+      switch (message.type) {
+        case 'create':
+          createDinosaur(message.name, message.link)
+          break
+        case 'remove':
+          removeDinosaur(message.id)
+          break
+        case 'edit':
+          editDinosaur(message.data)
+          break
       }
+    }
   })
diff --git a/src/Controller/DinosaursController.php b/src/Controller/DinosaursController.php
@@ -73,38 +73,6 @@ public function single(
         ]);
     }
 
-    #[Route(
-        '/api/dinosaurs/{id}',
-        name: 'api_single_dinosaur',
-        requirements: ['id' => '\d+']
-    )]
-    public function apiSingle(
-        string $id,
-        ManagerRegistry $doctrine,
-        Request $request
-    ): Response
-    {
-        $dinosaur = $doctrine
-            ->getRepository(Dinosaur::class)
-            ->find($id)
-        ;
-
-        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' => "https://dinosaur-app/api/dinosaurs/{$dinosaur->getId()}"
-        ]);
-    }
-
     #[Route('/dinosaurs/create', name: 'app_create_dinosaur')]
     public function create(
         Request $request,
@@ -130,6 +98,7 @@ public function create(
                 json_encode([
                     'link' => $this->router->generate('app_single_dinosaur', ['id' => $dinosaur->getId()]),
                     'name' => $dinosaur->getName(),
+                    'type' => 'create',
                     'message' => "{$dinosaur->getName()} has been created!"
                 ])
             );
@@ -177,11 +146,17 @@ public function edit(Request $request, int $id, ManagerRegistry $doctrine): Resp
             $update = new Update(
                 [
                     sprintf('https://dinosaur-app/dinosaurs/edit/%d', $id),
+                    'https://dinosaur-app/dinosaurs',
                     'https://dinosaur-app/activity'
                 ],
                 json_encode([
                     'link' => $this->router->generate('app_single_dinosaur', ['id' => $dinosaur->getId()]),
-                    'message' => "{$dinosaur->getName()} has been edited!"
+                    'message' => "{$dinosaur->getName()} has been edited!",
+                    'type' => 'edit',
+                    'data' => [
+                        'id' => $dinosaur->getId(),
+                        'name' => $dinosaur->getName()
+                    ]
                 ])
             );
 
@@ -222,11 +197,14 @@ public function remove(int $id, ManagerRegistry $doctrine): Response
         $update = new Update(
             [
                 sprintf('https://dinosaur-app/dinosaurs/remove/%d', $id),
+                'https://dinosaur-app/dinosaurs',
                 'https://dinosaur-app/activity'
             ],
             json_encode([
                 'link' => $this->router->generate('app_single_dinosaur', ['id' => $id]),
-                'message' => "{$dinosaur->getName()} has been removed!"
+                'message' => "{$dinosaur->getName()} has been removed!",
+                'type' => 'remove',
+                'id' => $id
             ])
         );
 

diff --git a/templates/dinosaurs-list.html.twig b/templates/dinosaurs-list.html.twig
@@ -20,6 +20,7 @@
     {% for dinosaur in dinosaurs %}
       <a class="list-group-item list-group-item-action d-flex gap-3 py-3"
         href="{{ path('app_single_dinosaur', {id: dinosaur.id}) }}"
+        data-id="{{ dinosaur.id }}"
       >
         <img
         src="{{ asset('img/dino.png') }}"