Panel admin CRUD conectado a la API

frontend/src/
├── services/
│   └── articulosService.ts             ← ACTUALIZADO: + crear, actualizar, eliminar, upload
├── store/
│   └── articulosStore.ts               ← ACTUALIZADO: toggleEstado con optimismo
├── hooks/
│   └── useFormularioArticulo.ts        (semana 3 — se reutiliza sin cambios)
└── pages/
    └── admin/
        ├── NuevoArticulo.tsx           ← ACTUALIZADO: conectado a la API real
        └── EditarArticulo.tsx          ← ACTUALIZADO: carga + edita vía articulosService

// src/services/articulosService.ts — métodos de escritura añadidos

// ── Escritura ———————————————————————————————————————————————
// Se añaden al objeto articulosService ya existente
create: (datos: NuevoArticuloInput) =>
  fetchJSON<ApiResponse<Articulo>>('/articulos', {
    method: 'POST',
    body: JSON.stringify(datos),
  }),

actualizar: (slug: string, cambios: ActualizarArticuloInput) =>
  fetchJSON<ApiResponse<Articulo>>(`/articulos/${slug}`, {
    method: 'PUT',
    body: JSON.stringify(cambios),
  }),

eliminar: (id: number) =>
  fetch(`${BASE}/articulos/${id}`, { method: 'DELETE' }).then((res) => {
    if (!res.ok && res.status !== 204) throw new Error(`HTTP ${res.status}`)
  }),

// Upload de imagen — FormData, no JSON
upload: async (file: File): Promise<string> => {
  const form = new FormData()
  form.append('imagen', file)
  // ⚠️ NO pongas Content-Type manual — el browser añade el boundary automáticamente
  const res = await fetch(`${BASE}/upload`, { method: 'POST', body: form })
  if (!res.ok) throw new Error('Error al subir la imagen')
  const json = await res.json() as ApiResponse<{ filename: string }>
  return json.data.filename
},

// src/services/articulosService.ts — versión completa
import type { Articulo, NuevoArticulo, ActualizarArticulo, ApiResponse } from "@/types";

const BASE = import.meta.env.VITE_API_URL ?? "http://localhost:3001";

async function fetchJSON<T>(url: string, init?: RequestInit): Promise<T> {
  const res = await fetch(`${BASE}${url}`, {
    headers: { "Content-Type": "application/json" },
    ...init,
  });
  if (!res.ok) {
    const body = await res.json().catch(() => ({}));
    throw new Error(body.error ?? `HTTP ${res.status}`);
  }
  return res.json() as Promise<T>;
}

export const articulosService = {
  // Lectura (ya existían desde S6)
  getAll: (p?: { estado?: string; busqueda?: string }) => {
    const qs = p ? new URLSearchParams(p as Record<string, string>).toString() : "";
    return fetchJSON<ApiResponse<Articulo[]>>(`/api/articulos${qs ? `?${qs}` : ""}`);
  },
  getBySlug: (slug: string) =>
    fetchJSON<ApiResponse<Articulo>>(`/api/articulos/${slug}`),

  // Escritura (nuevos esta semana)
  crear: (data: NuevoArticulo) =>
    fetchJSON<ApiResponse<Articulo>>("/api/articulos", {
      method: "POST",
      body: JSON.stringify(data),
    }),

  actualizar: (slug: string, data: ActualizarArticulo) =>
    fetchJSON<ApiResponse<Articulo>>(`/api/articulos/${slug}`, {
      method: "PUT",
      body: JSON.stringify(data),
    }),

  eliminar: (id: number) =>
    fetch(`${BASE}/api/articulos/${id}`, { method: "DELETE" }).then((r) => {
      if (!r.ok && r.status !== 204) throw new Error(`HTTP ${r.status}`);
    }),

  // Upload de imagen — FormData, no JSON
  upload: async (file: File): Promise<string> => {
    const form = new FormData();
    form.append("imagen", file);
    // ⚠️ NO pongas Content-Type manual — el browser añade el boundary automáticamente
    const res = await fetch(`${BASE}/api/upload`, { method: "POST", body: form });
    if (!res.ok) throw new Error("Error al subir la imagen");
    const json = (await res.json()) as ApiResponse<{ filename: string }>;
    return json.data.filename;
  },

  // Construye la URL pública de una imagen
  resolverImagen: (imagen: string | null): string => {
    if (!imagen) return "/assets/img/default-cover.svg";
    if (imagen.startsWith("http") || imagen.startsWith("/")) return imagen;
    return `/uploads/${imagen}`;
  },
};

