Implement News System with Admin UI and Homepage Integration
This commit is contained in:
Hördle Bot
@@ -51,6 +51,20 @@ interface Song {
|
||||
excludeFromGlobal: boolean;
|
||||
}
|
||||
|
||||
interface News {
|
||||
id: number;
|
||||
title: string;
|
||||
content: string;
|
||||
author: string | null;
|
||||
publishedAt: string;
|
||||
featured: boolean;
|
||||
specialId: number | null;
|
||||
special: {
|
||||
id: number;
|
||||
name: string;
|
||||
} | null;
|
||||
}
|
||||
|
||||
type SortField = 'id' | 'title' | 'artist' | 'createdAt' | 'releaseYear' | 'activations' | 'averageRating';
|
||||
type SortDirection = 'asc' | 'desc';
|
||||
|
||||
@@ -92,6 +106,20 @@ export default function AdminPage() {
|
||||
const [editSpecialEndDate, setEditSpecialEndDate] = useState('');
|
||||
const [editSpecialCurator, setEditSpecialCurator] = useState('');
|
||||
|
||||
// News state
|
||||
const [news, setNews] = useState<News[]>([]);
|
||||
const [newNewsTitle, setNewNewsTitle] = useState('');
|
||||
const [newNewsContent, setNewNewsContent] = useState('');
|
||||
const [newNewsAuthor, setNewNewsAuthor] = useState('');
|
||||
const [newNewsFeatured, setNewNewsFeatured] = useState(false);
|
||||
const [newNewsSpecialId, setNewNewsSpecialId] = useState<number | null>(null);
|
||||
const [editingNewsId, setEditingNewsId] = useState<number | null>(null);
|
||||
const [editNewsTitle, setEditNewsTitle] = useState('');
|
||||
const [editNewsContent, setEditNewsContent] = useState('');
|
||||
const [editNewsAuthor, setEditNewsAuthor] = useState('');
|
||||
const [editNewsFeatured, setEditNewsFeatured] = useState(false);
|
||||
const [editNewsSpecialId, setEditNewsSpecialId] = useState<number | null>(null);
|
||||
|
||||
// Edit state
|
||||
const [editingId, setEditingId] = useState<number | null>(null);
|
||||
const [editTitle, setEditTitle] = useState('');
|
||||
@@ -142,6 +170,8 @@ export default function AdminPage() {
|
||||
fetchSongs();
|
||||
fetchGenres();
|
||||
fetchDailyPuzzles();
|
||||
fetchSpecials();
|
||||
fetchNews();
|
||||
}
|
||||
}, []);
|
||||
|
||||
@@ -156,6 +186,8 @@ export default function AdminPage() {
|
||||
fetchSongs();
|
||||
fetchGenres();
|
||||
fetchDailyPuzzles();
|
||||
fetchSpecials();
|
||||
fetchNews();
|
||||
} else {
|
||||
alert('Wrong password');
|
||||
}
|
||||
@@ -394,6 +426,94 @@ export default function AdminPage() {
|
||||
}
|
||||
};
|
||||
|
||||
// News functions
|
||||
const fetchNews = async () => {
|
||||
const res = await fetch('/api/news', {
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setNews(data);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateNews = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!newNewsTitle.trim() || !newNewsContent.trim()) return;
|
||||
|
||||
const res = await fetch('/api/news', {
|
||||
method: 'POST',
|
||||
headers: getAuthHeaders(),
|
||||
body: JSON.stringify({
|
||||
title: newNewsTitle,
|
||||
content: newNewsContent,
|
||||
author: newNewsAuthor || null,
|
||||
featured: newNewsFeatured,
|
||||
specialId: newNewsSpecialId
|
||||
}),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
setNewNewsTitle('');
|
||||
setNewNewsContent('');
|
||||
setNewNewsAuthor('');
|
||||
setNewNewsFeatured(false);
|
||||
setNewNewsSpecialId(null);
|
||||
fetchNews();
|
||||
} else {
|
||||
alert('Failed to create news');
|
||||
}
|
||||
};
|
||||
|
||||
const startEditNews = (newsItem: News) => {
|
||||
setEditingNewsId(newsItem.id);
|
||||
setEditNewsTitle(newsItem.title);
|
||||
setEditNewsContent(newsItem.content);
|
||||
setEditNewsAuthor(newsItem.author || '');
|
||||
setEditNewsFeatured(newsItem.featured);
|
||||
setEditNewsSpecialId(newsItem.specialId);
|
||||
};
|
||||
|
||||
const saveEditedNews = async () => {
|
||||
if (editingNewsId === null) return;
|
||||
|
||||
const res = await fetch('/api/news', {
|
||||
method: 'PUT',
|
||||
headers: getAuthHeaders(),
|
||||
body: JSON.stringify({
|
||||
id: editingNewsId,
|
||||
title: editNewsTitle,
|
||||
content: editNewsContent,
|
||||
author: editNewsAuthor || null,
|
||||
featured: editNewsFeatured,
|
||||
specialId: editNewsSpecialId
|
||||
}),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
setEditingNewsId(null);
|
||||
fetchNews();
|
||||
} else {
|
||||
alert('Failed to update news');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteNews = async (id: number) => {
|
||||
if (!confirm('Delete this news item?')) return;
|
||||
|
||||
const res = await fetch('/api/news', {
|
||||
method: 'DELETE',
|
||||
headers: getAuthHeaders(),
|
||||
body: JSON.stringify({ id }),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
fetchNews();
|
||||
} else {
|
||||
alert('Failed to delete news');
|
||||
}
|
||||
};
|
||||
|
||||
// Load specials after auth
|
||||
useEffect(() => {
|
||||
if (isAuthenticated) fetchSpecials();
|
||||
@@ -1182,6 +1302,163 @@ export default function AdminPage() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* News Management */}
|
||||
<div className="admin-card" style={{ marginBottom: '2rem' }}>
|
||||
<h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '1rem' }}>Manage News & Announcements</h2>
|
||||
<form onSubmit={handleCreateNews} style={{ marginBottom: '1rem' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
|
||||
<input
|
||||
type="text"
|
||||
value={newNewsTitle}
|
||||
onChange={e => setNewNewsTitle(e.target.value)}
|
||||
placeholder="News Title"
|
||||
className="form-input"
|
||||
required
|
||||
/>
|
||||
<textarea
|
||||
value={newNewsContent}
|
||||
onChange={e => setNewNewsContent(e.target.value)}
|
||||
placeholder="Content (Markdown supported)"
|
||||
className="form-input"
|
||||
rows={4}
|
||||
required
|
||||
style={{ fontFamily: 'monospace', fontSize: '0.875rem' }}
|
||||
/>
|
||||
<div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap', alignItems: 'center' }}>
|
||||
<input
|
||||
type="text"
|
||||
value={newNewsAuthor}
|
||||
onChange={e => setNewNewsAuthor(e.target.value)}
|
||||
placeholder="Author (optional)"
|
||||
className="form-input"
|
||||
style={{ maxWidth: '200px' }}
|
||||
/>
|
||||
<select
|
||||
value={newNewsSpecialId || ''}
|
||||
onChange={e => setNewNewsSpecialId(e.target.value ? Number(e.target.value) : null)}
|
||||
className="form-input"
|
||||
style={{ maxWidth: '200px' }}
|
||||
>
|
||||
<option value="">No Special Link</option>
|
||||
{specials.map(s => (
|
||||
<option key={s.id} value={s.id}>{s.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', fontSize: '0.875rem', cursor: 'pointer' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={newNewsFeatured}
|
||||
onChange={e => setNewNewsFeatured(e.target.checked)}
|
||||
/>
|
||||
Featured
|
||||
</label>
|
||||
<button type="submit" className="btn-primary">Add News</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
|
||||
{news.map(newsItem => (
|
||||
<div key={newsItem.id} style={{
|
||||
background: newsItem.featured ? '#fef3c7' : '#f3f4f6',
|
||||
padding: '0.75rem',
|
||||
borderRadius: '0.5rem',
|
||||
border: newsItem.featured ? '2px solid #f59e0b' : '1px solid #e5e7eb'
|
||||
}}>
|
||||
{editingNewsId === newsItem.id ? (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
|
||||
<input
|
||||
type="text"
|
||||
value={editNewsTitle}
|
||||
onChange={e => setEditNewsTitle(e.target.value)}
|
||||
className="form-input"
|
||||
/>
|
||||
<textarea
|
||||
value={editNewsContent}
|
||||
onChange={e => setEditNewsContent(e.target.value)}
|
||||
className="form-input"
|
||||
rows={4}
|
||||
style={{ fontFamily: 'monospace', fontSize: '0.875rem' }}
|
||||
/>
|
||||
<div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap', alignItems: 'center' }}>
|
||||
<input
|
||||
type="text"
|
||||
value={editNewsAuthor}
|
||||
onChange={e => setEditNewsAuthor(e.target.value)}
|
||||
placeholder="Author"
|
||||
className="form-input"
|
||||
style={{ maxWidth: '200px' }}
|
||||
/>
|
||||
<select
|
||||
value={editNewsSpecialId || ''}
|
||||
onChange={e => setEditNewsSpecialId(e.target.value ? Number(e.target.value) : null)}
|
||||
className="form-input"
|
||||
style={{ maxWidth: '200px' }}
|
||||
>
|
||||
<option value="">No Special Link</option>
|
||||
{specials.map(s => (
|
||||
<option key={s.id} value={s.id}>{s.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', fontSize: '0.875rem' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={editNewsFeatured}
|
||||
onChange={e => setEditNewsFeatured(e.target.checked)}
|
||||
/>
|
||||
Featured
|
||||
</label>
|
||||
<button onClick={saveEditedNews} className="btn-primary">Save</button>
|
||||
<button onClick={() => setEditingNewsId(null)} className="btn-secondary">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '0.5rem' }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.25rem' }}>
|
||||
{newsItem.featured && (
|
||||
<span style={{
|
||||
background: '#f59e0b',
|
||||
color: 'white',
|
||||
padding: '0.125rem 0.375rem',
|
||||
borderRadius: '0.25rem',
|
||||
fontSize: '0.625rem',
|
||||
fontWeight: '600'
|
||||
}}>
|
||||
⭐ FEATURED
|
||||
</span>
|
||||
)}
|
||||
<h3 style={{ margin: 0, fontSize: '1rem', fontWeight: '600' }}>{newsItem.title}</h3>
|
||||
</div>
|
||||
<div style={{ fontSize: '0.75rem', color: '#666', marginBottom: '0.5rem' }}>
|
||||
{new Date(newsItem.publishedAt).toLocaleDateString('de-DE')}
|
||||
{newsItem.author && ` • by ${newsItem.author}`}
|
||||
{newsItem.special && ` • ★ ${newsItem.special.name}`}
|
||||
</div>
|
||||
<p style={{ margin: 0, fontSize: '0.875rem', whiteSpace: 'pre-wrap' }}>
|
||||
{newsItem.content.length > 150
|
||||
? newsItem.content.substring(0, 150) + '...'
|
||||
: newsItem.content}
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '0.25rem', marginLeft: '1rem' }}>
|
||||
<button onClick={() => startEditNews(newsItem)} className="btn-secondary" style={{ padding: '0.25rem 0.5rem', fontSize: '0.75rem' }}>Edit</button>
|
||||
<button onClick={() => handleDeleteNews(newsItem.id)} className="btn-danger" style={{ padding: '0.25rem 0.5rem', fontSize: '0.75rem' }}>Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{news.length === 0 && (
|
||||
<p style={{ color: '#666', fontSize: '0.875rem', textAlign: 'center', padding: '1rem' }}>
|
||||
No news items yet. Create one above!
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="admin-card" style={{ marginBottom: '2rem' }}>
|
||||
<h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '1rem' }}>Upload Songs</h2>
|
||||
<form onSubmit={handleBatchUpload}>
|
||||
|
||||
Reference in New Issue
Block a user