El patrón Mediator centraliza la coordinación entre varios componentes relacionados.
1. El Problema de Partida
El sidebar de knowledge tiene 3 controles interdependientes: buscador (searchQuery), filtro de categoría (activeCategory) y estado plegado de grupos (collapsedGroups). Sin coordinación, cada componente necesitaría conocer a los otros dos directamente (si buscas, se debe expandir el grupo con resultados; si cambias de categoría, se debe limpiar la búsqueda), generando referencias cruzadas entre SearchBox, CategoryFilter y ModuleLessonsNav.
2. La Solución Mediator
// src/lib/sidebar/SidebarMediator.js
export class SidebarMediator {
constructor({ onCategoryChange, onExpandGroup, onClearSearch }) {
this.onCategoryChange = onCategoryChange;
this.onExpandGroup = onExpandGroup;
this.onClearSearch = onClearSearch;
}
notify(sender, payload) {
if (sender === 'search' && payload.matchGroup) {
this.onExpandGroup(payload.matchGroup); // Expande el grupo con resultados
}
if (sender === 'category') {
this.onClearSearch(); // Limpia búsqueda al cambiar de categoría
this.onCategoryChange(payload.category);
}
}
}3. Uso en el componente del sidebar
// src/components/knowledge/KnowledgeSidebar.jsx
const mediator = new SidebarMediator({
onCategoryChange: setActiveCategory,
onExpandGroup: (key) => setCollapsedGroups((prev) => ({ ...prev, [key]: false })),
onClearSearch: () => setSearchQuery(''),
});
<SearchBox onSearch={(q, matchGroup) => mediator.notify('search', { query: q, matchGroup })} />
<CategoryFilter onChange={(category) => mediator.notify('category', { category })} />4. Ventajas
SearchBoxyCategoryFilterno se conocen entre sí, solo hablan con el mediador.- Regla de negocio en un solo lugar: "cambiar categoría limpia búsqueda" vive en
SidebarMediator, no repartida en cada componente. - Fácil de extender: un cuarto control (ej. orden alfabético) solo requiere añadir su caso en
notify().