npm install sweetalert2

// En AdminListado.tsx — botón de eliminar con confirmación
import Swal from 'sweetalert2'
import { articulosService } from '@/services/articulosService'
import { useArticulosStore } from '@/store/articulosStore'

function BotonEliminar({ id, titulo }: { id: number; titulo: string }) {
  const eliminarArticulo = useArticulosStore((s) => s.eliminarArticulo)

  async function handleEliminar() {
    const resultado = await Swal.fire({
      title: '¿Eliminar publicación?',
      text: `"${titulo}" se eliminará permanentemente.`,
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#ef4444',
      cancelButtonText: 'Cancelar',
      confirmButtonText: 'Sí, eliminar',
    })

    if (!resultado.isConfirmed) return

    try {
      await articulosService.eliminar(id)
      // Actualización local — sin ir al servidor de nuevo
      eliminarArticulo(id)
    } catch (err) {
      Swal.fire('Error', 'No se pudo eliminar el artículo.', 'error')
    }
  }

  return (
    <button onClick={handleEliminar} className="btn-action btn-action--delete" title="Eliminar">
      <i className="bi bi-trash" />
    </button>
  )
}

// src/pages/admin/NuevoArticulo.tsx
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { articulosService } from '@/services/articulosService'
import { useFormularioArticulo } from '@/hooks/useFormularioArticulo'
import { useArticulosStore } from '@/store/articulosStore'

export function NuevoArticulo() {
  const navigate = useNavigate()
  const cargarArticulos = useArticulosStore((s) => s.cargarArticulos)
  const { campos, setCampo, reset, esValido } = useFormularioArticulo()

  const [imagenFile, setImagenFile] = useState<File | null>(null)
  const [preview, setPreview] = useState<string | null>(null)
  const [enviando, setEnviando] = useState(false)
  const [errorApi, setErrorApi] = useState<string | null>(null)

  function handleImagenChange(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0] ?? null
    setImagenFile(file)
    // Preview inmediato con URL local — sin esperar al servidor
    setPreview(file ? URL.createObjectURL(file) : null)
  }

  async function handleSubmit(e: React.BaseSyntheticEvent) {
    e.preventDefault()
    if (!esValido) return
    setEnviando(true)
    setErrorApi(null)

    try {
      // Paso 1: subir imagen si hay archivo seleccionado
      let imagen: string | undefined
      if (imagenFile) {
        imagen = await articulosService.upload(imagenFile)
      }

      // Paso 2: crear el artículo con el filename (no la URL completa)
      await articulosService.crear({
        titulo:      campos.titulo,
        extracto:    campos.extracto,
        contenido:   campos.contenido,
        imagen,
        categoriaId: 1, // en S10 esto vendrá de un select cargado desde la API
      })

      // Paso 3: refrescar el store con noCache=true ANTES de navegar
      await cargarArticulos()
      reset()
      navigate('/admin')
    } catch (err) {
      setErrorApi(err instanceof Error ? err.message : 'Error desconocido')
      setEnviando(false)
    }
  }

  return (
    <main className="admin-page">
      <h1>Nueva publicación</h1>
      {errorApi && <div className="error-banner">{errorApi}</div>}
      <form onSubmit={handleSubmit} className="article-form">
        <div className="form-group">
          <img
            src={preview ?? articulosService.resolverImagen(null)}
            alt="Preview"
            className="image-preview"
            onError={(e) => { e.currentTarget.onerror = null; e.currentTarget.src = '/uploads/default-cover.svg' }}
          />
          <input type="file" accept="image/*" onChange={handleImagenChange} />
        </div>
        <input
          value={campos.titulo}
          onChange={(e) => setCampo('titulo', e.target.value)}
          placeholder="Título *"
          required
        />
        <textarea
          value={campos.extracto}
          onChange={(e) => setCampo('extracto', e.target.value)}
          placeholder="Extracto"
          rows={3}
        />
        <button type="submit" disabled={!esValido || enviando}>
          {enviando ? 'Guardando...' : 'Guardar artículo'}
        </button>
      </form>
    </main>
  )
}

