68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useState } from 'react';
|
||
|
|
import { Loader2, CheckCircle2, XCircle } from 'lucide-react';
|
||
|
|
import { toast } from 'sonner';
|
||
|
|
|
||
|
|
import { Button } from '@/components/ui/button';
|
||
|
|
import { apiFetch } from '@/lib/api/client';
|
||
|
|
|
||
|
|
interface TestResponse {
|
||
|
|
ok: boolean;
|
||
|
|
visitors?: number;
|
||
|
|
error?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Hits POST /api/v1/admin/umami/test which calls Umami's `/api/websites/:id/
|
||
|
|
* active` to verify auth + websiteId in one request. On success, shows the
|
||
|
|
* live visitor count as proof we got real data back.
|
||
|
|
*/
|
||
|
|
export function UmamiTestButton() {
|
||
|
|
const [pending, setPending] = useState(false);
|
||
|
|
const [result, setResult] = useState<TestResponse | null>(null);
|
||
|
|
|
||
|
|
async function runTest() {
|
||
|
|
setPending(true);
|
||
|
|
setResult(null);
|
||
|
|
try {
|
||
|
|
const res = await apiFetch<{ data: TestResponse }>('/api/v1/admin/umami/test', {
|
||
|
|
method: 'POST',
|
||
|
|
});
|
||
|
|
setResult(res.data);
|
||
|
|
if (res.data.ok) {
|
||
|
|
toast.success(`Umami reachable - ${res.data.visitors ?? 0} active visitor(s) right now`);
|
||
|
|
} else {
|
||
|
|
toast.error(res.data.error ?? 'Umami test failed');
|
||
|
|
}
|
||
|
|
} catch (err) {
|
||
|
|
const message = err instanceof Error ? err.message : 'Test failed';
|
||
|
|
setResult({ ok: false, error: message });
|
||
|
|
toast.error(message);
|
||
|
|
} finally {
|
||
|
|
setPending(false);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
{result &&
|
||
|
|
(result.ok ? (
|
||
|
|
<span className="flex items-center text-xs text-green-600">
|
||
|
|
<CheckCircle2 className="mr-1 h-3.5 w-3.5" />
|
||
|
|
Connected ({result.visitors ?? 0} active)
|
||
|
|
</span>
|
||
|
|
) : (
|
||
|
|
<span className="flex items-center text-xs text-destructive">
|
||
|
|
<XCircle className="mr-1 h-3.5 w-3.5" />
|
||
|
|
{result.error ?? 'Failed'}
|
||
|
|
</span>
|
||
|
|
))}
|
||
|
|
<Button type="button" size="sm" variant="outline" onClick={runTest} disabled={pending}>
|
||
|
|
{pending ? <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" /> : null}
|
||
|
|
Test connection
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|