report form
This commit is contained in:
212
pages/report.tsx
Normal file
212
pages/report.tsx
Normal file
@@ -0,0 +1,212 @@
|
||||
import { useState } from 'react'
|
||||
import type { NextPage } from 'next'
|
||||
import Head from 'next/head'
|
||||
import Link from 'next/link'
|
||||
|
||||
const ReportPage: NextPage = () => {
|
||||
const [formData, setFormData] = useState({
|
||||
source_url: '',
|
||||
reporter_email: '',
|
||||
reporter_name: '',
|
||||
description: '',
|
||||
categories: [] as string[]
|
||||
})
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [success, setSuccess] = useState(false)
|
||||
|
||||
const categories = [
|
||||
{ id: 'hoax', name: 'Hoax' },
|
||||
{ id: 'hate-speech', name: 'Hate Speech' },
|
||||
{ id: 'violence', name: 'Violence' },
|
||||
{ id: 'racism', name: 'Racism' },
|
||||
{ id: 'conspiracy', name: 'Conspiracy' },
|
||||
{ id: 'propaganda', name: 'Propaganda' }
|
||||
]
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setLoading(true)
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/reports', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(formData),
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
setSuccess(true)
|
||||
setFormData({
|
||||
source_url: '',
|
||||
reporter_email: '',
|
||||
reporter_name: '',
|
||||
description: '',
|
||||
categories: []
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to submit report:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleCategoryChange = (categoryId: string, checked: boolean) => {
|
||||
if (checked) {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
categories: [...prev.categories, categoryId]
|
||||
}))
|
||||
} else {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
categories: prev.categories.filter(id => id !== categoryId)
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
||||
if (success) {
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
<title>Hlásenie odoslané - Infohliadka</title>
|
||||
</Head>
|
||||
<div style={{ padding: '20px', textAlign: 'center' }}>
|
||||
<h1>Ďakujeme!</h1>
|
||||
<p>Vaše hlásenie bolo úspešne odoslané a bude preverené našimi moderátormi.</p>
|
||||
<Link href="/" style={{ color: '#3b82f6' }}>← Späť na hlavnú stránku</Link>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
<title>Nahlásiť problematický obsah - Infohliadka</title>
|
||||
</Head>
|
||||
|
||||
<div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
|
||||
<h1>Nahlásiť problematický obsah</h1>
|
||||
|
||||
<form onSubmit={handleSubmit} style={{ marginTop: '30px' }}>
|
||||
<div style={{ marginBottom: '20px' }}>
|
||||
<label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
|
||||
URL stránky *
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
required
|
||||
value={formData.source_url}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, source_url: e.target.value }))}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '8px',
|
||||
border: '1px solid #d1d5db',
|
||||
borderRadius: '4px'
|
||||
}}
|
||||
placeholder="https://example.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '20px' }}>
|
||||
<label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
|
||||
Váš email (voliteľný)
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
value={formData.reporter_email}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, reporter_email: e.target.value }))}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '8px',
|
||||
border: '1px solid #d1d5db',
|
||||
borderRadius: '4px'
|
||||
}}
|
||||
placeholder="vas@email.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '20px' }}>
|
||||
<label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
|
||||
Vaše meno (voliteľné)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.reporter_name}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, reporter_name: e.target.value }))}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '8px',
|
||||
border: '1px solid #d1d5db',
|
||||
borderRadius: '4px'
|
||||
}}
|
||||
placeholder="Vaše meno"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '20px' }}>
|
||||
<label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
|
||||
Kategórie problému
|
||||
</label>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '10px' }}>
|
||||
{categories.map(category => (
|
||||
<label key={category.id} style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.categories.includes(category.id)}
|
||||
onChange={(e) => handleCategoryChange(category.id, e.target.checked)}
|
||||
style={{ marginRight: '8px' }}
|
||||
/>
|
||||
{category.name}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '20px' }}>
|
||||
<label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
|
||||
Popis problému *
|
||||
</label>
|
||||
<textarea
|
||||
required
|
||||
value={formData.description}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '8px',
|
||||
border: '1px solid #d1d5db',
|
||||
borderRadius: '4px',
|
||||
minHeight: '100px'
|
||||
}}
|
||||
placeholder="Popíšte prečo považujete tento obsah za problematický..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
style={{
|
||||
padding: '12px 24px',
|
||||
backgroundColor: loading ? '#9ca3af' : '#3b82f6',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '6px',
|
||||
cursor: loading ? 'not-allowed' : 'pointer'
|
||||
}}
|
||||
>
|
||||
{loading ? 'Odesilá sa...' : 'Odoslať hlásenie'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div style={{ marginTop: '30px' }}>
|
||||
<Link href="/" style={{ color: '#6b7280' }}>← Späť na hlavnú stránku</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ReportPage
|
||||
Reference in New Issue
Block a user