melialbu / challenge-searchcocktails Goto Github PK

Esto es una sonsera, podrias guardar esa misma var antes del this.setState, para poder usarla ahi y mas abajo

https://github.com/MeliAlbu/Challenge-NextDots/blob/37d7918186ab2b8a753fcacf749f3fe42600dfd6/src/screens/CocktailFinderScreen.js#L31

En general hacer lo siguiente, doy el ejemplo para la carpeta de components

components/
  Card/
    index.js
    Card.js
    styles.js
  Input/
    index.js
    Card.js
    styles.js
  index.js

En el archivo index.js de cada componente iría algo como así:
export { default } from './Card';

Y en el archivo index.js de la carpeta Components iría algo así:

export { default as Card } from './Card';
export { default as Input } from './Input';

Y cuando tengas que llamar a un componente en una screen sería algo como:
import { Card } from '../components'

NOTA: Este es el ejemplo para los componentes, hay que hacerlo para las screens, las imágenes, las actions y los reducers, cada cosa en una carpeta diferente con su propio index.js

Las imagenes, fuentes, iconos (Todo lo que sean assets) deben ir en una carpeta que se llame assets dentro de SRC

Recomiendo ordenar por tipos, por ejemplo si tenes fuentes
Creas la carpeta fonts, lo mismo para images, icons, vectors, lo que exista.

Nososotros tenemos siempre un archivito en el root de assets que se llama index.js donde dentro importamos y exportamos todas las imagenes de esta forma

export { default as like } from './icons/like.png';

para luego en las screens llamarlo asi

import { like } from '../../assets/images';

Se que no tenes la funcion responsiveSize pero es algo que me gustaria arreglar ya que nos ayuda desde siempre y es muy importante.

Para todos los estilos que lleven medidas en PX agregamos esa funcion para que se adapte a todos los dispositivos.

es facil de usar, solo hay que pasarle por parametro el numero y retorna el numero adaptado a la pantalla.

No es algo para ver ahora, si no que hay que esperar a la reunion asi creamos los archivos y lo vemos bien

https://github.com/MeliAlbu/Challenge-NextDots/blob/37d7918186ab2b8a753fcacf749f3fe42600dfd6/src/components/Input.js#L14

Para no tener que bindiar las funciones posteriormente, te recomiendo que las uses como lambda unicamente a las que no son de la clase de RN (Ej, componentDidMount, componendDidUnmount, etc). entonces a su vez diferencias cuales vienen heredadas y cuales creaste vos

https://github.com/MeliAlbu/Challenge-NextDots/blob/37d7918186ab2b8a753fcacf749f3fe42600dfd6/src/screens/CocktailFinderScreen.js#L45

Ver #2

https://github.com/MeliAlbu/Challenge-NextDots/blob/37d7918186ab2b8a753fcacf749f3fe42600dfd6/src/screens/Home.js#L26

Nunca usamos los componente Text, en cambio usamos uno que creamos para mantener la misma typografia en todos los text y que despues no haya inconsistencias entre las pantallas.

En este momento el componente no lo tenes, pero es para que vayas sabiendo, ya lo vamos a agregar.

https://github.com/MeliAlbu/Challenge-NextDots/blob/37d7918186ab2b8a753fcacf749f3fe42600dfd6/src/components/Card.js#L13

Siempre es bueno destructurar las props:

const { image } = this.props

https://github.com/MeliAlbu/Challenge-NextDots/blob/37d7918186ab2b8a753fcacf749f3fe42600dfd6/src/components/Card.js#L13

Algo indispensable es arreglar Prettier, tenemos que revisar por que no esta funcionando correctamente :c

Move los estilos a un archivo styles.js
Luego revisa este issue para terminar de completar #3

https://github.com/MeliAlbu/Challenge-NextDots/blob/37d7918186ab2b8a753fcacf749f3fe42600dfd6/src/components/Input.js#L12

Por lo general en ND, para tener los mismos colores en toda la app y si es necesario un cambio sea rapido de hacer, tenemos un index de colores.

Habria que crear la carpeta theme en src donde dentro crear el archivo colors.js
Ahi dentro agregas algo como esto:

export defult {
transparent: 'rgba(255, 255, 255, 0)',
white: '#FFFFFF',
};

https://github.com/MeliAlbu/Challenge-NextDots/blob/37d7918186ab2b8a753fcacf749f3fe42600dfd6/src/components/Input.js#L16

