liljudd-website/src/components/NavUser.tsx

89 lines
2.2 KiB
TypeScript

import { getSession } from "@auth/solid-start";
import { signIn, signOut } from "@auth/solid-start/client";
import {
faArrowRightFromBracket,
faArrowRightToBracket,
faGear,
} from "@fortawesome/pro-regular-svg-icons";
import { eq } from "drizzle-orm";
import { Show, createResource } from "solid-js";
import { getRequestEvent } from "solid-js/web";
import db from "~/drizzle";
import { users } from "~/drizzle/schema";
import { authOptions } from "~/server/auth";
import { FontAwesomeIcon } from "./FontAwesomeIcon";
import { Li } from "./NavBar";
const initialUser = {
id: "",
name: null as string | null,
email: "",
emailVerified: null as Date | null,
image: null as string | null,
};
async function getUser() {
"use server";
const event = getRequestEvent();
if (!event)
return { success: false, message: "No request event!", ...initialUser };
const session = await getSession(event.request, authOptions);
if (!session?.user?.id)
return { success: false, message: "No user with id!", ...initialUser };
const user = (
await db
.selectDistinct()
.from(users)
.where(eq(users.id, session.user?.id))
.limit(1)
.execute()
)[0];
console.log("userInfo", "success");
return { success: true, message: "", ...user };
}
function NavUser() {
const [user] = createResource(async () => {
const user = await getUser();
if (!user.success) console.error("userInfo", user.message);
return user;
});
return (
<Show
when={user()?.id}
fallback={
<Li
href="#"
name="Login"
action={() => signIn("discord", { callbackUrl: "/config" })}
>
<FontAwesomeIcon
class="secondary"
icon={faArrowRightToBracket}
size="xl"
/>
</Li>
}
>
<Li href="/config">
<div class="swap lower">
<img class="primary" src={user()?.image ?? ""} alt="User pfp" />
<FontAwesomeIcon class="secondary" icon={faGear} size="xl" />
</div>
</Li>
<Li href="#" action={() => signOut({ callbackUrl: "/" })}>
<FontAwesomeIcon icon={faArrowRightFromBracket} size="xl" />
</Li>
</Show>
);
}
export default NavUser;