client/packages/user/src/wrapper.tsx

48 lines
1.1 KiB
TypeScript

import { useEffect, useState } from "react";
import { useUser, type User } from "./context";
import { failedUser } from "@tensamin/shared/data";
import { useStorage } from "@tensamin/storage/context";
// Wrapper function to pass user data to some component
export default function Wrapper(props: {
userId: number | "own";
loading: React.ReactNode;
component: (user: User) => React.ReactNode;
}) {
const { get } = useUser();
const { load } = useStorage();
const [user, setUser] = useState<User | null>(null);
useEffect(() => {
if (props.userId == null) return;
let active = true;
void (async () => {
try {
const userId =
props.userId === "own" ? await load("user_id") : props.userId;
const value = await get(userId);
if (active) {
setUser(value);
}
} catch {
if (active) {
setUser(failedUser);
}
}
})();
return () => {
active = false;
};
}, [load, get, props.userId]);
if (props.userId == null) {
return <>{props.component(failedUser)}</>;
}
return <>{user ? props.component(user) : props.loading}</>;
}