plane/apps/app/hooks/use-issue-reaction.tsx

import useSWR from "swr";

// fetch keys
import { ISSUE_REACTION_LIST } from "constants/fetch-keys";

// helpers
import { groupReactions } from "helpers/emoji.helper";

// services
import reactionService from "services/reaction.service";

// hooks
import useUser from "./use-user";

const useIssueReaction = (
  workspaceSlug?: string | string[] | null,
  projectId?: string | string[] | null,
  issueId?: string | string[] | null
) => {
  const user = useUser();

  const {
    data: reactions,
    mutate: mutateReaction,
    error,
  } = useSWR(
    workspaceSlug && projectId && issueId
      ? ISSUE_REACTION_LIST(workspaceSlug.toString(), projectId.toString(), issueId.toString())
      : null,
    workspaceSlug && projectId && issueId
      ? () =>
          reactionService.listIssueReactions(
            workspaceSlug.toString(),
            projectId.toString(),
            issueId.toString()
          )
      : null
  );

  const groupedReactions = groupReactions(reactions || [], "reaction");

  /**
   * @description Use this function to create user's reaction to an issue. This function will mutate the reactions state.
   * @param {string} reaction
   * @example handleReactionCreate("128077") // hexa-code of the emoji
   */

  const handleReactionCreate = async (reaction: string) => {
    if (!workspaceSlug || !projectId || !issueId) return;

    const data = await reactionService.createIssueReaction(
      workspaceSlug.toString(),
      projectId.toString(),
      issueId.toString(),
      { reaction },
      user.user
    );

    mutateReaction((prev) => [...(prev || []), data]);
  };

  /**
   * @description Use this function to delete user's reaction from an issue. This function will mutate the reactions state.
   * @param {string} reaction
   * @example handleReactionDelete("123") // 123 -> is emoji hexa-code
   */

  const handleReactionDelete = async (reaction: string) => {
    if (!workspaceSlug || !projectId || !issueId) return;

    mutateReaction(
      (prevData) =>
        prevData?.filter((r) => r.actor !== user?.user?.id || r.reaction !== reaction) || [],
      false
    );

    await reactionService.deleteIssueReaction(
      workspaceSlug.toString(),
      projectId.toString(),
      issueId.toString(),
      reaction,
      user.user
    );

    mutateReaction();
  };

  return {
    isLoading: !reactions && !error,
    reactions,
    groupedReactions,
    handleReactionCreate,
    handleReactionDelete,
    mutateReaction,
  } as const;
};

export default useIssueReaction;