Tenho uma página(hall) onde pedidos com o nome do cliente,nº da mesa e os itens escolhidos, são enviados para o firebase e preciso pegar esses pedidos e mostrar em uma outra página(kitchen).
Parte do hall onde mostra item e o price:
<div className={css(styles.menu)}>
{menu.map((el, index) => <MenuButton onClick={()=>setOrder(order.concat({item:el[0], price:el[1]}))} el={el} key={index}/>)}
</div>
O componente Card:
const CardKitchen = (props) => {
return (
<section>
<p>Cliente: {props.customer}</p>
Mesa: {props.table}
<div>
{props.clientOrder}
</div>
<p>Status: {props.status}</p>
<p>{props.time}</p>
<div>
<Button title= 'Pedido Pronto'/>
</div>
</section>
);
}
O arquivo Kitchen:
const Kitchen = () => {
const [customer, setCustomer] = useState([]);
useEffect(() => {
const order = [];
firebase
.firestore()
.collection('orders')
.get()
.then(snapshot => {
snapshot.forEach(doc => {
order.push({
id: doc.id,
...doc.data()
})
})
setCustomer(order)
})
}, []);
const updateStatus = doc => {
firebase
.firestore()
.collection('orders')
.doc(doc.id)
.update({
status: 'Pronto'
})
setCustomer(customer.filter(item => item.id !== doc.id))
};
return (
<main className={css(styles.main)}>
<Nav/>
<section className={css(styles.title)}>Cozinha
{customer.map((doc, index) =>
doc.status === 'Preparando' ? (
<div key={index}>
<CardKitchen
customer={doc.customer}
table={doc.table}
clientOrder={doc.order}
/>
<Button onClick={() => updateStatus(doc)} children={'Pedido pronto'}/>
</div>
) : null
)}
</section>
</main>
);
}