"use client"; import { PACK_ENDPOINT, PACKS_ENDPOINT } from "@/api/ENDPOINTS"; import { Pack } from "@/types/pack"; import { Button, Card, Spinner } from "flowbite-react"; import { useSearchParams } from "next/navigation"; import { useRouter } from "next/navigation"; import { useEffect, useState } from "react"; import { HiDownload, HiTrash } from "react-icons/hi"; export default function PackPage() { const [packData, setPackData] = useState(null); const [packDataLoading, setPackDataLoading] = useState(true); const router = useRouter(); const id = useSearchParams().get("id") || ""; useEffect(() => { async function _getPacksData() { const res = await fetch(PACK_ENDPOINT("getPack", id)); if (!res.ok) router.push("/404"); setPackData(await res.json()); setPackDataLoading(false); } if (id) { _getPacksData(); } else { router.push("/404"); } // eslint-disable-next-line react-hooks/exhaustive-deps }, []); // eslint-disable-next-line @typescript-eslint/no-explicit-any const handleImageUpdate = (e: any) => { if (!packData || !window) return; const file = e.target.files[0]; const fileReader = new FileReader(); fileReader.onloadend = () => { const content = fileReader.result; fetch(`${PACK_ENDPOINT("editPackImage", packData._id)}`, { method: "POST", body: JSON.stringify({ image: content, mimetype: file.type, }), headers: { "content-type": "application/json", accept: "application/json", }, }).then(() => location.reload()); e.target.value = ""; }; fileReader.readAsDataURL(file); }; function deletePack() { if (!packData || !window) return; if (window.confirm(`Delete pack ${packData.title}?`)) { fetch(`${PACKS_ENDPOINT("deletePack", packData._id)}`); const ur = new URL(window.location.href) ur.searchParams.delete("id") ur.pathname = "/" window.location.href = ur.href } } return (
{packDataLoading && (
)} {packData && (

{packData.version}

{packData.modloader}

handleImageUpdate(e)} id="pack-icon" className="hidden" name="image" type="file" />

{packData.title}

by {packData.author}

)}
); }