237 lines · 8.0 KB
import { useState } from "react";
import {
  editDiscussionComment,
  markDiscussionAnswer,
  replyToDiscussion,
  toggleDiscussionVote,
} from "~/fns/discussions";
import { useAction } from "~/hooks/use-action";
import type { getDiscussion } from "~/fns/discussions";
import { MarkdownEditor } from "./MarkdownEditor";
import { ReactionBar } from "./ReactionBar";
import { Avatar, Badge, Markdown, RelativeTime } from "./ui/Primitives";
import { Button } from "./ui/Button";
import { cn } from "~/utils/cn";

type Data = Awaited<ReturnType<typeof getDiscussion>>;
type Thread = Data["threads"][number];
type Comment = Thread["replies"][number];
type Context = { owner: string; repo: string; number: number; signedIn: boolean };

export function UpvoteButton({
  context,
  subjectId,
  count,
  voted,
}: {
  context: Context;
  subjectId: string;
  count: number;
  voted: boolean;
}) {
  const vote = useAction(toggleDiscussionVote);
  return (
    <button
      type="button"
      aria-pressed={voted}
      aria-label={`Upvote (${count})`}
      disabled={!context.signedIn || vote.pending}
      onClick={() =>
        vote.run({ data: { owner: context.owner, repo: context.repo, number: context.number, subjectId } })