58 lines
1.3 KiB
TypeScript
58 lines
1.3 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { useCall } from "../store";
|
|
import { useUser, type User } from "@tensamin/user/context";
|
|
|
|
export default function Preview() {
|
|
const { get } = useUser();
|
|
const currentCallData = useCall((state) => state.currentCallData);
|
|
|
|
const [data, setData] = useState<User[]>([]);
|
|
|
|
useEffect(() => {
|
|
let active = true;
|
|
|
|
if (!currentCallData?.exists) {
|
|
return () => {
|
|
active = false;
|
|
};
|
|
}
|
|
|
|
void Promise.all(currentCallData.UserIds.map((id) => get(id)))
|
|
.then((users) => {
|
|
if (!active) {
|
|
return;
|
|
}
|
|
|
|
setData(users);
|
|
})
|
|
.catch(() => {
|
|
if (!active) {
|
|
return;
|
|
}
|
|
|
|
setData([]);
|
|
});
|
|
|
|
return () => {
|
|
active = false;
|
|
};
|
|
}, [currentCallData, get]);
|
|
|
|
return (
|
|
<div className="w-full h-full flex items-center justify-center">
|
|
{currentCallData?.exists ? (
|
|
<div className="flex flex-col gap-2">
|
|
{data.map((user) => {
|
|
return (
|
|
<p key={user.UserId} className="text-2xl">
|
|
User: {user.Display}
|
|
</p>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<p className="text-2xl">Call expired</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|