Function VoteForm

src/components/posts/form/form-vote.tsx:21–121

({
  questionId,
  answerId,
  upvotes = 0,
  downvotes = 0,
  votesArr,
  slug,
})

}

const VoteForm: React.FC<IVoteFormProps> = ({
  questionId,
  answerId,
  upvotes = 0,
  downvotes = 0,
  votesArr,
  slug,
}) => {
  const currentPath = usePathname();
  const { execute } = useAction(voteHandlerAction, {
    onSuccess: () => {},
    onError: (error) => {
      toast.error(error);
    },
  });
  
  const handleVote = (voteType: VoteType) => {
    const isRemovingVote = userVoted && userVoteVal.voteType === voteType;
  
    toast.promise(
      execute({ voteType, questionId, answerId, currentPath, slug }),
      isRemovingVote
        ? {
            loading: `Removing ${voteType.toLowerCase()}...`,
            success: `Your ${voteType.toLowerCase()} has been removed.`,
            error: 'Error',
          }
        : {
            loading: `${voteType === VoteType.UPVOTE ? 'Upvoting' : 'Downvoting'}...`,
            success: `Question has been ${voteType === VoteType.UPVOTE ? 'upvoted' : 'downvoted'}.`,
            error: 'Error',
          }
    );
  };

  const userVoted = Boolean(votesArr.length);
  const userVoteVal = votesArr[0];

  return (
    <div className="flex gap-2">
      <button
        className="m-auto"
        onClick={(e) => {
          e.stopPropagation();
          handleVote(VoteType.UPVOTE);
        }}
      >
        <div
          className={`flex min-w-8 items-center gap-1 rounded-full px-4 py-1 text-lg transition-all duration-300 ${
            userVoted && userVoteVal.voteType === VoteType.UPVOTE
              ? 'bg-green-500/20 text-green-500'
              : 'bg-primary/10 text-primary hover:bg-green-500/20 hover:text-green-500'
          }`}
        >
          <ArrowBigUp
            className={`size-5 ${
              userVoted && userVoteVal.voteType === VoteType.UPVOTE
                ? 'text-green-500'