Mara y Fer / PR para Code Review :-) by keupa · Pull Request #17 · Laboratoria/CDMX009-BurgerQueen

keupa · 2020-08-12T19:16:59Z

Nos encantaría tener feedback sobre como modularizar un poco mas los componentes y en qué podemos mejorar, gracias :-)

Starting react-app

* trying navbar * Nabvar with burger menu, doubt about css * changing burger-menu css Co-authored-by: Mara Mulato <maramulato@MacBook-Mara.local>

* trying navbar * Nabvar with burger menu, doubt about css * changing burger-menu css * new order pages, before pull commit * React-Router. Render conflict in progress Co-authored-by: Mara Mulato <maramulato@MacBook-Mara.local>

* trying navbar * Nabvar with burger menu, doubt about css * changing burger-menu css * new order pages, before pull commit * React-Router. Render conflict in progress * minor css changes on navbar and menu, react router ok * starting login, minor css changes and corrections Co-authored-by: Mara Mulato <maramulato@MacBook-Mara.local> Co-authored-by: Fernanda de la Peña ☆ <56372578+keupa@users.noreply.github.com>

…epending on how long they been created...

raulingg · 2020-08-13T18:42:41Z

+const Forms = ({ history }) => {
+


Suggested change

const Forms = ({ history }) => {

import { useHistory } from 'react-router-dom';

const Forms = () => {

const history = useHistory();

raulingg · 2020-08-13T18:45:17Z

+    } catch (err) {
+      alert(err);
+    }
+  }, [history]);


Por qué history es una dependencia de useCallback?, pueden elaborar un poco?

raulingg · 2020-08-13T18:46:31Z

+  }
+
+  return (
+    <>


parece que <> no sería de ayuda acá. Pienso que pueden removerlo.

Gracias, me di cuenta que fuimos dejando varios <> innecesarios, los vamos a remover :-)

raulingg · 2020-08-13T18:47:13Z

+        return <Redirect to='/login' />
+      }
+
+    const signOut = () => { auth.signOut() } 


Suggested change

const signOut = () => { auth.signOut() }

const signOut = () => auth.signOut()

raulingg · 2020-08-13T18:47:48Z

