202 lines
8.2 KiB
JavaScript
202 lines
8.2 KiB
JavaScript
import { useState, useEffect } from 'react';
|
||
import { useRouter } from 'next/router';
|
||
import Navbar from '../Navbar';
|
||
|
||
export default function Admin() {
|
||
const [token, setToken] = useState('');
|
||
const [authorized, setAuthorized] = useState(false);
|
||
const [tab, setTab] = useState('crear');
|
||
const [stats, setStats] = useState({ total: 0, top: [] });
|
||
const [form, setForm] = useState({ title: '', tags: '', content: '' });
|
||
const [posts, setPosts] = useState([]);
|
||
const router = useRouter();
|
||
|
||
useEffect(() => {
|
||
const t = localStorage.getItem('blog_token');
|
||
if (!t) {
|
||
router.push('/login');
|
||
} else {
|
||
setToken(t);
|
||
setAuthorized(true);
|
||
loadPosts();
|
||
loadStats(t);
|
||
}
|
||
}, []);
|
||
|
||
const loadPosts = () => {
|
||
fetch('http://localhost:9002/posts')
|
||
.then(r => r.json())
|
||
.then(setPosts)
|
||
.catch(e => console.error("Error cargando posts"));
|
||
};
|
||
|
||
const loadStats = (t) => {
|
||
fetch('http://localhost:9002/posts/stats', {
|
||
headers: { 'Authorization': `Bearer ${t || token}` }
|
||
})
|
||
.then(r => r.json())
|
||
.then(setStats)
|
||
.catch(e => console.error("Error en stats"));
|
||
};
|
||
|
||
const handleLogout = () => {
|
||
localStorage.removeItem('blog_token');
|
||
router.push('/login');
|
||
};
|
||
|
||
const handleSave = async (e) => {
|
||
e.preventDefault();
|
||
const res = await fetch('http://localhost:9002/posts', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Authorization': `Bearer ${token}`
|
||
},
|
||
body: JSON.stringify(form)
|
||
});
|
||
if (res.ok) {
|
||
alert('Publicado con éxito');
|
||
setForm({ title: '', tags: '', content: '' });
|
||
loadPosts();
|
||
}
|
||
};
|
||
|
||
const handleDelete = async (id) => {
|
||
if(!confirm('¿Estás seguro de eliminar este post?')) return;
|
||
await fetch(`http://localhost:9002/posts/${id}`, {
|
||
method: 'DELETE',
|
||
headers: { 'Authorization': `Bearer ${token}` }
|
||
});
|
||
loadPosts();
|
||
};
|
||
|
||
// Protección de renderizado
|
||
if (!authorized) {
|
||
return <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh', fontFamily: 'sans-serif' }}>
|
||
<h2 style={{ color: '#64748b' }}>Verificando credenciales...</h2>
|
||
</div>;
|
||
}
|
||
|
||
return (
|
||
<div style={{ backgroundColor: '#f8fafc', minHeight: '100vh', fontFamily: 'sans-serif', paddingBottom: '50px' }}>
|
||
<Navbar />
|
||
|
||
<div style={{ maxWidth: '1000px', margin: '0 auto', padding: '40px 20px' }}>
|
||
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '40px' }}>
|
||
<h1 style={{ color: '#0f172a', margin: 0, fontSize: '2rem' }}>Panel Administrativo</h1>
|
||
<button
|
||
onClick={handleLogout}
|
||
style={{ padding: '10px 20px', backgroundColor: '#ef4444', color: 'white', border: 'none', borderRadius: '8px', fontWeight: 'bold', cursor: 'pointer' }}
|
||
>
|
||
Cerrar Sesión 🔒
|
||
</button>
|
||
</div>
|
||
|
||
{/* NAVEGACIÓN */}
|
||
<div style={{ display: 'flex', gap: '10px', marginBottom: '30px' }}>
|
||
<button
|
||
onClick={() => setTab('crear')}
|
||
style={{
|
||
padding: '12px 24px', borderRadius: '10px', fontWeight: 'bold', cursor: 'pointer',
|
||
border: '2px solid #0f172a',
|
||
backgroundColor: tab === 'crear' ? '#0f172a' : 'transparent',
|
||
color: tab === 'crear' ? 'white' : '#0f172a'
|
||
}}
|
||
>
|
||
✏️ Crear Post
|
||
</button>
|
||
<button
|
||
onClick={() => setTab('lista')}
|
||
style={{
|
||
padding: '12px 24px', borderRadius: '10px', fontWeight: 'bold', cursor: 'pointer',
|
||
border: '2px solid #0f172a',
|
||
backgroundColor: tab === 'lista' ? '#0f172a' : 'transparent',
|
||
color: tab === 'lista' ? 'white' : '#0f172a'
|
||
}}
|
||
>
|
||
📋 Gestionar
|
||
</button>
|
||
<button
|
||
onClick={() => { setTab('stats'); loadStats(); }}
|
||
style={{
|
||
padding: '12px 24px', borderRadius: '10px', fontWeight: 'bold', cursor: 'pointer',
|
||
border: '2px solid #0f172a',
|
||
backgroundColor: tab === 'stats' ? '#0f172a' : 'transparent',
|
||
color: tab === 'stats' ? 'white' : '#0f172a'
|
||
}}
|
||
>
|
||
📊 Estadísticas
|
||
</button>
|
||
</div>
|
||
|
||
{/* CONTENIDO */}
|
||
{tab === 'crear' && (
|
||
<form onSubmit={handleSave} style={{ backgroundColor: 'white', padding: '30px', borderRadius: '16px', boxShadow: '0 4px 6px rgba(0,0,0,0.05)', border: '1px solid #e2e8f0' }}>
|
||
<input
|
||
placeholder="Título"
|
||
value={form.title}
|
||
onChange={e => setForm({...form, title: e.target.value})}
|
||
style={{ width: '100%', padding: '15px', marginBottom: '20px', borderRadius: '8px', border: '1px solid #e2e8f0', fontSize: '1rem', boxSizing: 'border-box' }}
|
||
required
|
||
/>
|
||
<input
|
||
placeholder="Tags"
|
||
value={form.tags}
|
||
onChange={e => setForm({...form, tags: e.target.value})}
|
||
style={{ width: '100%', padding: '15px', marginBottom: '20px', borderRadius: '8px', border: '1px solid #e2e8f0', fontSize: '1rem', boxSizing: 'border-box' }}
|
||
/>
|
||
<textarea
|
||
placeholder="Contenido (puedes usar HTML)"
|
||
value={form.content}
|
||
onChange={e => setForm({...form, content: e.target.value})}
|
||
style={{ width: '100%', padding: '15px', marginBottom: '20px', borderRadius: '8px', border: '1px solid #e2e8f0', fontSize: '1rem', height: '250px', boxSizing: 'border-box', fontFamily: 'inherit' }}
|
||
required
|
||
/>
|
||
<button style={{ width: '100%', padding: '15px', backgroundColor: '#2563eb', color: 'white', border: 'none', borderRadius: '8px', fontWeight: 'bold', fontSize: '1.1rem', cursor: 'pointer' }}>
|
||
Publicar Artículo
|
||
</button>
|
||
</form>
|
||
)}
|
||
|
||
{tab === 'lista' && (
|
||
<div style={{ backgroundColor: 'white', borderRadius: '16px', border: '1px solid #e2e8f0', overflow: 'hidden' }}>
|
||
{posts.map(p => (
|
||
<div key={p.id} style={{ display: 'flex', justifyContent: 'space-between', padding: '20px', borderBottom: '1px solid #f1f5f9', alignItems: 'center' }}>
|
||
<span style={{ fontWeight: '600', color: '#334155' }}>{p.title}</span>
|
||
<button
|
||
onClick={() => handleDelete(p.id)}
|
||
style={{ backgroundColor: '#fee2e2', color: '#ef4444', border: 'none', padding: '8px 15px', borderRadius: '6px', fontWeight: 'bold', cursor: 'pointer' }}
|
||
>
|
||
Eliminar
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{tab === 'stats' && (
|
||
<div style={{ backgroundColor: 'white', padding: '30px', borderRadius: '16px', border: '1px solid #e2e8f0' }}>
|
||
<div style={{ textAlign: 'center', marginBottom: '40px', padding: '30px', backgroundColor: '#f0f9ff', borderRadius: '12px' }}>
|
||
<h3 style={{ margin: 0, color: '#0369a1' }}>Visitas Totales</h3>
|
||
<p style={{ fontSize: '3rem', fontWeight: '800', margin: '10px 0', color: '#0284c7' }}>{stats.total}</p>
|
||
</div>
|
||
<h4 style={{ marginBottom: '20px' }}>Ranking de Lectura</h4>
|
||
{stats.top.map((s, i) => (
|
||
<div key={i} style={{ marginBottom: '20px' }}>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
|
||
<span style={{ fontSize: '0.9rem', fontWeight: '600' }}>{s.title}</span>
|
||
<span style={{ fontSize: '0.9rem', color: '#2563eb', fontWeight: 'bold' }}>{s.views} views</span>
|
||
</div>
|
||
<div style={{ width: '100%', height: '8px', backgroundColor: '#f1f5f9', borderRadius: '4px', overflow: 'hidden' }}>
|
||
<div style={{ width: `${(s.views / (stats.total || 1)) * 100}%`, height: '100%', backgroundColor: '#2563eb' }}></div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
</div>
|
||
</div>
|
||
);
|
||
} |