fonctionnalité like and dislike of a post

public/css/app.css

@@ -0,0 +1,12 @@
+.no-style {
+    background: none;
+    border: none;
+    padding: 0;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+}
+
+.no-style:focus {
+    outline: none;
+}

public/js/like_toggle.js

@@ -0,0 +1,36 @@
+document.addEventListener('DOMContentLoaded', function() {
+    document.querySelectorAll('.like-toggle').forEach(button => {
+        button.addEventListener('click', function(event) {
+            event.preventDefault();
+
+            let postId = this.dataset.postId;
+            let isLiked = this.classList.contains('liked');
+            let url = isLiked ? this.dataset.unlikeUrl : this.dataset.likeUrl;
+
+            fetch(url, { method: 'POST' })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        let likesCountElement = this.parentElement.querySelector('.likes-count');
+                        let likesCount = parseInt(likesCountElement.textContent);
+
+                        if (isLiked) {
+                            likesCount--;
+                        } else {
+                            likesCount++;
+                        }
+
+                        likesCountElement.textContent = likesCount;
+                        this.classList.toggle('liked');
+                        this.classList.toggle('not-liked');
+                        this.innerHTML = isLiked ? '♡' : '❤️';
+                    } else {
+                        console.error('Erreur lors du traitement du like/unlike.');
+                    }
+                })
+                .catch(error => {
+                    console.error('Erreur lors de la requête fetch:', error);
+                });
+        });
+    });
+});

src/Controller/PostController.php

@@ -16,6 +16,7 @@ use Symfony\Component\Routing\Attribute\Route;
 use Symfony\Component\Security\Http\Attribute\CurrentUser;
 use Symfony\Component\Security\Http\Attribute\IsGranted;
 use Symfony\UX\Turbo\TurboBundle;
+use Symfony\Component\HttpFoundation\JsonResponse;
 
 class PostController extends AbstractController
 {
@@ -171,23 +172,45 @@ class PostController extends AbstractController
         return $this->redirectToRoute('app_post_show', ['id' => $comment->getRelatedPost()->getId()]);
     }
 
-    #[Route('/post/{id}/like', name: 'app_posts', methods: ['POST'])]
+    // #[Route('/post/{id}/like', name: 'app_posts_like', methods: ['POST'])]
+    // #[IsGranted('ROLE_USER')]
+    // public function addLike(Post $post, EntityManagerInterface $entityManager, #[CurrentUser] User $user): Response
+    // {
+    //     $user->addLikedPost($post);
+    //     $entityManager->flush();
+    //     return $this->redirectToRoute('app_post_show', ['id' => $post->getId()], Response::HTTP_SEE_OTHER);
+    // }
+
+    // #[Route('/post/{id}/unlike', name: 'app_posts_unlike', methods: ['POST'])]
+    // #[IsGranted('ROLE_USER')]
+    // public function deleteLike(Post $post, EntityManagerInterface $entityManager, #[CurrentUser] User $user): Response
+    // {
+    //     $user->removeLikedPost($post);
+    //     $entityManager->flush();
+    //     return $this->redirectToRoute('app_post_show', ['id' => $post->getId()], Response::HTTP_SEE_OTHER);
+    // }
+    #[Route('/post/{id}/like', name: 'app_posts_like', methods: ['POST'])]
     #[IsGranted('ROLE_USER')]
-    public function addLike(Request $request, Post $post, EntityManagerInterface $entityManager, #[CurrentUser] User $user): Response
+    public function addLike(#[CurrentUser] User $user, Post $post, EntityManagerInterface $entityManager): JsonResponse
     {
         $user->addLikedPost($post);
         $entityManager->flush();
-        return $this->redirectToRoute('app_post_show', ['id' => $post->getId()], Response::HTTP_SEE_OTHER);
+
+        $likesCount = $post->getLikes()->count();
+
+        return new JsonResponse(['success' => true, 'likesCount' => $likesCount]);
     }
 
-    #[Route('/post/{id}/unlike', name: 'app_posts', methods: ['POST'])]
+    #[Route('/post/{id}/unlike', name: 'app_posts_unlike', methods: ['POST'])]
     #[IsGranted('ROLE_USER')]
-    public function deleteLike(Request $request, Post $post, EntityManagerInterface $entityManager, #[CurrentUser] User $user): Response
+    public function deleteLike(#[CurrentUser] User $user, Post $post, EntityManagerInterface $entityManager): JsonResponse
     {
         $user->removeLikedPost($post);
         $entityManager->flush();
-        return $this->redirectToRoute('app_post_show', ['id' => $post->getId()], Response::HTTP_SEE_OTHER);
 
+        $likesCount = $post->getLikes()->count();
+
+        return new JsonResponse(['success' => true, 'likesCount' => $likesCount]);
     }
 
 }

templates/base.html.twig

@@ -6,6 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         {% block stylesheets %}
             <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+            <link rel="stylesheet" href="{{ asset('css/app.css') }}">
         {% endblock %}
 
         {% block javascripts %}

templates/post/index.html.twig

@@ -12,10 +12,25 @@
             <p class="card-text">{{ post.commentary }}</p>
         </div>
         <div class="card-footer">
-            {{ post.likes.count() }} ❤️
+            <span class="likes-count">{{ post.likes.count() }}</span>
+            {% if app.user %}
+                <button class="like-toggle btn no-style {% if post.likes.contains(app.user) %}liked{% else %}not-liked{% endif %}"
+                        data-post-id="{{ post.id }}"
+                        data-like-url="{{ path('app_posts_like', {id: post.id}) }}"
+                        data-unlike-url="{{ path('app_posts_unlike', {id: post.id}) }}">
+                    {% if post.likes.contains(app.user) %}❤️{% else %}♡{% endif %}
+                </button>
+            {% else %}
+                <span class="like-toggle no-style not-liked">♡</span>
+            {% endif %}
             {{ post.comments.count() }} 💬
         </div>
     </div>
 {% endfor %}
 {% include '_pagination.html.twig' %}
 {% endblock %}
+
+{% block javascripts %}
+    {{ parent() }}
+    <script src="{{ asset('js/like_toggle.js') }}"></script>
+{% endblock %}