Logged in user via Provider

App.tsx

@@ -2,13 +2,16 @@ import { Router } from "solid-app-router";
 import type { Component } from "solid-js";
 import { Routes } from "./Routes";
 import { Layout } from "./scenes/layout/components/Layout";
+import { UserProvider } from "./utils/UserContext";
 
 const App: Component = () => {
   return (
     <Router>
-      <Layout>
-        <Routes />
-      </Layout>
+      <UserProvider>
+        <Layout>
+          <Routes />
+        </Layout>
+      </UserProvider>
     </Router>
   );
 };

scenes/layout/components/UserItem.tsx

@@ -1,14 +1,10 @@
-import { createResource, Show } from "solid-js";
+import { Show } from "solid-js";
 import { DiscordIcon } from "../../../components/icons/Discord";
-import { trpcClient } from "../../../utils/trpc-client";
+import { useUser } from "../../../utils/UserContext";
 import s from "../styles/UserItem.module.css";
 
-const fetchLoggedInUser = async () => {
-  return trpcClient.query("layout.getLoggedInUser");
-};
-
 export function UserItem() {
-  const [user] = createResource(fetchLoggedInUser);
+  const user = useUser();
 
   return (
     <Show

utils/UserContext.tsx

@@ -0,0 +1,35 @@
+import {
+  createContext,
+  useContext,
+  createResource,
+  JSXElement,
+  Resource,
+} from "solid-js";
+import { trpcClient } from "./trpc-client";
+
+const fetchLoggedInUser = async () => {
+  return trpcClient.query("layout.getLoggedInUser");
+};
+
+type LoggedInUserResource = Resource<
+  | {
+      id: number;
+      discordId: string;
+      discordAvatar?: string | undefined;
+    }
+  | undefined
+>;
+
+const UserContext = createContext<LoggedInUserResource>();
+
+export function UserProvider(props: { children: JSXElement }) {
+  const [user] = createResource(fetchLoggedInUser);
+
+  return (
+    <UserContext.Provider value={user}>{props.children}</UserContext.Provider>
+  );
+}
+
+export function useUser(): LoggedInUserResource {
+  return useContext(UserContext)!;
+}