contenido es ordenable, botón de nueva unidad después de cada unidad, mejora de UX con unidades expandidas #185

Guillermo.Arrieta · 2026-03-17T18:47:22Z

Guillermo.Arrieta commented

2026-03-17 18:47:22 +00:00

La lista de unidades del contenido temático ahora se puede ordenar con drag and drop. También se colocó el botón de Nueva Unidad como overlay después de cada unidad para agregar más unidades. Finalmente, la primera unidad aparece expandida al llegar a la tab de contenido y después de eso se respetan las unidades que el usuario quiera tener expandidas

Guillermo.Arrieta added 1 commit 2026-03-17 18:47:23 +00:00

close #182 : se implementó la lista de unidades como sortable con dnd-kit y se solucionó el parpadeo al reordenar. 518b1124d8

Se convirtió la lista de unidades en un sortable controlado usando @dnd-kit/react; al arrastrar desde el GripVertical se reordenan las unidades en la UI y persiste el orden en la base de datos.
Se colocó el botón "Nueva unidad" como un overlay que aparece debajo de cada unidad al hacer hover (posición bottom) y su clic inserta una unidad entre las existentes o al final si se pulsa después de la última, sin desplazar el layout.
Se hizo que, al cargar el componente por primera vez, la primera unidad quede desplegada automáticamente; una vez que el usuario realiza cualquier modificación y se guarda, se empieza a respetar el conjunto de unidades que el usuario tenga expandidas (la bandera de inicialización se activa durante la persistencia).
Se arregló un bug en el que al reordenar la lista de unidades sucedía una recarga de la lista.
Por qué ocurría el parpadeo y cómo fue arreglado:
- Causa: tras el reorder optimista la UI quedaba actualizada, pero cuando la lista fresca llegaba del servidor un useEffect reasignaba IDs por posición (índice), provocando que React creyera que los elementos eran nuevos, se destruyeran y se volvieran a montar — de ahí el "parpadeo" y la pérdida del estado de los acordiones.
- Solución (Escudo Optimista): se añadieron dos defensas.
  1) Escudo de aborto temprano: si el payload actual (UI optimista) y el payload entrante del servidor son idénticos (JSON), se aborta el procesamiento del useEffect para evitar re-render innecesario.
  2) Reciclaje por contenido: cuando los datos difieren, las IDs locales se reciclan buscando coincidencias por contenido (título) en lugar de por posición, de modo que cada unidad conserva su ID real aunque cambie de lugar; así React mueve las tarjetas en vez de destruirlas.

Con esto, el reorder es estable, el overlay de inserción funciona sin alterar el flow visual y el estado de expansiones se preserva tras ediciones del usuario.

Guillermo.Arrieta merged commit fe8f1d4753 into main

2026-03-17 18:47:56 +00:00

Guillermo.Arrieta deleted branch issue/182-funcionalidad-de-reacomodo-e-insercin-aleatoria-de

2026-03-17 18:47:56 +00:00

Guillermo.Arrieta referenced this issue from a commit

2026-03-17 18:47:57 +00:00

Merge pull request 'contenido es ordenable, botón de nueva unidad después de cada unidad, mejora de UX con unidades expandidas' (#185) from issue/182-funcionalidad-de-reacomodo-e-insercin-aleatoria-de into main

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Reference: Guillermo.Arrieta/acad-ia-2#185