From c8617388c7fec5fabf8181bedf3fb72028433037 Mon Sep 17 00:00:00 2001 From: Matis MAZINGUE Date: Thu, 13 Jun 2024 11:54:28 +0200 Subject: [PATCH] =?UTF-8?q?fonctionnalit=C3=A9=20like=20and=20dislike=20of?= =?UTF-8?q?=20a=20post?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/css/app.css | 12 +++++++++++ public/js/like_toggle.js | 36 +++++++++++++++++++++++++++++++ src/Controller/PostController.php | 35 ++++++++++++++++++++++++------ templates/base.html.twig | 1 + templates/post/index.html.twig | 17 ++++++++++++++- 5 files changed, 94 insertions(+), 7 deletions(-) create mode 100644 public/css/app.css create mode 100644 public/js/like_toggle.js diff --git a/public/css/app.css b/public/css/app.css new file mode 100644 index 0000000..5da752c --- /dev/null +++ b/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; +} diff --git a/public/js/like_toggle.js b/public/js/like_toggle.js new file mode 100644 index 0000000..3334629 --- /dev/null +++ b/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); + }); + }); + }); +}); diff --git a/src/Controller/PostController.php b/src/Controller/PostController.php index 0020574..8a6c012 100644 --- a/src/Controller/PostController.php +++ b/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]); } } diff --git a/templates/base.html.twig b/templates/base.html.twig index 0ced7a9..903f586 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -6,6 +6,7 @@ {% block stylesheets %} + {% endblock %} {% block javascripts %} diff --git a/templates/post/index.html.twig b/templates/post/index.html.twig index 2b404bd..20fc847 100644 --- a/templates/post/index.html.twig +++ b/templates/post/index.html.twig @@ -12,10 +12,25 @@

{{ post.commentary }}

- {{ post.likes.count() }} ❤️ + + {% if app.user %} + + {% else %} + + {% endif %} {{ post.comments.count() }} 💬
{% endfor %} {% include '_pagination.html.twig' %} {% endblock %} + +{% block javascripts %} + {{ parent() }} + +{% endblock %}