54 lines
1.2 KiB
TypeScript
54 lines
1.2 KiB
TypeScript
import {
|
|
type Dispatch,
|
|
type StateUpdater,
|
|
useEffect,
|
|
useState,
|
|
} from "preact/hooks";
|
|
import { Loader } from "./loader.tsx";
|
|
|
|
export const PacksList = (
|
|
{ setPackName }: { setPackName: Dispatch<StateUpdater<string>> },
|
|
) => {
|
|
const [packs, setPacks] = useState<{ name: string; path: string }[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
fetch("/api/packs").then((res) => res.json()).then((json) => {
|
|
setPacks(json);
|
|
}).finally(() => setLoading(false));
|
|
}, []);
|
|
|
|
const setPackNameThing = async (name: string) => {
|
|
setLoading(true);
|
|
const body = new FormData();
|
|
body.set("packName", name);
|
|
const res = await fetch("/api/pack", {
|
|
method: "POST",
|
|
body,
|
|
});
|
|
|
|
const json = await res.json();
|
|
|
|
if (res.status === 200) {
|
|
document.title = json.packName;
|
|
setPackName(json.packName);
|
|
}
|
|
setLoading(false);
|
|
};
|
|
|
|
return loading ? <Loader /> : (
|
|
<ul>
|
|
{packs.length
|
|
? packs.map((pack) => (
|
|
<li
|
|
class="cursor-pointer even:bg-black/5"
|
|
onClick={() => setPackNameThing(pack.name)}
|
|
>
|
|
{pack.name}
|
|
</li>
|
|
))
|
|
: <li>No packs found</li>}
|
|
</ul>
|
|
);
|
|
};
|