feat(web-ui): show reactions in ui (#665)

Author: johanbook

services/web-ui/public/locales/en/blog.json

@@ -32,5 +32,9 @@
     "delete": "Delete"
   },
   "no-posts": "Seems like no one has posted anything here yet. Be the first one to make a post!",
-  "published": "published"
+  "published": "published",
+  "reactions": {
+    "count_one": "{{count}} like",
+    "count_other": "{{count}} likes"
+  }
 }

services/web-ui/public/locales/sv/blog.json

@@ -32,5 +32,9 @@
     "delete": "Ta bort"
   },
   "no-posts": "Det ser ut som att ingen har postat någonting än. Bli den första att göra ett inlägg!",
-  "published": "publicerade"
+  "published": "publicerade",
+  "reactions": {
+    "count_one": "{{count}} person gillar detta",
+    "count_other": "{{count}} personer gillar detta"
+  }
 }

services/web-ui/src/pages/BlogPostListPage/components/BlogPost/BlogPost.stories.tsx

@@ -49,6 +49,10 @@ const BLOG_POST: BlogPostDetails = {
     id: 1,
     name: "John Doe",
   },
+  reactions: {
+    count: 0,
+    currentProfileReactionId: undefined,
+  },
 };
 
 const COMMENT: BlogPostCommentDetails = {

services/web-ui/src/pages/BlogPostListPage/components/BlogPost/BlogPost.tsx

@@ -1,6 +1,6 @@
 import { ReactElement, useState } from "react";
 
-import { FavoriteBorder, ModeCommentOutlined } from "@mui/icons-material";
+import { ModeCommentOutlined } from "@mui/icons-material";
 import {
   Avatar,
   Box,
@@ -21,6 +21,7 @@ import { useTranslation } from "src/core/i18n";
 import { timeSince } from "src/utils/time";
 
 import { BlogPostCommentForm } from "../BlogPostCommentForm/BlogPostComment.form";
+import { BlogPostLikeButton } from "../BlogPostLikeButton/BlogPostLikeButton";
 import { BlogPostMenu } from "../BlogPostMenu";
 import { BlogPostPhotos } from "../BlogPostPhotos/BlogPostPhotos";
 
@@ -60,15 +61,24 @@ export function BlogPost({ post }: BlogPostProps): ReactElement {
       <BlogPostPhotos photos={post.photos} />
 
       <CardActions disableSpacing>
-        <IconButton aria-label="like" disabled sx={{ display: "none" }}>
-          <FavoriteBorder />
-        </IconButton>
+        <BlogPostLikeButton
+          blogPostId={post.id}
+          reactionId={post.reactions.currentProfileReactionId}
+        />
 
         <IconButton aria-label="comment" onClick={() => setShowComments(true)}>
           <ModeCommentOutlined />
         </IconButton>
       </CardActions>
 
+      {post.reactions.count > 0 && (
+        <CardContent sx={{ py: 0 }}>
+          <Typography variant="subtitle2">
+            {t("reactions.count", { count: post.reactions.count })}
+          </Typography>
+        </CardContent>
+      )}
+
       {post.comments.length > 0 && (
         <CardActions disableSpacing>
           <Button onClick={() => setShowComments(!showComments)}>

services/web-ui/src/pages/BlogPostListPage/components/BlogPostLikeButton/BlogPostLikeButton.tsx

@@ -0,0 +1,79 @@
+import { ReactElement } from "react";
+
+import { Favorite, FavoriteBorder } from "@mui/icons-material";
+import { IconButton } from "@mui/material";
+
+import {
+  CreateBlogPostReactionCommand,
+  DeleteBlogPostReactionRequest,
+} from "src/api";
+import { blogsApi } from "src/apis";
+import {
+  CacheKeysConstants,
+  useMutation,
+  useQueryClient,
+} from "src/core/query";
+
+interface BlogPostLikeButtonProps {
+  blogPostId: string;
+  reactionId?: string;
+}
+
+export function BlogPostLikeButton({
+  blogPostId,
+  reactionId,
+}: BlogPostLikeButtonProps): ReactElement {
+  const createMutation = useMutation({
+    mutationFn: (
+      createBlogPostReactionCommand: CreateBlogPostReactionCommand
+    ) => blogsApi.createBlogPostReaction({ createBlogPostReactionCommand }),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (
+      deleteBlogPostReactionCommand: DeleteBlogPostReactionRequest
+    ) => blogsApi.deleteBlogPostReaction(deleteBlogPostReactionCommand),
+  });
+
+  const queryClient = useQueryClient();
+
+  async function handleToggleReaction(): Promise<void> {
+    if (reactionId) {
+      await deleteMutation.mutateAsync(
+        { reactionId },
+        {
+          onSuccess: () => {
+            queryClient.invalidateQueries({
+              queryKey: [CacheKeysConstants.BlogPosts],
+            });
+          },
+        }
+      );
+      return;
+    }
+
+    await createMutation.mutateAsync(
+      { blogPostId, reaction: ":like" },
+      {
+        onSuccess: () => {
+          queryClient.invalidateQueries({
+            queryKey: [CacheKeysConstants.BlogPosts],
+          });
+        },
+      }
+    );
+  }
+
+  const isLoading = createMutation.isPending || deleteMutation.isPaused;
+
+  return (
+    <IconButton
+      aria-label="like"
+      color={reactionId ? "primary" : "default"}
+      disabled={isLoading}
+      onClick={handleToggleReaction}
+    >
+      {reactionId ? <Favorite /> : <FavoriteBorder />}
+    </IconButton>
+  );
+}

services/web-ui/src/pages/BlogPostPage/components/BlogPost/BlogPost.stories.tsx

@@ -49,6 +49,10 @@ const BLOG_POST: BlogPostDetails = {
     id: 1,
     name: "John Doe",
   },
+  reactions: {
+    count: 0,
+    currentProfileReactionId: undefined,
+  },
 };
 
 const COMMENT: BlogPostCommentDetails = {