63 lines · 2.4 KB
import { useNavigate } from "@tanstack/react-router";
import { useState } from "react";
import { transferRepo } from "~/fns/profile";
import { transferableOwners } from "~/fns/repos";
import { useAction } from "~/hooks/use-action";
import { Button } from "~/ui/Button";
import { SelectField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { Panel } from "~/ui/Panel";

export function TransferRepoPanel({ owner, repo }: { owner: string; repo: string }) {
  const navigate = useNavigate();
  const transfer = useAction(transferRepo, { invalidate: false });
  const [targets, setTargets] = useState<string[] | null>(null);

  return (
    <Panel tone="danger" title="Transfer ownership">
      <div className="space-y-3 p-5 text-sm">
        <ErrorBanner message={transfer.error} />
        <p className="text-kumo-subtle">
          Move this repository to another account you can create repositories in. Old URLs and git remotes redirect.
        </p>
        {targets === null ? (
          <Button onClick={async () => setTargets((await transferableOwners()).filter((name) => name !== owner))}>
            Choose new owner
          </Button>
        ) : targets.length === 0 ? (
          <p className="text-kumo-subtle">There are no other accounts you can transfer to.</p>
        ) : (
          <form
            className="space-y-3"
            onSubmit={async (event) => {
              event.preventDefault();
              const form = new FormData(event.currentTarget);
              const result = await transfer.run({
                data: {
                  owner,
                  repo,
                  newOwner: String(form.get("newOwner") ?? ""),
                  confirm: String(form.get("confirm") ?? ""),