feat: Enhance reaction handling with new ReactionStatus component and update reaction actions

Author: kingRayhan

src/app/api/play/route.ts

@@ -2,7 +2,7 @@ import { NextResponse } from "next/server";
 import * as reactionActions from "@/backend/services/reaction.actions";
 
 export async function GET() {
-  const response = await reactionActions.getReactions({
+  const response = await reactionActions.getResourceReactions({
     resource_id: "00e2ed46-b113-4f4f-899f-ae8477ecd5a4",
     resource_type: "ARTICLE",
   });

src/backend/models/domain-models.ts

@@ -121,3 +121,26 @@ export interface Bookmark {
   user_id: string;
   created_at: Date;
 }
+
+export type REACTION_TYPE =
+  | "LOVE"
+  | "UNICORN"
+  | "WOW"
+  | "FIRE"
+  | "CRY"
+  | "HAHA";
+
+export interface Reaction {
+  resource_id: string;
+  resource_type: "ARTICLE" | "COMMENT";
+  reaction_type: REACTION_TYPE;
+  user_id: string;
+  created_at: Date;
+}
+
+export interface ReactionStatus {
+  count: number;
+  is_reacted: boolean;
+  reaction_type?: REACTION_TYPE;
+  reactor_user_ids?: string[];
+}

src/backend/persistence/persistence-repositories.ts

@@ -3,6 +3,7 @@ import {
   Article,
   ArticleTag,
   Bookmark,
+  Reaction,
   Series,
   SeriesItem,
   Tag,
@@ -66,8 +67,8 @@ const bookmarkRepository = new Repository<Bookmark>(
   repositoryConfig
 );
 
-const reactionRepository = new Repository<Bookmark>(
-  DatabaseTableName.bookmarks,
+const reactionRepository = new Repository<Reaction>(
+  DatabaseTableName.reactions,
   pgClient,
   repositoryConfig
 );

src/backend/services/reaction.actions.ts

@@ -7,6 +7,7 @@ import { ActionException, handleActionException } from "./RepositoryException";
 import { persistenceRepository } from "../persistence/persistence-repositories";
 import { and, eq } from "sqlkit";
 import { ReactionActionInput } from "./inputs/reaction.input";
+import { ReactionStatus } from "../models/domain-models";
 
 const sql = String.raw;
 
@@ -27,6 +28,7 @@ export async function toogleReaction(
       where: and(
         eq("resource_id", input.resource_id),
         eq("resource_type", input.resource_type),
+        eq("reaction_type", input.reaction_type),
         eq("user_id", sessionUserId)
       ),
     });
@@ -37,13 +39,14 @@ export async function toogleReaction(
         where: and(
           eq("resource_id", input.resource_id),
           eq("resource_type", input.resource_type),
+          eq("reaction_type", input.reaction_type),
           eq("user_id", sessionUserId)
         ),
       });
       return {
-        reaction_type: input.resource_type,
+        reaction_type: input.reaction_type,
         resource_id: input.resource_id,
-        reacted: false,
+        is_reacted: false,
       };
     }
 
@@ -52,21 +55,22 @@ export async function toogleReaction(
       {
         resource_id: input.resource_id,
         resource_type: input.resource_type,
+        reaction_type: input.reaction_type,
         user_id: sessionUserId,
         created_at: new Date(),
       },
     ]);
     return {
       reaction_type: input.reaction_type,
       resource_id: input.resource_id,
-      reacted: true,
+      is_reacted: true,
     };
   } catch (error) {
     handleActionException(error);
   }
 }
 