A mi cuando entre me dijieron que los colores siempre este en HEX, no se si fue para que queden todos con el mismo tipo, o por algo en especial, esta parte la dejo abierta para debatir, no me parece que sea algo 100% necesario

Move los estilos a un archivo styles.js
Luego revisa este issue para terminar de completar #3

https://github.com/MeliAlbu/Challenge-NextDots/blob/37d7918186ab2b8a753fcacf749f3fe42600dfd6/src/components/Card.js#L19

Los componentes siempre van en la carpeta components en src, esta bien como lo hiciste. pero como sugerencia es mejor que por cada componente agreges una carpeta

EJ:
Creas el componente Card, bueno crea una carpeta que tenga ese nombre y dentro los archivos
styles.js & index.js

Donde en styles estaran unicamente los estilos, que en index vas a importar y usar
Y en index va a estar todo tu componente

Para mi es mucho mas comodo tener separado los estilos del componente.

Se agrega el archivo index para hacer lo mismo que el assets de imagenes.
Se va a crear un archivo index.js dentro del root de componentes donde vas a importar todos los componentes y volverlos a exportar.
Para no duplicar info, ver issue: #2

Renaming project: Install React Native Rename Globaly
esa parte no va
Eso es del boilerplate nuestro

en tu caso no hace falta

@MeliAlbu

No esta mal, pero hay una forma mejor de agregar varios estilos a un componente.
Los estilos se pueden pasar como objetos, o como un array de objetos.

Entonces esto te quedaria asi: style={[styles.input, props.style]}

https://github.com/MeliAlbu/Challenge-NextDots/blob/37d7918186ab2b8a753fcacf749f3fe42600dfd6/src/components/Input.js#L7

https://github.com/MeliAlbu/Challenge-NextDots/blob/520dcf50f5023ca569f239fdeed027760ebe3e65/src/store/types.js#L1

Cambiar OBTUVE_DATOS por GET_DATA_SUCCESS para dar un ejemplo.
En general, cambiar todo lo que esté en español, a inglés.

Ver: #11

https://github.com/MeliAlbu/Challenge-NextDots/blob/37d7918186ab2b8a753fcacf749f3fe42600dfd6/src/screens/CocktailFinderScreen.js#L35

Nunca escribas los estilos en linea, salvo que sea indispensable.

Es mejor tener todo el el archivo styles e importar y usar de ahi

ver: #4

https://github.com/MeliAlbu/Challenge-NextDots/blob/37d7918186ab2b8a753fcacf749f3fe42600dfd6/src/components/Card.js#L12

No esta mal como lo estas implementando, pero para que sepas, en varios proyectos donde ocupanos RNavigation tenemos una carpeta en src que se llama navigation donde tenemos las rutas, los types, y las funciones mas comunes.

Luego te lo mostramos, no tenes que cambiar nada

https://github.com/MeliAlbu/Challenge-NextDots/blob/37d7918186ab2b8a753fcacf749f3fe42600dfd6/src/screens/Home.js#L31

https://github.com/MeliAlbu/Challenge-NextDots/blob/520dcf50f5023ca569f239fdeed027760ebe3e65/src/store/actionsCocktails.js#L18

Es bueno centralizar en endpoint. Ejemplo, puedes crear un archivo config en la raíz de src donde definas una constante con el endpoint y luego importes el endpoint donde lo necesitas usar

https://github.com/MeliAlbu/Challenge-NextDots/blob/520dcf50f5023ca569f239fdeed027760ebe3e65/src/store/actionsCocktails.js#L17

Al usar el fetch de este modo ( .then().catch() ) no va a tener en realidad efecto alguno dentro del try catch. El modo correcto de usarlo sería más o menos así:

exampleFunction = async () => {
  try {
     const response = await fetch(bla bla bla);
     const responseJson = await response.json();
     dispatch({ bla bla bla });
  } catch (error) {
    //
  }
}

Si algo malo sucede en alguno de los dos await salta automáticamente al catch y no ejecuta la siguiente línea.

#11
https://github.com/MeliAlbu/Challenge-NextDots/blob/37d7918186ab2b8a753fcacf749f3fe42600dfd6/src/screens/Home.js#L31

No es bueno usar un map para generar un scroll con conponentes, te recomiendo usar esto

https://www.google.com/search?client=firefox-b-d&q=flatlist+react+native

Ademas de mejoras en cuando a componente, hay metodos que son muy utiles

https://github.com/MeliAlbu/Challenge-NextDots/blob/37d7918186ab2b8a753fcacf749f3fe42600dfd6/src/screens/CocktailFinderScreen.js#L61