forked from pinks/eris
1
0
Fork 0
nyx/ui/QueuePage.tsx

58 lines
2.0 KiB
TypeScript
Raw Permalink Normal View History

2023-10-05 09:00:51 +00:00
import React from "react";
import FlipMove from "react-flip-move";
import useSWR from "swr";
import { getFlagEmoji } from "../utils/getFlagEmoji.ts";
import { Progress } from "./Progress.tsx";
2023-10-23 00:39:01 +00:00
import { fetchApi, handleResponse } from "./apiClient.ts";
2023-10-05 09:00:51 +00:00
export function QueuePage() {
2023-10-23 00:39:01 +00:00
const getJobs = useSWR(
["/jobs", {}] as const,
2023-10-08 21:23:54 +00:00
(args) => fetchApi(...args).then(handleResponse),
2023-10-05 09:00:51 +00:00
{ refreshInterval: 2000 },
);
return (
<FlipMove
typeName={"ul"}
className="flex flex-col items-stretch gap-2 p-2 bg-zinc-200 dark:bg-zinc-800 rounded-md"
2023-10-05 09:00:51 +00:00
enterAnimation="fade"
leaveAnimation="fade"
>
{getJobs.data && getJobs.data.length === 0
? <li key="no-jobs" className="text-center text-gray-500">Queue is empty.</li>
: (
getJobs.data?.map((job) => (
<li
className="flex items-baseline gap-2 bg-zinc-100 dark:bg-zinc-700 px-2 py-1 rounded-md"
key={job.id}
>
<span className="">{job.place}.</span>
<span>{getFlagEmoji(job.state.from.language_code ?? undefined)}</span>
<strong>{job.state.from.first_name} {job.state.from.last_name}</strong>
{job.state.from.username
? (
<a
className="link"
href={`https://t.me/${job.state.from.username}`}
target="_blank"
>
@{job.state.from.username}
</a>
)
: null}
<span className="flex-grow self-center h-full">
{job.state.progress != null && (
<Progress className="w-full h-full" value={job.state.progress} />
)}
</span>
<span className="text-sm text-zinc-500 dark:text-zinc-400">
{job.state.workerInstanceKey}
</span>
</li>
))
)}
2023-10-05 09:00:51 +00:00
</FlipMove>
);
}