-export async function getReactions(
+export async function getResourceReactions(
   _input: z.infer<typeof ReactionActionInput.getReactionsInput>
 ) {
   try {
@@ -93,13 +97,37 @@ export async function getReactions(
       input.resource_type,
     ]);
 
-    return response?.rows?.map((row: any) => {
-      return {
-        reaction_type: row?.reaction_type! ?? null,
-        count: Number(row?.count) ?? 0,
-        is_reacted: row?.reactor_user_ids?.includes(sessionUserId) ?? false,
-      };
-    });
+    const rows = response?.rows as ReactionStatus[];
+
+    // Create a map of results
+    const reactionMap = new Map<
+      string,
+      { count: number; is_reacted: boolean; reactor_user_ids: string[] }
+    >();
+
+    for (const row of rows) {
+      const reaction_type = row?.reaction_type;
+      const count = Number(row?.count ?? 0);
+      const reactor_user_ids = row?.reactor_user_ids ?? [];
+      const is_reacted = reactor_user_ids.includes(sessionUserId!);
+
+      if (reaction_type) {
+        reactionMap.set(reaction_type, { count, is_reacted, reactor_user_ids });
+      }
+    }
+
+    // Return all types, filling missing ones with count: 0
+    return ["LOVE", "UNICORN", "WOW", "FIRE", "CRY", "HAHA"].map(
+      (reaction_type) => {
+        const entry = reactionMap.get(reaction_type);
+        return {
+          reaction_type,
+          count: entry?.count ?? 0,
+          is_reacted: entry?.is_reacted ?? false,
+          reactor_user_ids: entry?.reactor_user_ids ?? [],
+        };
+      }
+    );
   } catch (error) {
     handleActionException(error);
   }

src/components/ArticleCard.tsx

@@ -7,8 +7,9 @@ import Link from "next/link";
 import { useMemo } from "react";
 import { HoverCard, HoverCardContent, HoverCardTrigger } from "./ui/hover-card";
 import UserInformationCard from "./UserInformationCard";
-import BookmarkStatus from "./BookmarkStatus";
+import BookmarkStatus from "./render-props/BookmarkStatus";
 import clsx from "clsx";
+import ReactionStatus from "./render-props/ReactionStatus";
 
 interface ArticleCardProps {
   id: string;
@@ -149,6 +150,18 @@ const ArticleCard = ({
           </button>
         </div>
 
+        <ReactionStatus
+          resource_type="ARTICLE"
+          resource_id={id}
+          render={({ reactions, toggle }) => {
+            return reactions.map((r) => (
+              <button onClick={() => toggle(r.reaction_type!)}>
+                {r.reaction_type} ({r.count})
+              </button>
+            ));
+          }}
+        />
+
         <BookmarkStatus
           resource_type="ARTICLE"
           resource_id={id}

src/components/BookmarkStatus.tsx …mponents/render-props/BookmarkStatus.tsxsrc/components/BookmarkStatus.tsx renamed to src/components/render-props/BookmarkStatus.tsx src/components/BookmarkStatus.tsx renamed to src/components/render-props/BookmarkStatus.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import * as reactionActions from "@/backend/services/reaction.actions";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  REACTION_TYPE,
+  ReactionStatus as ReactionStatusModel,
+} from "@/backend/models/domain-models";
+
+interface Props {
+  resource_type: "ARTICLE" | "COMMENT";
+  resource_id: string;
+  render: ({
+    toggle,
+    reactions,
+    getReaction,
+  }: {
+    toggle: (reaction_type: REACTION_TYPE) => void;
+    getReaction: (reaction_type: REACTION_TYPE) => void;
+    reactions: ReactionStatusModel[];
+  }) => React.ReactNode;
+}
+
+// All possible reactions
+
+const ReactionStatus: React.FC<Props> = ({
+  resource_id,
+  resource_type,
+  render,
+}) => {
+  const queryClient = useQueryClient();
+
+  const query = useQuery({
+    queryKey: ["reaction", resource_id, resource_type],
+    queryFn: () =>
+      reactionActions.getResourceReactions({ resource_id, resource_type }),
+  });
+
+  const mutation = useMutation({
+    mutationFn: (reaction_type: REACTION_TYPE) =>
+      reactionActions.toogleReaction({
+        resource_id,
+        resource_type,
+        reaction_type,
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["reaction", resource_id, resource_type],
+      });
+    },
+  });
+
+  const toggle = (reaction_type: REACTION_TYPE) => {
+    mutation.mutate(reaction_type);
+  };
+
+  const getReaction = (reaction_type: REACTION_TYPE) => {
+    return query?.data?.find((r) => r.reaction_type == reaction_type);
+  };
+
+  return render({
+    reactions: query?.data
+      ? query.data.map((r) => ({
+          ...r,
+          reaction_type: r.reaction_type as REACTION_TYPE,
+        }))
+      : [],
+    getReaction,
+    toggle,
+  });
+};
+
+export default ReactionStatus;