removed raw fetch

This commit is contained in:
Khalim Conn-Kowlessar 2026-04-04 19:11:53 +00:00
parent 5fce761b93
commit 716b0d5d79

View file

@ -1,6 +1,7 @@
"use client";
import { useMemo, useState } from "react";
import { useMutation } from "@tanstack/react-query";
import {
useReactTable,
getCoreRowModel,
@ -39,27 +40,35 @@ function escapeCell(value: unknown): string {
: str;
}
async function handlePhotoDownload(rawUrl: string) {
try {
const key = rawUrl.split(".amazonaws.com/")[1];
if (!key) return alert("Invalid S3 key");
function PhotoDownloadButton({ url }: { url: string }) {
const { mutate: download, isPending } = useMutation({
mutationFn: async () => {
const key = url.split(".amazonaws.com/")[1];
if (!key) throw new Error("Invalid S3 key");
const res = await fetch("/api/sign-s3-url", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ key }),
});
if (!res.ok) throw new Error("Failed to get signed URL");
const data = await res.json();
return data.url as string;
},
onSuccess: (signedUrl) => {
window.open(signedUrl, "_blank");
},
});
const res = await fetch("/api/sign-s3-url", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ key }),
});
const data = await res.json();
if (data.url) {
window.open(data.url, "_blank");
} else {
alert("Failed to get signed URL");
}
} catch (err) {
console.error(err);
alert("Error downloading file");
}
return (
<button
onClick={() => download()}
disabled={isPending}
className="flex items-center gap-1.5 px-2.5 py-1.5 bg-brandblue/5 text-brandblue text-xs font-medium rounded-lg hover:bg-brandblue/10 border border-brandblue/20 hover:border-brandblue/40 transition-all duration-150 active:scale-95 disabled:opacity-60 disabled:cursor-not-allowed"
>
<Download className="w-3.5 h-3.5" />
{isPending ? "Preparing…" : "Download"}
</button>
);
}
function PhotoDownloadCell({ value }: { value: unknown }) {
@ -81,14 +90,7 @@ function PhotoDownloadCell({ value }: { value: unknown }) {
return (
<div className="flex flex-wrap gap-1.5">
{urls.map((url, idx) => (
<button
key={idx}
onClick={() => handlePhotoDownload(url)}
className="flex items-center gap-1.5 px-2.5 py-1.5 bg-brandblue/5 text-brandblue text-xs font-medium rounded-lg hover:bg-brandblue/10 border border-brandblue/20 hover:border-brandblue/40 transition-all duration-150 active:scale-95"
>
<Download className="w-3.5 h-3.5" />
Download
</button>
<PhotoDownloadButton key={idx} url={url} />
))}
</div>
);