like (#19)

Co-authored-by: Matis MAZINGUE <Matis.MAZINGUE@etu.uca.fr>
Co-authored-by: clfreville2 <clement.freville2@etu.uca.fr>
Reviewed-on: https://codefirst.iut.uca.fr/git/clement.freville2/herbarium/pulls/19
Co-authored-by: Matis MAZINGUE <matis.mazingue@etu.uca.fr>
Co-committed-by: Matis MAZINGUE <matis.mazingue@etu.uca.fr>

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,27 @@
+document.addEventListener('DOMContentLoaded', function() {
+    document.querySelectorAll('.like-toggle').forEach(button => {
+        button.addEventListener('click', function (event) {
+            event.preventDefault();
+
+            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');
+                        likesCountElement.textContent = data.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
 {
@@ -170,4 +171,29 @@ class PostController extends AbstractController
         }
         return $this->redirectToRoute('app_post_show', ['id' => $comment->getRelatedPost()->getId()]);
     }
+
+    #[Route('/post/{id}/like', name: 'app_posts_like', methods: ['POST'])]
+    #[IsGranted('ROLE_USER')]
+    public function addLike(#[CurrentUser] User $user, Post $post, EntityManagerInterface $entityManager): JsonResponse
+    {
+        $user->addLikedPost($post);
+        $entityManager->flush();
+
+        $likesCount = $post->getLikes()->count();
+
+        return new JsonResponse(['success' => true, 'likesCount' => $likesCount]);
+    }
+
+    #[Route('/post/{id}/unlike', name: 'app_posts_unlike', methods: ['POST'])]
+    #[IsGranted('ROLE_USER')]
+    public function deleteLike(#[CurrentUser] User $user, Post $post, EntityManagerInterface $entityManager): JsonResponse
+    {
+        $user->removeLikedPost($post);
+        $entityManager->flush();
+
+        $likesCount = $post->getLikes()->count();
+
+        return new JsonResponse(['success' => true, 'likesCount' => $likesCount]);
+    }
+
 }

src/Entity/Post.php

@@ -84,9 +84,16 @@ class Post
     #[ORM\OneToMany(targetEntity: Comment::class, mappedBy: 'related_post', fetch: 'EXTRA_LAZY')]
     private Collection $comments;
 
+    /**
+     * @var Collection<int, User>
+     */
+    #[ORM\ManyToMany(targetEntity: User::class, inversedBy: 'liked_post')]
+    private Collection $likes;
+
     public function __construct()
     {
         $this->comments = new ArrayCollection();
+        $this->likes = new ArrayCollection();
     }
 
     public function getId(): ?int
@@ -256,4 +263,28 @@ class Post
 
         return $this;
     }
+
+    /**
+     * @return Collection<int, User>
+     */
+    public function getLikes(): Collection
+    {
+        return $this->likes;
+    }
+
+    public function addLike(User $user): static
+    {
+        if (!$this->likes->contains($user)) {
+            $this->likes->add($user);
+        }
+
+        return $this;
+    }
+
+    public function removeLike(User $user): static
+    {
+        $this->likes->removeElement($user);
+
+        return $this;
+    }
 }

src/Entity/User.php

@@ -68,9 +68,16 @@ class User implements UserInterface, PasswordAuthenticatedUserInterface
     #[ORM\OneToMany(targetEntity: Comment::class, mappedBy: 'author')]
     private Collection $comments;
 
+    /**
+     * @var Collection<int, Post>
+     */
+    #[ORM\ManyToMany(targetEntity: Post::class, mappedBy: 'likes')]
+    private Collection $liked_post;
+
     public function __construct()
     {
         $this->comments = new ArrayCollection();
+        $this->liked_post = new ArrayCollection();
     }
 
     public function getId(): ?int
@@ -189,4 +196,31 @@ class User implements UserInterface, PasswordAuthenticatedUserInterface
 
         return $this;
     }
+
+    /**
+     * @return Collection<int, Post>
+     */
+    public function getLikedPost(): Collection
+    {
+        return $this->liked_post;
+    }
+
+    public function addLikedPost(Post $likedPost): static
+    {
+        if (!$this->liked_post->contains($likedPost)) {
+            $this->liked_post->add($likedPost);
+            $likedPost->addLike($this);
+        }
+
+        return $this;
+    }
+
+    public function removeLikedPost(Post $likedPost): static
+    {
+        if ($this->liked_post->removeElement($likedPost)) {
+            $likedPost->removeLike($this);
+        }
+
+        return $this;
+    }
 }

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">
-            28 ❤️
+            <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 %}