27 lines
1.8 KiB
TypeScript
27 lines
1.8 KiB
TypeScript
import { useState } from 'react';
|
|
import { useStatsQuery, useSetRunningMutation } from '../api/queries.js';
|
|
import { ConfirmationDialog } from '../components/confirmation-dialog.js';
|
|
import { useSyncStatusQuery } from '../features/operations/operations-queries.js';
|
|
import { useLoginStatusQuery } from '../features/settings/settings-queries.js';
|
|
import { useDashboardRealtime } from './realtime-provider.js';
|
|
import { deriveShellStatus } from './shell-status.js';
|
|
import './shell-status-panel.css';
|
|
|
|
export function ShellStatusPanel() {
|
|
const stats = useStatsQuery();
|
|
const reddit = useLoginStatusQuery();
|
|
const sync = useSyncStatusQuery();
|
|
const realtime = useDashboardRealtime();
|
|
const control = useSetRunningMutation();
|
|
const [confirming, setConfirming] = useState<'start' | 'stop' | null>(null);
|
|
const status = deriveShellStatus({ stats: stats.data, reddit: reddit.data, sync: sync.data, realtime: realtime.connection });
|
|
return <>
|
|
<section aria-label="Platform status" className="shell-status">
|
|
<strong>{status.bot}</strong><span>{status.reddit}</span><span>{status.realtime}</span><span>{status.sync}</span>
|
|
{status.cooldown ? <span className="shell-warning">Cooldown: {status.cooldown}</span> : null}
|
|
<button aria-label={`${status.controlAction === 'start' ? 'Start' : 'Stop'} bot from global status`} className={status.controlAction === 'start' ? 'button primary' : 'button danger'} disabled={status.controlDisabled || control.isPending} onClick={() => setConfirming(status.controlAction)} type="button">{status.controlAction === 'start' ? 'Start bot' : 'Stop bot'}</button>
|
|
</section>
|
|
{confirming ? <ConfirmationDialog action={confirming} isPending={control.isPending} onCancel={() => setConfirming(null)} onConfirm={() => control.mutate(confirming === 'start', { onSuccess: () => setConfirming(null) })} /> : null}
|
|
</>;
|
|
}
|