Moved to ReactJS

packages/core/user/package.json

@@ -16,7 +16,8 @@
   "dependencies": {
     "@tensamin/ttp": "workspace:*",
     "@tensamin/shared": "workspace:*",
-    "solid-js": "^1.9.11",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "zod": "^4.3.6"
   }
 }

packages/core/user/src/context.tsx

@@ -1,5 +1,4 @@
-import { createContext, useContext, type ParentProps } from "solid-js";
-import { createStore } from "solid-js/store";
+import * as React from "react";
 import { useSocket } from "@tensamin/ttp/context";
 
 import { socket as schemas } from "@tensamin/shared/data";
@@ -12,15 +11,15 @@ interface contextValue {
   get(userId: number): Promise<User>;
 }
 
-const UserContext = createContext<contextValue>();
+const UserContext = React.createContext<contextValue | undefined>(undefined);
 
-export default function UserProvider(props: ParentProps) {
-  const [storage, setStorage] = createStore<Record<number, User>>({});
+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 (storage[userId] === undefined) {
+    if (storageRef.current[userId] === undefined) {
       try {
         const userData = await send("get_user_data", { user_id: userId });
 
@@ -30,12 +29,12 @@ export default function UserProvider(props: ParentProps) {
           : undefined;
         // Temp end
 
-        setStorage(userId, userData.data);
+        storageRef.current[userId] = userData.data;
       } catch {
-        setStorage(userId, failedUser);
+        storageRef.current[userId] = failedUser;
       }
     }
-    return storage[userId];
+    return storageRef.current[userId];
   }
 
   return (
@@ -46,7 +45,7 @@ export default function UserProvider(props: ParentProps) {
 }
 
 export function useUser(): contextValue {
-  const context = useContext(UserContext);
+  const context = React.useContext(UserContext);
   if (!context) {
     throw new Error("useUser must be used within a UserProvider");
   }

packages/core/user/src/wrapper.tsx

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

packages/core/user/tsconfig.json

@@ -3,8 +3,7 @@
     "target": "ES2022",
     "module": "ESNext",
     "moduleResolution": "bundler",
-    "jsx": "preserve",
-    "jsxImportSource": "solid-js",
+    "jsx": "react-jsx",
     "strict": true,
     "skipLibCheck": true,
     "noEmit": true