69 lines
2.0 KiB
TypeScript
69 lines
2.0 KiB
TypeScript
import { useEffect, useState } from "preact/hooks";
|
|
import type { FunctionComponent } from "preact";
|
|
import { Loader } from "./loader.tsx";
|
|
|
|
interface IProps {
|
|
packName: string;
|
|
}
|
|
|
|
export const PackInfo: FunctionComponent<IProps> = ({ packName }) => {
|
|
const [showVersions, setShowVersions] = useState(false);
|
|
const [packVersion, setPackVersion] = useState("");
|
|
const [packVersionList, setPackVersionList] = useState<string[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [world, setWorld] = useState("");
|
|
|
|
useEffect(() => {
|
|
Promise.all([
|
|
fetch("/api/pack/version").then((res) => res.text()).then((text) => {
|
|
setPackVersion(text);
|
|
}),
|
|
fetch("/api/versions").then((res) => res.json()).then((json) => {
|
|
setPackVersionList(json);
|
|
}),
|
|
fetch("/api/world").then((res) => res.text()).then((text) => {
|
|
setWorld(text);
|
|
}),
|
|
]).finally(() => setLoading(false));
|
|
}, []);
|
|
|
|
const updatePackVersion = async (version: string) => {
|
|
const res = await fetch("/api/pack/version", {
|
|
method: "POST",
|
|
body: version,
|
|
});
|
|
|
|
if (res.status === 200) {
|
|
setPackVersion(version);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<h2 class="text-xl">{world} :: {packName}</h2>
|
|
<p class="bg-lime-700 rounded-full shadow-md">
|
|
{loading ? <Loader class="w-8" /> : (
|
|
<>
|
|
Datapack Version:{" "}
|
|
<span
|
|
class="relative cursor-pointer rounded-full bg-lime-200 text-black px-2 inline-block"
|
|
onClick={() => setShowVersions(!showVersions)}
|
|
>
|
|
{packVersion}
|
|
{showVersions && (
|
|
<ul class="absolute top-full left-0 bg-lime-50 rounded-md shadow-md p-2 min-w 12">
|
|
{packVersionList.map((version) => (
|
|
<li onClick={() => updatePackVersion(version)}>
|
|
{version}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</span>
|
|
</>
|
|
)}
|
|
</p>
|
|
</>
|
|
);
|
|
};
|