From 2f92e857fa1dab25e48aa8d61df2fa56d299a3df Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Wed, 17 Nov 2021 12:24:39 +0200
Subject: [PATCH] Logged in user via Provider

---
 App.tsx                               |  9 ++++---
 scenes/layout/components/UserItem.tsx | 10 +++-----
 utils/UserContext.tsx                 | 35 +++++++++++++++++++++++++++
 3 files changed, 44 insertions(+), 10 deletions(-)
 create mode 100644 utils/UserContext.tsx

diff --git a/App.tsx b/App.tsx
index a6808708a..1157d5c40 100644
--- a/App.tsx
+++ b/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>
   );
 };
diff --git a/scenes/layout/components/UserItem.tsx b/scenes/layout/components/UserItem.tsx
index a0cf3fcf8..66270a48f 100644
--- a/scenes/layout/components/UserItem.tsx
+++ b/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
diff --git a/utils/UserContext.tsx b/utils/UserContext.tsx
new file mode 100644
index 000000000..cc8eb9ee5
--- /dev/null
+++ b/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)!;
+}