Big restructure

packages/user/src/context.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { useSocket } from "@tensamin/ttp/context";
+
+import { socket as schemas } from "@tensamin/shared/data";
+import type z from "zod";
+import { failedUser } from "./values";
+
+export type User = z.infer<typeof schemas.get_user_data.response>;
+
+interface contextValue {
+  get(userId: number): Promise<User>;
+}
+
+const UserContext = React.createContext<contextValue | undefined>(undefined);
+
+export default function UserProvider(props: { children: React.ReactNode }) {
+  const storageRef = React.useRef<Record<number, User>>({});
+
+  const { send } = useSocket();
+
+  async function get(userId: number): Promise<User> {
+    if (storageRef.current[userId] === undefined) {
+      try {
+        const userData = await send("get_user_data", { user_id: userId });
+
+        // Temp, add base64 stuff
+        userData.data.avatar = userData.data.avatar
+          ? `data:image/png;base64,${userData.data.avatar}`
+          : undefined;
+        // Temp end
+
+        storageRef.current[userId] = userData.data;
+      } catch {
+        storageRef.current[userId] = failedUser;
+      }
+    }
+    return storageRef.current[userId];
+  }
+
+  return (
+    <UserContext.Provider value={{ get }}>
+      {props.children}
+    </UserContext.Provider>
+  );
+}
+
+export function useUser(): contextValue {
+  const context = React.useContext(UserContext);
+  if (!context) {
+    throw new Error("useUser must be used within a UserProvider");
+  }
+  return context;
+}

packages/user/src/values.ts

@@ -0,0 +1,13 @@
+import type { User } from "./context";
+
+export const failedUser: User = {
+  user_id: 0,
+  display: "Failed",
+  iota_id: 0,
+  omikron_connections: [],
+  online_status: "user_offline",
+  public_key: "",
+  sub_end: 0,
+  sub_level: 0,
+  username: "failed",
+};

packages/user/src/wrapper.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { useUser, type User } from "./context";
+
+export default function Wrapper(props: {
+  userId: number;
+  component: (user: User) => React.ReactNode;
+}) {
+  const { get } = useUser();
+  const [user, setUser] = React.useState<User | null>(null);
+
+  React.useEffect(() => {
+    let active = true;
+    get(props.userId).then((value) => {
+      if (active) {
+        setUser(value);
+      }
+    });
+
+    return () => {
+      active = false;
+    };
+  }, [get, props.userId]);
+
+  return <>{user ? props.component(user) : null}</>;
+}