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

Datos carta.json

{
      "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
            }
      ]
}

Rol Clave: useCarta.js

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:

1. 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 
  }))
}));