Test Mini Carta ‐ Resumen y práctica - enchufin/el-brases-menu GitHub Wiki
Estructura Básica
src/
├── data/
│ └── carta.json # Datos de la carta (grupos, secciones, items)
├── hooks/
│ └── useCarta.js # Hook gestor de datos (API intermedia)
└── componentes/
├── grupo/Grupo.jsx
├── seccion/Seccion.jsx
└── item/Item.jsx
carta.json
Datos {
"grupos": [
{
"id": "comidas",
"nombre": "Comidas",
"secciones": [
"frias",
"calientes"
]
},
{
"id": "bebidas",
"nombre": "Bebidas",
"secciones": [
"refrescos",
"cervezas"
]
}
],
"secciones": [
{
"id": "frias",
"nombre": "Frías",
"items": [
"ensalada",
"sopa"
]
},
{
"id": "calientes",
"nombre": "Calientes",
"items": [
"pizza",
"hamburguesa"
]
},
{
"id": "cervezas",
"nombre": "Cervezas",
"items": [
"estrella",
"corona"
]
},
{
"id": "refrescos",
"nombre": "Refrescos",
"items": [
"coca_cola",
"fanta"
]
}
],
"items": [
{
"id": "ensalada",
"nombre": "Ensalada",
"precio": 5.00
},
{
"id": "sopa",
"nombre": "Sopa",
"precio": 4.50
},
{
"id": "pizza",
"nombre": "Pizza",
"precio": 8.00
},
{
"id": "hamburguesa",
"nombre": "Hamburguesa",
"precio": 7.50
},
{
"id": "estrella",
"nombre": "Estrella",
"precio": 3.00
},
{
"id": "corona",
"nombre": "Corona",
"precio": 3.50
},
{
"id": "fanta",
"nombre": "Fanta",
"precio": 2.00
},
{
"id": "coca_cola",
"nombre": "Coca Cola",
"precio": 2.50
}
]
}
useCarta.js
Rol Clave: Función principal: Centralizar el acceso a datos y prepararlos para los componentes.
// Ejemplo de flujo de datos
App → Grupo → useGrupo(id) → Grupo (con secciones)
│
└─→ Seccion → useSeccion(id) → Seccion (con items)
│
└─→ Item → useItem(id) → Item (datos completos)
Características:
- Búsquedas por ID:
export const useItem = (itemId) => {
return carta.items.find(i => i.id === itemId) || null;
};
2. Transformación de datos:
// Mapea grupos con nombres de secciones
export const listaGrupos = carta.grupos.map(g => ({
secciones: g.secciones.map(s => ({
id: s,
nombre: carta.secciones.find(sec => sec.id === s)?.nombre
}))
}));