Para revisión #21
Conversation
Jimena merge to master
Se agrega el componente boton
the first styles are made
Jimena data
| import ChefName from "./components/utils/ChefName/index.js"; | ||
| import ShowWaiterName from "./components/utils/ShowWaiterName/index.js"; | ||
| import ShowChefName from "./components/utils/ShowChefName/index.js"; | ||
| import { db } from "./firebase"; |
There was a problem hiding this comment.
La división de los import está magnífica, los comentarios no son necesarios puedes eliminarlos.
| //firebase data | ||
| //import { firebase } from "./firebase"; | ||
|
|
||
| //JSON |
There was a problem hiding this comment.
Estos comentarios tampoco son necesarios, puedes eliminarlos.
| function App() { | ||
| const [order, setOrder] = useState(initialOrderState); | ||
| const [waiterName, setWaiterName] = useState(); | ||
| const [chefName, setChefName] = useState(); |
There was a problem hiding this comment.
Te recomiendo que inicialices tus states con algún valor.
| let items = [...order.items]; | ||
| // if existe producto en orden | ||
| if (order.items.find((item) => item.productName === product.productName)) { | ||
| // entonces incrementar uno a la cantidad |
There was a problem hiding this comment.
Los comentarios son buenos para nosotras cuando estamos comenzando y saber cual es le proceso que llevamos, pero en un ambiente laboral es recomendable no subirlos.
| if (order.items.find((item) => item.productName === product.productName)) { | ||
| // entonces incrementar uno a la cantidad | ||
| items = order.items.map((i) => { | ||
| if (i.productName === product.productName) { |
There was a problem hiding this comment.
Te recomiendo poner un nombre más descriptivo a tus variables, i a qué se refiere?
|
|
||
| setOrder({ ...order, items }); | ||
| /* setOrder({ ...order, items, total: calculateTotal(items) }); | ||
| console.log(items); */ |
There was a problem hiding this comment.
Hay que eliminar el código innecesario.
|
|
||
| const foundItem = order.items.find( | ||
| (item) => item.productName === product.productName | ||
| ); |
There was a problem hiding this comment.
Podrías simplificar esta función a algo como:
const foundItem = order.item.find(item => item.productName === product.productName)
| if (foundItem.quantity === 1) { | ||
| items = order.items.filter( | ||
| (item) => item.productName !== foundItem.productName | ||
| ); |
There was a problem hiding this comment.
Lo mismo acá con la simplificación de las funciones.
| } | ||
|
|
||
| setOrder({ ...order, items }); | ||
| /* setOrder({ ...order, items, total: calculateTotal(items) }); */ |
There was a problem hiding this comment.
Hay que eliminar código innecesario.
| Modal.setAppElement("#root"); | ||
|
|
||
| const calcTotal = (order) => | ||
| order.items.reduce((sum, item) => sum + item.subtotal, 0); |
There was a problem hiding this comment.
Puede ir toda la función en una misma línea:
const calcTotal = order => order...
| placedAt: new Date(), | ||
| total, | ||
| /* waiterName, | ||
| userName, */ |
There was a problem hiding this comment.
Hay que eliminar código innecesario.
| /* waiterName, | ||
| userName, */ | ||
| }); | ||
| console.log("ya se envío data a firebase D:"); |
| }; */ | ||
|
|
||
| /* Cómo le paso el total? */ | ||
|
|
| </div> | ||
|
|
||
| <InfoClients setUserName={setUserName} setWaiterName /> | ||
|
|
| Cancelar | ||
| </button> | ||
|
|
||
| {/* Este botón tendría que enviar a firebase */} |
There was a problem hiding this comment.
Eliminar comentario y espacios innecesarios
| @@ -0,0 +1,121 @@ | |||
| .container { | |||
| /* height: 90vh; | |||
| width: 100vw; */ | |||
| flex-wrap: wrap; | ||
| background-color: rgba(255, 255, 255, 0.3); | ||
| border-radius: 20px; | ||
| padding: 20px; |
There was a problem hiding this comment.
Es preferible que los valores de margin y padding tengan cierta secuencia, por ejemplo en múltiplos de 8.
| background-color: #f5c6c6; | ||
| } | ||
|
|
||
| .Modal { |
There was a problem hiding this comment.
Hay que tener cuidado con el nombre de nuestras clases, estás utilizando camel case para todo y acá comenzaste con mayúscula.
| background-color: #ffc107; | ||
| color: white; | ||
| } */ | ||
|
|
There was a problem hiding this comment.
Hay que eliminar todo el código que no se necesita.
| import Order from '../Order/Order.js'; | ||
| import ShowWaiterName from '../utils/ShowWaiterName'; | ||
| import ShowName from '../utils/ShowName'; | ||
| import { db } from '../../firebase'; |
There was a problem hiding this comment.
Trata de acomodar tus import como lo hiciste en otro archivo:
Primero tus librerias, luego componentes, assets y estilos, separado cada grupo con un espacio.
| ); | ||
| }; | ||
|
|
||
| export default Burger; |
There was a problem hiding this comment.
Hay que tener mucho cuidado con el formato de los archivos, así como luce es ilegible
| } | ||
| .list { | ||
| padding-left: 20px; | ||
| } |
There was a problem hiding this comment.
Hay que borrar todo el código innecesario.
| import mburger from "../assets/img/02-menu-burger.svg"; | ||
| import Navbar from "../Navbar"; | ||
| /* import Row from "react-bootstrap/Row"; | ||
| import Container from "react-bootstrap/Container"; */ |
There was a problem hiding this comment.
Hay que eliminar lo que no estamos utilizando
| <div> | ||
| <Boton image={mbreakfast} adress="/menu-breakfast" /> | ||
| </div> | ||
| <br /> |
There was a problem hiding this comment.
Eviten utilizar
esto se debe solucionar en CSS.
| console.log(arrayData); | ||
| setOrders(arrayData); | ||
| } catch (error) { | ||
| console.log(error); |
| ); | ||
| }; | ||
|
|
||
| export default ButtonNext; |
There was a problem hiding this comment.
Tienes dos componentes exactamente iguales, recuerda que uno de los objetivos de react es tratar de optimizar y reutilizar código. Por qué hicimos dos componentes iguales?
| water: require('../assets/img/05-agua-del-dia.svg'), | ||
| 'milk-coconut': require('../assets/img/05-leche-coco.svg'), | ||
| 'te-chai-burger': require('../assets/img/05-te-chai.svg'), | ||
| }; |
There was a problem hiding this comment.
Te recomiendo sacar esta informacion a otro archivo como una util y solo importarlo.
| }; | ||
|
|
||
| export default ItemCatalogo; | ||
|
|
3 participants
Faltan algunas implementaciones como:
. Área del mesero
-guardar el nombre del mesero en la orden
-guardar el nombre de cliente y numero de mesa en la orden
. Área de la cocina
-visualizar correctamente las ordenes y dar estilo
-Eliminar de la vista una orden completada