feat(web-ui): add animation to reaction button (#676)

* chore(web-ui): add framer-motion

* feat(web-ui): add animation to like button

* feat(api): send notification to profiles that reacted to blog post

---------

Co-authored-by: Johan Book <{ID}+{username}@users.noreply.github.com>

Author: johanbook

services/api/src/features/blogs/application/handlers/event-handlers/notify-organization-on-posted-blog-post-comment.handler.ts

@@ -48,6 +48,7 @@ export class NotifyOrganizationOnPostedBlogPostCommentHandler
       relations: {
         comments: true,
         profile: true,
+        reactions: true,
       },
       where: {
         id: event.blogPostId,
@@ -69,6 +70,7 @@ export class NotifyOrganizationOnPostedBlogPostCommentHandler
     const profileIds = [
       blogPost.profileId,
       ...blogPost.comments.map((comment) => comment.profileId),
+      ...blogPost.reactions.map((reaction) => reaction.profileId),
     ].filter((id) => id !== event.profileId);
 
     await this.notificationService.notifyProfiles(profileIds, notification);

services/web-ui/package-lock.json

@@ -48,6 +48,7 @@
     "@types/uuid": "^9.0.1",
     "@use-gesture/react": "^10.2.26",
     "dayjs": "^1.11.8",
+    "framer-motion": "^10.16.16",
     "i18next": "^22.5.1",
     "i18next-browser-languagedetector": "^7.0.2",
     "i18next-http-backend": "^2.2.1",

services/web-ui/package.json

@@ -2,6 +2,7 @@ import { ReactElement } from "react";
 
 import { Favorite, FavoriteBorder } from "@mui/icons-material";
 import { IconButton } from "@mui/material";
+import { useAnimate } from "framer-motion";
 
 import {
   CreateBlogPostReactionCommand,
@@ -23,6 +24,7 @@ export function BlogPostLikeButton({
   blogPostId,
   reactionId,
 }: BlogPostLikeButtonProps): ReactElement {
+  const [scope, animate] = useAnimate();
   const createMutation = useMutation({
     mutationFn: (
       createBlogPostReactionCommand: CreateBlogPostReactionCommand
@@ -52,6 +54,8 @@ export function BlogPostLikeButton({
       return;
     }
 
+    animate(scope.current, { scale: [1, 1.4, 1] }, { duration: 0.4 });
+
     await createMutation.mutateAsync(
       { blogPostId, reaction: ":like" },
       {
@@ -72,6 +76,7 @@ export function BlogPostLikeButton({
       color={reactionId ? "primary" : "default"}
       disabled={isLoading}
       onClick={handleToggleReaction}
+      ref={scope}
     >
       {reactionId ? <Favorite /> : <FavoriteBorder />}
     </IconButton>