diff --git a/src/components/Bars.tsx b/src/components/Bars.tsx index 2de7161..7ae01e1 100644 --- a/src/components/Bars.tsx +++ b/src/components/Bars.tsx @@ -17,8 +17,46 @@ import { ActivityHeatmap } from "./ActivityHeatmap"; import { DarkModeToggle } from "./DarkModeToggle"; import { SkeletonBox, SkeletonText } from "./SkeletonLoader"; import { env } from "~/env/client"; -import { A, useNavigate, useLocation } from "@solidjs/router"; +import { + A, + useNavigate, + useLocation, + query, + createAsync +} from "@solidjs/router"; import { BREAKPOINTS } from "~/config"; +import { getRequestEvent } from "solid-js/web"; + +const getUserState = query(async () => { + "use server"; + const { getPrivilegeLevel, getUserID } = await import("~/server/utils"); + const { ConnectionFactory } = await import("~/server/utils"); + const event = getRequestEvent()!; + const privilegeLevel = await getPrivilegeLevel(event.nativeEvent); + const userId = await getUserID(event.nativeEvent); + + if (!userId) { + return { + isAuthenticated: false, + email: null, + privilegeLevel: "anonymous" as const + }; + } + + const conn = ConnectionFactory(); + const res = await conn.execute({ + sql: "SELECT email FROM User WHERE id = ?", + args: [userId] + }); + + const email = res.rows[0] ? (res.rows[0].email as string | null) : null; + + return { + isAuthenticated: true, + email, + privilegeLevel + }; +}, "bars-user-state"); function formatDomainName(url: string): string { const domain = url.split("://")[1]?.split(":")[0] ?? url; @@ -157,6 +195,26 @@ export function RightBarContent() { Resume +
  • + + + + + + + Downloads + +
  • @@ -188,17 +246,13 @@ export function RightBarContent() { export function LeftBar() { const { leftBarVisible, setLeftBarVisible } = useBars(); const location = useLocation(); + const userState = createAsync(() => getUserState()); let ref: HTMLDivElement | undefined; const [recentPosts, setRecentPosts] = createSignal( undefined ); - const [userInfo, setUserInfo] = createSignal<{ - email: string | null; - isAuthenticated: boolean; - } | null>(null); - const [isMounted, setIsMounted] = createSignal(false); const [signOutLoading, setSignOutLoading] = createSignal(false); const [getLostText, setGetLostText] = createSignal("What's this?"); @@ -229,31 +283,6 @@ export function LeftBar() { } }; - const fetchUserInfo = async () => { - try { - const response = await fetch("/api/trpc/user.getProfile", { - method: "GET" - }); - - if (response.ok) { - const result = await response.json(); - if (result.result?.data) { - setUserInfo({ - email: result.result.data.email, - isAuthenticated: true - }); - } else { - setUserInfo({ email: null, isAuthenticated: false }); - } - } else { - setUserInfo({ email: null, isAuthenticated: false }); - } - } catch (error) { - console.error("Failed to fetch user info:", error); - setUserInfo({ email: null, isAuthenticated: false }); - } - }; - onMount(() => { setIsMounted(true); @@ -377,8 +406,6 @@ export function LeftBar() { console.error("Failed to fetch recent posts:", error); setRecentPosts([]); } - - await fetchUserInfo(); }; setTimeout(() => { @@ -386,14 +413,6 @@ export function LeftBar() { }, 0); }); - createEffect(() => { - location.pathname; - - if (isMounted()) { - fetchUserInfo(); - } - }); - const navigate = useNavigate(); const getMainNavStyles = () => { const baseStyles = { @@ -539,6 +558,15 @@ export function LeftBar() { Blog + +
  • + + Analytics + +
  • +
  • { @@ -547,7 +575,7 @@ export function LeftBar() { }} > Login @@ -556,16 +584,16 @@ export function LeftBar() { > Account - + {" "} - ({userInfo()!.email}) + ({userState()!.email})
  • - +