83 lines
2.1 KiB
TypeScript
83 lines
2.1 KiB
TypeScript
import { configureAbly, useChannel } from "@ably-labs/react-hooks";
|
|
import { env } from "~/env.mjs";
|
|
import { api } from "~/utils/api";
|
|
|
|
const Stats = () => {
|
|
configureAbly({
|
|
key: env.NEXT_PUBLIC_ABLY_PUBLIC_KEY,
|
|
recover: (_, cb) => {
|
|
cb(true);
|
|
},
|
|
});
|
|
|
|
const [] = useChannel(
|
|
`${env.NEXT_PUBLIC_APP_ENV}-stats`,
|
|
() => void refetchData()
|
|
);
|
|
|
|
const {
|
|
data: usersCount,
|
|
isLoading: usersCountLoading,
|
|
isFetching: usersCountFetching,
|
|
refetch: refetchUsersCount,
|
|
} = api.rest.userCount.useQuery();
|
|
const {
|
|
data: roomsCount,
|
|
isLoading: roomsCountLoading,
|
|
isFetching: roomsCountFetching,
|
|
refetch: refetchRoomsCount,
|
|
} = api.rest.roomCount.useQuery();
|
|
const {
|
|
data: votesCount,
|
|
isLoading: votesCountLoading,
|
|
isFetching: votesCountFetching,
|
|
refetch: refetchVotesCount,
|
|
} = api.rest.voteCount.useQuery();
|
|
|
|
const refetchData = async () => {
|
|
await Promise.all([
|
|
refetchUsersCount(),
|
|
refetchRoomsCount(),
|
|
refetchVotesCount(),
|
|
]);
|
|
};
|
|
|
|
return (
|
|
<div className="stats stats-horizontal shadow bg-neutral m-4">
|
|
<div className="stat">
|
|
<div className="stat-title">Users</div>
|
|
<div className="stat-value">
|
|
{usersCountLoading || usersCountFetching ? (
|
|
<span className="loading loading-dots loading-lg"></span>
|
|
) : (
|
|
<>{usersCount ? usersCount : "0"}</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="stat">
|
|
<div className="stat-title">Rooms</div>
|
|
<div className="stat-value">
|
|
{roomsCountLoading || roomsCountFetching ? (
|
|
<span className="loading loading-dots loading-lg"></span>
|
|
) : (
|
|
<>{roomsCount ? roomsCount : "0"}</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="stat">
|
|
<div className="stat-title">Votes</div>
|
|
<div className="stat-value">
|
|
{votesCountLoading || votesCountFetching ? (
|
|
<span className="loading loading-dots loading-lg"></span>
|
|
) : (
|
|
<>{votesCount ? votesCount : "0"}</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Stats;
|