+    const signOut = () => { auth.signOut() } 
+
+    return(
+        <>


parece que <> no sería de ayuda acá. Pienso que pueden removerlo.

raulingg · 2020-08-13T18:48:24Z

+        <img 
+            className="logout"
+            onClick={signOut}
+            src={logoutIcon}
+            alt="logout icon">
+        </img> 


Suggested change

<img

className="logout"

onClick={signOut}

src={logoutIcon}

alt="logout icon">

</img>

<img

className="logout"

onClick={signOut}

src={logoutIcon}

alt="logout icon" />

raulingg · 2020-08-13T18:49:44Z

+    return( breakfastData.map(elem =>
+        <MenuElement data={elem} key={elem.id}/>
+    )
+    )


Suggested change

return( breakfastData.map(elem =>

<MenuElement data={elem} key={elem.id}/>

)

)

return breakfastData.map(elem => <MenuElement data={elem} key={elem.id} />)

raulingg · 2020-08-13T18:51:54Z

+function MenuElement (props) {
+    const {url, item, price, tag} = props.data
+    const addProduct = props.addProduct


Suggested change

function MenuElement (props) {

const {url, item, price, tag} = props.data

const addProduct = props.addProduct

function MenuElement ({ data: { url, item, price, tag }, addProduct}) {

raulingg · 2020-08-13T18:54:14Z

+                    +
+                </button>
+            </div>
+            <h4>${price}.00</h4>


Creo que es una mejor idea usar Intl.NumberFormat para manejo de monedas

Gracias, no sabía que eso existía, oops

raulingg · 2020-08-13T18:55:30Z

+                onChange={ e => {
+                    const table = e.target.value; 
+                    setTable(table)
+                    } 
+                }


Suggested change

onChange={ e => {

const table = e.target.value;

setTable(table)

}

}

onChange={e => setTable(e.target.value)}

raulingg · 2020-08-13T19:02:55Z

+            style={
+                { backgroundColor: tab === 'breakfast' ? '#FFF' : '#DED2FF',
+                  fontWeight: tab === 'breakfast' ? 'bold' : 'normal',
+                  fontSize: tab === 'breakfast' ? '26px' : '25px'
+                }


Sería más legible realizarlo mediante classname

Ejemplo

Mis clases css

.toogle { // ... some styles background-color: #DED2FF; font-weight: normal; font-size: 25px; } .toggle--active { background-color: #FFF; font-weight: bold; font-size: 26px; }

Y en mi component

<button className={`toggle ${tab === 'breakfast' ? 'toggle--active': ''}`} onClick={() => setTab('breakfast')}>

Lo intentamos hacer así, pero cuando dabamos click en otro lado de la pantalla (por ejemplo en los elementos para agregarlos al menú), el botón dejaba de estar activo y la clase cambiaba a la primera :(

raulingg · 2020-08-13T19:06:52Z

+            style={{ backgroundColor: tab === 'restOttd' ? '#FFF' : '#DED2FF',
+                     fontWeight: tab === 'restOttd' ? 'bold' : 'normal',
+                     fontSize: tab === 'restOttd' ? '26px' : '25px'
+                    }


La misma idea que arriba ☝️

raulingg · 2020-08-13T20:23:47Z

+            toast.warn('Asigna la mesa y productos a la orden 🍔🍟', {
+                className: "rounder-edges",
+                position: "top-center",
+                autoClose: 4000,
+                hideProgressBar: true,
+                transition: Slide
+                });


Estas propiedades pueden ser declaradas en el top y reutilizadas para todos las notificaciones toast.

Suggested change

toast.warn('Asigna la mesa y productos a la orden 🍔🍟', {

className: "rounder-edges",

position: "top-center",

autoClose: 4000,

hideProgressBar: true,

transition: Slide

});

toast.warn('Asigna la mesa y productos a la orden 🍔🍟', toastProps);

okis, el objeto con todas esas propiedades lo cambiamos a una carpeta que se llama utils, y lo mandamos a llamar en donde se necesita, gracias :- )

raulingg · 2020-08-13T20:32:28Z

+        if(order.items.length >0 && order.table <= 0){
+            toast.warn('Por favor asigna la mesa', {
+                className: "rounder-edges",
+                position: "top-center",
+                autoClose: 4000,
+                hideProgressBar: true,
+                transition: Slide
+                });
+        }else if(order.items.length === 0 && order.table >= 1){
+            toast.warn('Agrega al menos un producto a la orden 🍔', {
+                className: "rounder-edges",
+                position: "top-center",
+                autoClose: 4000,
+                hideProgressBar: true,
+                transition: Slide
+                });
+        }else if (order.items.length === 0 && order.table <= 0){
+            toast.warn('Asigna la mesa y productos a la orden 🍔🍟', {
+                className: "rounder-edges",
+                position: "top-center",
+                autoClose: 4000,
+                hideProgressBar: true,
+                transition: Slide
+                });
+        }else{
+            await db
+            .collection('orders')
+            .add(order)
+            setOrder({...initialValues})
+            toast.success('Pedido enviado a cocina! ✨', {
+                className: "rounder-edges",
+                position: "top-center",
+                autoClose: 4000,
+                hideProgressBar: true,
+                transition: Slide
+                });
+        }


Suggested change

if(order.items.length >0 && order.table <= 0){

toast.warn('Por favor asigna la mesa', {

className: "rounder-edges",

position: "top-center",

autoClose: 4000,

hideProgressBar: true,

transition: Slide

});

}else if(order.items.length === 0 && order.table >= 1){

toast.warn('Agrega al menos un producto a la orden 🍔', {

className: "rounder-edges",

position: "top-center",

autoClose: 4000,

hideProgressBar: true,

transition: Slide

});

}else if (order.items.length === 0 && order.table <= 0){

toast.warn('Asigna la mesa y productos a la orden 🍔🍟', {

className: "rounder-edges",

position: "top-center",

autoClose: 4000,

hideProgressBar: true,

transition: Slide

});

}else{

await db

.collection('orders')

.add(order)

setOrder({...initialValues})

toast.success('Pedido enviado a cocina! ✨', {

className: "rounder-edges",

position: "top-center",

autoClose: 4000,

hideProgressBar: true,

transition: Slide

});

}

if (order.items.length === 0)

return toast.warn('Agrega al menos un producto a la orden 🍔',toastProps)

if(order.table <= 0)

return toast.warn('Por favor asigna la mesa', toastProps);

await db.collection('orders').add(order)

setOrder({...initialValues})

toast.success('Pedido enviado a cocina! ✨', toastProps);

raulingg · 2020-08-13T20:41:13Z

+    const restOtdComponents = restOfTheDayData.map(elem =>
+        <MenuElement addProduct={addProduct} data={elem} key={elem.id} />
+    )
+
+    // prints the breakfast components
+    const breakfastComponents = breakfastData.map(elem =>
+        <MenuElement addProduct={addProduct} data={elem} key={elem.id}/>
+    )
+
+    return(
+    <div className="menu-parent">
+       <div className="menu-container" >
+        <ToggleMenu 
+            className="toggle-btn" 
+            setTab={setTab} 
+            tab={tab}
+        />
+
+        {tab === 'breakfast' ? <div className="items-container">{breakfastComponents}</div> :
+            <div className="items-container">{restOtdComponents}</div>
+        }
+       </div> 


Acá esamos creando por adelantado ambas colecciones de components <MenuElement ...> tanto para restOtdComponents como para breakfastComponents, sola una colección debería ser creada dependiendo del tab seleccionado por lo cual esta sugerencia que les dejo es más conveniente y con mejor performance.

Suggested change

const restOtdComponents = restOfTheDayData.map(elem =>

<MenuElement addProduct={addProduct} data={elem} key={elem.id} />

)

// prints the breakfast components

const breakfastComponents = breakfastData.map(elem =>

<MenuElement addProduct={addProduct} data={elem} key={elem.id}/>

)

return(

<div className="menu-parent">

<div className="menu-container" >

<ToggleMenu

className="toggle-btn"

setTab={setTab}

tab={tab}

/>

{tab === 'breakfast' ? <div className="items-container">{breakfastComponents}</div> :

<div className="items-container">{restOtdComponents}</div>

}

</div>

return (

<div className="menu-parent">

<div className="menu-container">

<ToggleMenu className="toggle-btn" setTab={setTab} tab={tab} />

<div className="items-container">

{(tab === 'breakfast' ? breakfastData : restOfTheDayData).map(elem =>

<MenuElement addProduct={addProduct} data={elem} key={elem.id}/>

)}

</div>

</div>

:0, gracias, no sabía que se estaba creando doble. Lo cambiamos y en próximos proyectos lo tendremos en cuenta :))

raulingg · 2020-08-13T20:50:43Z

+                    addQuantity={addQuantity} 
+                />
+            ) )}
+            <p className="total">Total: ${addTotal}.00</p>


Es una mejor idea usar Intl.NumberFormat

raulingg · 2020-08-13T20:51:57Z

@@ -0,0 +1,168 @@
+import React, { useState, useEffect } from "react";


El nombre del archivo creo que no relación con el nombre del componente Meal

src/components/MenuSelector/prueba.js ??

raulingg · 2020-08-13T20:54:32Z

+                    onChange={(total) => {
+                      let newProduct;
+                      let add;
+                      let totalPay;
+                      if (product.find((p) => p.productId === item.uid)) {
+                        newProduct = product.map((p) => {
+                          if (p.productId !== item.uid) {
+                            return p;
+                          }
+                          return {
+                            ...p,
+                            quant: total,
+                            payment: total * item.price,
+                          };
+                        });
+                      } else {
+                        newProduct = [
+                          ...product,
+                          {
+                            productId: item.uid,
+                            produItem: item.item,
+                            unitaryPrice: item.price,
+                            quant: total,
+                            payment: total * item.price,
+                          },
+                        ];
+                      }
+                      setProduct(newProduct);
+                      add = newProduct.reduce(
+                        (sum, value) => sum + value.quant,
+                        0
+                      );
+                      setTotalQuantity(add);
+                      {
+                      }
+                      totalPay = newProduct.reduce(
+                        (sum, value) => sum + value.payment,
+                        0
+                      );
+                      setPayment(totalPay);
+                      {
+                        // console.log(totalPay);
+                      }
+                    }}


Creo que sería una mejor idea separar la lógica de la app de la lógica de presentación (components), la idea sería como llevar esta lógica a una función fuera.

Siempre he tenido problema con la modularización y eso. No sé si tengas algún recurso que me sirva para aprender a separar las funciones de los componentes, casi siempre lo pongo todo en el mismo archivo y se vuelve super confuso

raulingg · 2020-08-13T20:55:28Z

+import { Link } from 'react-router-dom';
+import './BMenu.css';
+
+function BMenu(props) {


No es necesario declarar este param props porque no es usado en el componente.

Suggested change

function BMenu(props) {

function BMenu() {

raulingg · 2020-08-13T20:58:19Z

+            toast.success('Pedidos actualizados', {
+                className: "rounder-edges",
+                position: "top-center",
+                autoClose: 4000,
+                hideProgressBar: true,
+                closeOnClick: true,
+                pauseOnHover: true,
+                draggable: true,
+                progress: undefined,
+                transition: Slide
+                });


Colocar estas propiedades de los toast en el top sería mejor para evitar declararlos una y otra vez.

raulingg · 2020-08-13T20:59:29Z

+     // breakpoints for responsive CSS Masonry
+     const breakpointColumnsObj = {
+        default: 3,
+        1100: 3,
+        700: 2,
+        500: 1
+      };


Colocar esta objeto con propiedades constantes en el top es una mejor idea para evitar recrear el objeto siempre que el componente haga un re-render.

raulingg · 2020-08-13T21:01:56Z

+                <div className="no-orders-message"> Aún no hay pedidos para entregar :-) </div> 
+            </div>
+        )
+    } else{


No es necesario este bloque } else{ puesto que estamos haciendo un return dentro del bloque if más arriba.

Sería algo como

if (ready.length <=0) { return ( <div className="no-orders-message-container"> <div className="no-orders-message"> Aún no hay pedidos para entregar :-) </div> </div> ) } return( <div className='container'> <Masonry breakpointCols={breakpointColumnsObj} className="my-masonry-grid" columnClassName="my-masonry-grid_column"> {readyOrders} </Masonry> </div> )

raulingg · 2020-08-13T21:11:19Z

@@ -0,0 +1,38 @@
+import americanCoffee from '../img/american-coffee.webp'


Pienso que esta data debería venir del servidor, podriamos tener una colección products donde guardamos todos los productos disponibles, sugiero esto porque de esa forma el administrador del restaurante o negocio puede mantener (add/update/delete) productos de forma dinámica y conveniente.

Los contras de tener la data de forma estática sería que para realizar un cambio deberiamos hacerlo en el código y luego desplegar la app nuevamente. Esto no resulta conveniente para el negocio.

síp, pensamos mas adelante añadir una sección en donde se puedan subir productos nuevos a la base de datos. Así que esto sería lo mas conveniente :D

raulingg · 2020-08-13T21:13:11Z

+import 'firebase/firestore'
+import 'firebase/auth'
+
+var firebaseConfig = {


Mantengamos consistencia y usemos const o var. Creo que const aquí ajusta mejor.

vale, esque así venía en la documentación de firebase y pues así se quedó.

raulingg · 2020-08-13T21:14:48Z

+import 'firebase/auth'
+
+var firebaseConfig = {
+  apiKey: "AIzaSyBLfsFNhBD1kNio0wyF0i1eesnf0MV-FE8",


No es una buena idea exponer keys en el código, creo que es una mejor idea usar variables de entorno (envars).

Ref: https://create-react-app.dev/docs/adding-custom-environment-variables/

gracias! hay un pequeño detallito con esta parte y firebase, todas las keys que pongo en el .env las lee sin problema, excepto la de projectId, si no la pongo directamente en el file, la consola me dice que projectId tiene que ser un string y no jala.

no sé que es lo que pasa en esa porque con todas las demas keys sirve.

raulingg · 2020-08-13T21:15:36Z

+  databaseURL: "https://burgerqueeeeeeen.firebaseio.com",
+  projectId: "burgerqueeeeeeen",
+  storageBucket: "burgerqueeeeeeen.appspot.com",
+  messagingSenderId: "650761219478",


Creo que no se esta haciendo uso de Firebase Notifications, por lo cual no es necesario este key messagingSenderId

raulingg · 2020-08-13T21:16:15Z

+  authDomain: "burgerqueeeeeeen.firebaseapp.com",
+  databaseURL: "https://burgerqueeeeeeen.firebaseio.com",
+  projectId: "burgerqueeeeeeen",
+  storageBucket: "burgerqueeeeeeen.appspot.com",


estamos haciendo uso de Firebase Storage?, en caso de que no creo que no sería necesario este key storageBucket

La vamos a usar después para poder agregar los productos :)

raulingg · 2020-08-13T21:19:28Z

@@ -0,0 +1,13 @@
+


Parece que este componente no tiene más hijos que <Forms>, repensaría si realmente es necesario tener <Forms> como un componente, tal vez el contenido de este debería estar directamente en Login

raulingg

Buen trabajo @keupa y @maranyil 💯 !!

He dejado algunos comentario que estoy seguro les serán de mucha ayuda para seguir refinando su proyecto.

Les recomiendo que ignoren usando git el folder build.

Mara Mulato and others added 30 commits June 17, 2020 13:23

Starting react-app

280fdfb

Merge pull request #1 from maranyil/feature-mara

203cde4

Starting react-app

added components

f085a2a

Components burger menu and navbar (#2)

9f6ecc6

* trying navbar * Nabvar with burger menu, doubt about css * changing burger-menu css Co-authored-by: Mara Mulato <maramulato@MacBook-Mara.local>

menu elements style

118b997

menu

ed633b2

menu

3e1c7b8

Hamburger menu + New Order page in progress

e59a32f

toggle menu

11ceb0f

you can add items to your order / styles needed lol

0fdb7cb

add item, delete item, and sum total functions ready. need Styles

6421844

React Router (#3)

c19e7ff

* trying navbar * Nabvar with burger menu, doubt about css * changing burger-menu css * new order pages, before pull commit * React-Router. Render conflict in progress Co-authored-by: Mara Mulato <maramulato@MacBook-Mara.local>

styles

1663e11

added styles for the components, grid needed

fe6ea11

styles

60d6abe

added firebase config

0422081

adding full order to firebase

b655a1e

incoming order in progress, styles NEEDED

253d5ea

dettach listener from component

5b092bd

Changed container, date is now ok

9babb0d

Notes change color / Burger Menu fixed

bbef334

styles for new done. styles for incoming done / notes change colors d…

4abb4bc

…epending on how long they been created...

Update README.md

93349e5

added new readme

7f32174

Update README.md

0f2b3fd

missing a parameter onSnapshot query

2557e28

toastify

fa340dc

Changed number input in order to + and -

b9445b9

added toasts

8ed20a2

raulingg reviewed Aug 13, 2020

View reviewed changes

raulingg self-requested a review August 13, 2020 21:21

raulingg reviewed Aug 13, 2020

View reviewed changes

-const Forms = ({ history }) => {
+import { useHistory } from 'react-router-dom';
+const Forms = () => {
+   const history = useHistory();

	const signOut = () => { auth.signOut() }
	const signOut = () => auth.signOut()

		@@ -0,0 +1,168 @@
		import React, { useState, useEffect } from "react";

		@@ -0,0 +1,38 @@
		import americanCoffee from '../img/american-coffee.webp'

Uh oh!

Conversation

keupa commented Aug 12, 2020

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

raulingg Aug 13, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

raulingg Aug 13, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

raulingg Aug 13, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

raulingg Aug 13, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

raulingg Aug 13, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

raulingg Aug 13, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

raulingg Aug 13, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

raulingg Aug 13, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

raulingg Aug 13, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

raulingg Aug 13, 2020 •

edited

Loading

raulingg Aug 13, 2020 •

edited

Loading

raulingg Aug 13, 2020 •

edited

Loading

raulingg Aug 13, 2020 •

edited

Loading

raulingg Aug 13, 2020 •

edited

Loading

raulingg Aug 13, 2020 •

edited

Loading

raulingg Aug 13, 2020 •

edited

Loading

raulingg Aug 13, 2020 •

edited

Loading

raulingg Aug 13, 2020 •

edited

Loading

raulingg Aug 13, 2020 •

edited

Loading

raulingg Aug 13, 2020 •

edited

Loading

raulingg left a comment •

edited

Loading