import { useMutation } from "@tanstack/react-query";
import { useRouter } from "@tanstack/react-router";
import { setKnownAvatarKey } from "~/lib/avatar-version";
import { errorMessage } from "~/lib/error-message";
async function postAvatar(account: string, file: File): Promise<void> {
const response = await fetch(`/settings/avatar?account=${encodeURIComponent(account)}`, {
method: "POST",
headers: { "content-type": file.type, "x-gitfor-csrf": "1" },
body: file,
});
if (!response.ok) throw new Error((await response.text()) || "Upload failed");
const { url } = (await response.json().catch(() => ({}))) as { url?: string };
const key = url?.match(/^\/avatars\/([^/?]+)$/)?.[1];
if (key) setKnownAvatarKey(account, key);
}
/** Avatars go to a raw Worker route (binary body) rather than a server function. */
export function useAvatarUpload(account: string) {
const router = useRouter();
const mutation = useMutation({
mutationFn: (file: File) => postAvatar(account, file),
onSuccess: () => router.invalidate({ sync: true }),
});
return {
upload: (file: File) => mutation.mutateAsync(file).catch(() => undefined),
pending: mutation.isPending,
error: mutation.isError ? errorMessage(mutation.error) : null,
};
}