liljudd-website/src/routes/config/index.tsx

105 lines
3 KiB
TypeScript

import {
faBadgeCheck,
faCircleExclamation,
faPlus,
} from "@fortawesome/pro-regular-svg-icons";
import { useNavigate } from "@solidjs/router";
import { For, createResource } from "solid-js";
import { getRequestEvent } from "solid-js/web";
import { FontAwesomeIcon } from "~/components/FontAwesomeIcon";
import Layout from "~/components/Layout";
import "../../styles/pages/config.scss";
const initialValue = () => ({
success: null as boolean | null,
guilds: [] as {
id: string;
name: string;
icon: string | null | undefined;
}[],
});
function index() {
const navigator = useNavigate();
const event = getRequestEvent();
const [payload] = createResource(
// eslint-disable-next-line solid/reactivity
async () => {
const payload = await fetch("http://localhost:3000/api/config", {
headers: event?.headers,
})
.then(
(res) =>
res.json() as Promise<
| {
success: false;
message: string;
}
| (ReturnType<typeof initialValue> & {
success: true;
})
>,
)
.catch((e) => console.warn(e));
if (!payload) {
console.error("/config", payload);
return initialValue();
}
if (!payload.success) {
console.log("/config", payload.message, "No success");
navigator("/", { replace: false });
return initialValue();
}
return payload;
},
{ deferStream: true },
);
const icons = [faPlus, faCircleExclamation, faBadgeCheck];
const colors = [undefined, "orange", "green"];
return (
<Layout site="config">
<h3 class="text-center">Configure li&apos;l Judd in</h3>
<div>
<For each={payload()?.guilds}>
{(guild, i) => {
return (
<a
href={
i() % 3 === 0
? `/config/${guild.id}`
: `https://discord.com/api/oauth2/authorize?client_id=${import.meta.env.VITE_DISCORD_CLIENT_ID}&permissions=${import.meta.env.VITE_DISCORD_BOT_PERMISSIONS}&scope=bot&guild_id=${guild.id}`
}
class="flex-row centered"
>
<img
class="guildpfp"
src={
guild.icon
? `https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.webp?size=240`
: "https://cdn.discordapp.com/icons/1040502664506646548/bb5a51c4659cf47bdd942bb11e974da7.webp?size=240"
}
alt="Server pfp"
/>
<h1>{guild.name}</h1>
<FontAwesomeIcon
// beat={i() % 3 === 1}
color={colors[i() % 3]}
icon={icons[i() % 3]}
size="xl"
/>
</a>
);
}}
</For>
</div>
</Layout>
);
}
export default index;