From 2c31685d029976e1c1a6fca818290824680ab1e7 Mon Sep 17 00:00:00 2001
From: Grant <grant@sc07.company>
Date: Thu, 22 Feb 2024 23:37:01 -0700
Subject: [PATCH] make user box in the header show current user (& fix backend
 auth packet)

---
 packages/client/src/components/Header.tsx      | 10 ++--------
 packages/client/src/components/Header/User.tsx | 17 +++++++++++++++++
 packages/server/src/index.ts                   |  9 +++------
 3 files changed, 22 insertions(+), 14 deletions(-)
 create mode 100644 packages/client/src/components/Header/User.tsx

diff --git a/packages/client/src/components/Header.tsx b/packages/client/src/components/Header.tsx
index fdfa58b..2089c35 100644
--- a/packages/client/src/components/Header.tsx
+++ b/packages/client/src/components/Header.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { User } from "./Header/User";
 
 export const Header = () => {
   return (
@@ -6,13 +6,7 @@ export const Header = () => {
       <div></div>
       <div className="spacer"></div>
       <div className="box">
-        <div className="user-card">
-          <div className="user-card--overview">
-            <div className="user-name"></div>
-            <div className="user-instance"></div>
-          </div>
-          <img src="#" alt="User Avatar" className="user-avatar" />
-        </div>
+        <User />
       </div>
     </header>
   );
diff --git a/packages/client/src/components/Header/User.tsx b/packages/client/src/components/Header/User.tsx
new file mode 100644
index 0000000..4dd87c2
--- /dev/null
+++ b/packages/client/src/components/Header/User.tsx
@@ -0,0 +1,17 @@
+import { useAppContext } from "../../contexts/AppContext";
+
+export const User = () => {
+  const { user } = useAppContext();
+
+  return user ? (
+    <div className="user-card">
+      <div className="user-card--overview">
+        <div className="user-name">{user.user.username}</div>
+        <div className="user-instance">{user.service.instance.hostname}</div>
+      </div>
+      <img src={user.user.profile} alt="User Avatar" className="user-avatar" />
+    </div>
+  ) : (
+    <></>
+  );
+};
diff --git a/packages/server/src/index.ts b/packages/server/src/index.ts
index fcd9bf0..a1c29e3 100644
--- a/packages/server/src/index.ts
+++ b/packages/server/src/index.ts
@@ -3,6 +3,7 @@ import expressSession from "express-session";
 import http from "node:http";
 import { Server } from "socket.io";
 import {
+  AuthSession,
   CPixelPacket,
   PacketAck,
   SCanvasPacket,
@@ -51,7 +52,7 @@ const io = new Server<
     ) => void;
   },
   {
-    user: (user: SUserPacket) => void;
+    user: (user: AuthSession) => void;
     config: (config: any) => void;
     pixel: (data: SPixelPacket) => void;
     canvas: (pixels: string[]) => void;
@@ -103,11 +104,7 @@ io.on("connection", (socket) => {
   console.log("connection", socket.request.session.user);
 
   if (socket.request.session.user)
-    socket.emit("user", {
-      type: "user",
-      user: socket.request.session.user,
-      _direction: "server->client",
-    });
+    socket.emit("user", socket.request.session.user);
 
   socket.emit("config", {
     pallete: {