// En articulosStore.ts — toggleEstado con optimismo
toggleEstado: async (id) => {
  const articulo = get().articulos.find((a) => a.id === id)
  if (!articulo) return

  const nuevoEstado = articulo.estado === 'publicado' ? 'borrador' : 'publicado'

  // 1. Cambiar la UI inmediatamente
  set((state) => ({
    articulos: state.articulos.map((a) =>
      a.id === id ? { ...a, estado: nuevoEstado } : a
    )
  }))

  try {
    // 2. Confirmar con el servidor
    await articulosService.actualizar(articulo.slug, { estado: nuevoEstado })
  } catch {
    // 3. Si falla, revertir al estado original
    set((state) => ({
      articulos: state.articulos.map((a) =>
        a.id === id ? { ...a, estado: articulo.estado } : a
      )
    }))
  }
},

---

## 5. Formulario EditarArticulo conectado a la API

El formulario de edición carga primero los datos actuales del artículo y luego envía solo los cambios. A diferencia de `NuevoArticulo`, si el usuario no selecciona una imagen nueva, la actual se conserva:

```tsx
// src/pages/admin/EditarArticulo.tsx
import { useState, useEffect } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { articulosService } from '@/services/articulosService'
import { useArticulosStore } from '@/store/articulosStore'
import type { Articulo, EstadoArticulo } from '@/types'

export function EditarArticulo() {
  const { slug } = useParams<{ slug: string }>()
  const navigate = useNavigate()
  const cargarArticulos = useArticulosStore((s) => s.cargarArticulos)

  const [articulo, setArticulo] = useState<Articulo | null>(null)
  const [titulo, setTitulo] = useState('')
  const [extracto, setExtracto] = useState('')
  const [estado, setEstado] = useState<EstadoArticulo>('borrador')
  const [imagenFile, setImagenFile] = useState<File | null>(null)
  const [preview, setPreview] = useState<string | null>(null)
  const [enviando, setEnviando] = useState(false)
  const [errorApi, setErrorApi] = useState<string | null>(null)

  // Cargar datos actuales del artículo
  useEffect(() => {
    if (!slug) return
    articulosService.getBySlug(slug)
      .then((res) => {
        const a = res.data
        setArticulo(a)
        setTitulo(a.titulo)
        setExtracto(a.extracto ?? '')
        setEstado(a.estado)
      })
      .catch(() => navigate('/admin'))
  }, [slug])

  async function handleSubmit(e: React.BaseSyntheticEvent) {
    e.preventDefault()
    if (!slug) return
    setEnviando(true)
    setErrorApi(null)

    try {
      // Subir nueva imagen solo si el usuario seleccionó una
      let imagen: string | undefined
      if (imagenFile) imagen = await articulosService.upload(imagenFile)

      await articulosService.actualizar(slug, {
        titulo, extracto, estado,
        // Solo incluir imagen si se subió una nueva — el backend preserva la existente
        ...(imagen ? { imagen } : {}),
      })

      await cargarArticulos()
      navigate('/admin')
    } catch (err) {
      setErrorApi(err instanceof Error ? err.message : 'Error desconocido')
      setEnviando(false)
    }
  }

  if (!articulo) return <div className="loading">Cargando...</div>

  return (
    <main className="admin-page">
      <h1>Editar: {articulo.titulo}</h1>
      {errorApi && <div className="error-banner">{errorApi}</div>}
      <form onSubmit={handleSubmit}>
        <img
          src={preview ?? articulosService.resolverImagen(articulo.imagen)}
          alt="Preview"
          className="image-preview"
          onError={(e) => { e.currentTarget.onerror = null; e.currentTarget.src = '/uploads/default-cover.svg' }}
        />
        <input type="file" accept="image/*"
          onChange={(e) => {
            const f = e.target.files?.[0] ?? null
            setImagenFile(f)
            setPreview(f ? URL.createObjectURL(f) : null)
          }}
        />
        <input value={titulo} onChange={(e) => setTitulo(e.target.value)} required />
        <textarea value={extracto} onChange={(e) => setExtracto(e.target.value)} rows={3} />
        <select value={estado} onChange={(e) => setEstado(e.target.value as EstadoArticulo)}>
          <option value="borrador">Borrador</option>
          <option value="publicado">Publicado</option>
        </select>
        <button type="submit" disabled={enviando}>
          {enviando ? 'Guardando...' : 'Guardar cambios'}
        </button>
      </form>
    </main>
  )
}

cd blog-cms
npm install
cd frontend && npm install && cd ..
cd backend && pnpm install
# Crea backend/.env con: PORT=3001 y DATABASE_URL="postgresql://..."
npx prisma migrate dev && pnpm seed
cd ..
npm run dev