55 lines
2.4 KiB
TypeScript
55 lines
2.4 KiB
TypeScript
'use client'
|
|
import { useState } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
|
|
export function AlertForm({ productId }: { productId: string }) {
|
|
const [type, setType] = useState<'target_price' | 'all_time_low' | 'percent_drop'>('target_price')
|
|
const [threshold, setThreshold] = useState('')
|
|
const [percent, setPercent] = useState('10')
|
|
const [lookback, setLookback] = useState('7')
|
|
const router = useRouter()
|
|
|
|
async function submit(e: React.FormEvent) {
|
|
e.preventDefault()
|
|
let config: Record<string, unknown> = {}
|
|
if (type === 'target_price') config = { threshold: Number(threshold) }
|
|
if (type === 'percent_drop') config = { percent: Number(percent), lookback_days: Number(lookback) }
|
|
const res = await fetch('/api/alerts', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ productId, type, config }),
|
|
})
|
|
if (res.ok) {
|
|
setThreshold('')
|
|
router.refresh()
|
|
}
|
|
}
|
|
|
|
return (
|
|
<form onSubmit={submit} className="space-y-2 rounded border border-zinc-800 p-3">
|
|
<div className="flex gap-2">
|
|
<select value={type} onChange={(e) => setType(e.target.value as typeof type)} className="rounded border border-zinc-700 bg-zinc-900 px-2 py-1 text-sm">
|
|
<option value="target_price">Zielpreis</option>
|
|
<option value="all_time_low">Allzeit-Tief</option>
|
|
<option value="percent_drop">% Drop</option>
|
|
</select>
|
|
{type === 'target_price' && (
|
|
<input type="number" step="0.01" required value={threshold} onChange={(e) => setThreshold(e.target.value)}
|
|
placeholder="€" className="w-24 rounded border border-zinc-700 bg-zinc-900 px-2 py-1 text-sm" />
|
|
)}
|
|
{type === 'percent_drop' && (
|
|
<>
|
|
<input type="number" required value={percent} onChange={(e) => setPercent(e.target.value)}
|
|
className="w-16 rounded border border-zinc-700 bg-zinc-900 px-2 py-1 text-sm" />
|
|
<span className="self-center text-xs">% in</span>
|
|
<input type="number" required value={lookback} onChange={(e) => setLookback(e.target.value)}
|
|
className="w-16 rounded border border-zinc-700 bg-zinc-900 px-2 py-1 text-sm" />
|
|
<span className="self-center text-xs">Tagen</span>
|
|
</>
|
|
)}
|
|
<button type="submit" className="rounded bg-emerald-600 px-3 py-1 text-sm hover:bg-emerald-500">+ Alert</button>
|
|
</div>
|
|
</form>
|
|
)
|
|
}
|