212 lines
6.6 KiB
TypeScript
212 lines
6.6 KiB
TypeScript
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 |