2025-07-12 19:59:22 +02:00
|
|
|
import LedDisplay from '@/components/Display/LedDisplay';
|
2026-08-15 14:55:57 +02:00
|
|
|
import SetCountForm from '@/components/Counter/SetCountForm';
|
2025-08-01 00:56:26 +02:00
|
|
|
import OnboardingFlow from '@/components/Onboarding/OnboardingFlow';
|
2025-08-01 01:12:21 +02:00
|
|
|
import TerminalSpinner from '@/components/ui/TerminalSpinner';
|
2026-08-15 14:55:57 +02:00
|
|
|
import { csrfToken } from '@/lib/utils';
|
2025-07-10 15:24:15 +02:00
|
|
|
import { Head } from '@inertiajs/react';
|
2026-05-02 18:17:42 +02:00
|
|
|
import { useCallback, useEffect, useState } from 'react';
|
2025-07-10 15:24:15 +02:00
|
|
|
|
|
|
|
|
export default function Dashboard() {
|
2026-08-15 14:55:57 +02:00
|
|
|
const [count, setCount] = useState(0);
|
2026-08-15 14:39:40 +02:00
|
|
|
const [formOpen, setFormOpen] = useState(false);
|
2025-07-10 18:04:58 +02:00
|
|
|
const [loading, setLoading] = useState(true);
|
2026-08-15 14:55:57 +02:00
|
|
|
const [incrementing, setIncrementing] = useState(false);
|
2025-08-01 00:56:26 +02:00
|
|
|
const [needsOnboarding, setNeedsOnboarding] = useState(false);
|
2025-07-10 18:04:58 +02:00
|
|
|
|
2026-08-15 14:32:03 +02:00
|
|
|
const loadData = useCallback(async () => {
|
2026-08-15 14:55:57 +02:00
|
|
|
const response = await fetch('/tracker');
|
2026-08-15 14:32:03 +02:00
|
|
|
|
2026-08-15 14:55:57 +02:00
|
|
|
if (!response.ok) {
|
|
|
|
|
setNeedsOnboarding(true);
|
|
|
|
|
return;
|
2026-08-15 14:32:03 +02:00
|
|
|
}
|
|
|
|
|
|
2026-08-15 14:55:57 +02:00
|
|
|
const { exists, tracker } = await response.json();
|
|
|
|
|
|
|
|
|
|
setCount(tracker?.count ?? 0);
|
|
|
|
|
setNeedsOnboarding(!exists);
|
2026-08-15 14:32:03 +02:00
|
|
|
}, []);
|
|
|
|
|
|
2025-07-10 18:04:58 +02:00
|
|
|
useEffect(() => {
|
|
|
|
|
const fetchData = async () => {
|
|
|
|
|
try {
|
2026-08-15 14:32:03 +02:00
|
|
|
await loadData();
|
2025-07-10 18:04:58 +02:00
|
|
|
} catch (error) {
|
|
|
|
|
console.error('Failed to fetch data:', error);
|
|
|
|
|
} finally {
|
|
|
|
|
setLoading(false);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
fetchData();
|
2026-08-15 14:32:03 +02:00
|
|
|
}, [loadData]);
|
2025-07-10 18:04:58 +02:00
|
|
|
|
2026-08-15 14:55:57 +02:00
|
|
|
const increment = async () => {
|
|
|
|
|
if (incrementing) return;
|
|
|
|
|
|
|
|
|
|
const previous = count;
|
|
|
|
|
setIncrementing(true);
|
|
|
|
|
setCount(previous + 1);
|
|
|
|
|
|
2025-07-10 18:04:58 +02:00
|
|
|
try {
|
2026-08-15 14:55:57 +02:00
|
|
|
const response = await fetch('/increment', {
|
|
|
|
|
method: 'POST',
|
|
|
|
|
headers: {
|
|
|
|
|
'X-CSRF-TOKEN': csrfToken(),
|
|
|
|
|
Accept: 'application/json',
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (!response.ok) {
|
|
|
|
|
setCount(previous);
|
|
|
|
|
return;
|
2025-07-10 18:04:58 +02:00
|
|
|
}
|
2026-08-15 14:55:57 +02:00
|
|
|
|
|
|
|
|
const { count: updated } = await response.json();
|
|
|
|
|
setCount(updated);
|
|
|
|
|
} catch {
|
|
|
|
|
setCount(previous);
|
|
|
|
|
} finally {
|
|
|
|
|
setIncrementing(false);
|
2025-07-10 18:04:58 +02:00
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
2026-05-03 00:21:15 +02:00
|
|
|
if (loading) {
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<Head title="Dashboard" />
|
|
|
|
|
<TerminalSpinner fullScreen />
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2025-08-01 00:56:26 +02:00
|
|
|
if (needsOnboarding) {
|
|
|
|
|
return (
|
|
|
|
|
<>
|
2026-08-15 14:39:40 +02:00
|
|
|
<Head title="incr - Setup" />
|
2026-08-15 14:55:57 +02:00
|
|
|
<OnboardingFlow onComplete={loadData} />
|
2025-08-01 00:56:26 +02:00
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2025-07-10 18:04:58 +02:00
|
|
|
return (
|
|
|
|
|
<>
|
2026-05-01 21:03:05 +02:00
|
|
|
<Head title="incr" />
|
2025-07-13 02:10:52 +02:00
|
|
|
|
2025-07-13 00:03:34 +02:00
|
|
|
<div className="min-h-screen bg-black">
|
|
|
|
|
<div className="w-full max-w-4xl mx-auto px-4">
|
|
|
|
|
<div className="pt-32">
|
2026-08-15 14:55:57 +02:00
|
|
|
<LedDisplay value={count} onClick={increment} />
|
2025-07-12 19:59:22 +02:00
|
|
|
</div>
|
2025-07-13 02:10:52 +02:00
|
|
|
|
2026-08-15 14:55:57 +02:00
|
|
|
<div className="text-center">
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
onClick={() => setFormOpen(true)}
|
|
|
|
|
className="text-red-400/60 hover:text-red-400 font-mono text-xs uppercase tracking-widest transition-colors"
|
|
|
|
|
>
|
|
|
|
|
[SET VALUE]
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{formOpen && (
|
|
|
|
|
<SetCountForm
|
|
|
|
|
currentCount={count}
|
|
|
|
|
onClose={() => setFormOpen(false)}
|
|
|
|
|
onSuccess={setCount}
|
|
|
|
|
/>
|
|
|
|
|
)}
|
2025-07-12 19:59:22 +02:00
|
|
|
</div>
|
2025-07-10 15:24:15 +02:00
|
|
|
</div>
|
2025-07-10 18:04:58 +02:00
|
|
|
</>
|
2025-07-10 15:24:15 +02:00
|
|
|
);
|
|
|
|
|
}
|
