Debuggeando nuestro proyecto (agregando validaciones a nuestro componente card)

Clase 15 de 29 • Curso de React Router 5 y Redux

Jesús Miguel Quinto Teran

student•

Si quieres evitar que el mismo elemento se agregue muchas veces a la lista de favoritos:

reducers/index.js

    case 'SET_FAVORITE':
      const exist = state.mylist.find(item => item.id === action.payload.id)
      if (exist) return {...state}

      return {
        ...state,
        mylist: [...state.mylist, action.payload]
      }

Juan Jose Vega

student•

Fácil y rápida, top

David Dias

student•

Justo estaba pensando en una solución a esto. Gracias!

Asis Melgarejo Lopez

student•

Hay otro bug y es que una vez se agrega una película a la lista de mis favoritos ya no debe existir la opción de añadirla nuevamente.

Recordemos que JS nos permite modificar los estilos de los elementos HTML Para solucionar este bug agregue unas lineas en el método handleSetFavorite y **handleDeleteFavorite **, los cuales ahora removerán y agregaran el display de none, respectivamente.

  const { id, cover, title, year, contentRating, duration, isList } = props;
  const handleSetFavorite = () => {
    props.setFavorite({ id, cover, title, year, contentRating, duration });
    document.getElementById(id).style.display = 'none';
  };

  const handleDeleteFavorite = (itemId) => {
    props.deleteFavorite(itemId);
    document.getElementById(id).style.display = 'inline';
  };

Adicionalmente, debemos agregar el atributo ID en cada imagen (plus and delete icon):

          {isList ? (
            <img
              className='carousel-item__details--img'
              src={removeIcon}
              alt='Remove Icon'
              onClick={() => handleDeleteFavorite(id)}
            />
          ) :
            (
              <img
                className='carousel-item__details--img'
                src={plusIcon}
                alt='Plus Icon'
                onClick={handleSetFavorite}
                id={id}
              />
            )}

Jair Balcazar Cobeña

student•

Me gusto mucho tu solución, muy elegante

Juan Jose Vega

student•

Qué tal la solución de @Jesuskinto es sencilla y funcional

Pablo Domínguez Durán

student•

Otro bug que también hay (no sé si lo corrijan después) es que puedes agreagar el mismo video varias veces al myList, y se muestra varias veces.

La propia consola te manda un error que el key se repite

Hernán Giraldo

student•

Para evitar ese bug usé un condicional ternario en el reducer para validar si el elemento existe, en caso de existir retorno el mismo estado anterior y en caso de que no, lo agrego:

mylist: state.mylist.filter(i => i.id === action.payload.id).length === 0
        ? [ ...state.mylist, action.payload]
        : [ ...state.mylist ]```

Marco Alejandro Rodriguez Ferrer

student•

Yo lo solucione con este codigo:

José Daniel Gómez Larin

student•

Para resolver el bug de ya no volver agregar el mismo item lo resolví así.

Alejandro González Reyes

student•

Existe otro bug, un item añadido actualmente a la lista, no puede volver a añadirse

Oscar Barajas Tavares

Team Platzi•

Seria un gran reto resolverlo. Te invito a compartirnos tu solución.

David Camacho

student•

En el reducer...

case 'SET_FAVORITE':
  const itemId = state.myList.find(items => items.id === action.payload.id)
  if(itemId) return state;

  return {
    ...state,
    myList: [...state.myList, action.payload]
  }

Carmen Sánchez Salgado

student•

He visto varias soluciones para el bug de "agregar una pelicula más de una vez a la lista de favoritas".

Esta es mi propuesta. Busco el índice (findIndex) del item que se va a agregar dentro de la lista myList. Si el índice no existe (-1) agrego el payload, sino, regreso el state original,

case 'SET_FAVORITE':
            const index = state.myList.findIndex(items =&gt; items.id == action.payload.id);
            if(index == -1)
                return {
                    ...state,
                    myList: [...state.myList, action.payload]
                }
            return state;

Jesús Adrián Arroyo Ceja

student•

Dejo mi solución, un poco más simple

case 'SET_FAVORITE':
      return {
        ...state,
        myList: [...state.myList].find((item) =&gt; item.id === action.payload.id) ? state.myList : [...state.myList, action.payload],
      };

Tomas Goldenberg

student•

Camilo Morales Sanchez

student•

amigo me podrias enseñar como implementar esa alerta tan vacana, me podrias explicar como lo hago es que soy algo nuevo en esto y apenas estoy aprendiendo...

te lo agradeceria

Jimmy Buriticá Londoño

student•

La alerta en ese formato la obtienes en Sweet Alert, dar clic en el siguiente enlace:

Sweet Alert

Yancarlo Urdaneta

student•

Si jugaron un poco con las cartas del video, habrán visto que puedes agregar dos veces el mismo favorito. Para solucionarlo, hice esto. Declaré una constante fuera del switch, que se encargará de saber si existe o no, y coloqué la condicion en el return.

const exists = state.mylist.find((item) => item.id === action.payload.id);

Y el return de ** SET_FAVORITE ** es

return exists ? state : {
        ...state,
        mylist: [...state.mylist, action.payload],
      };

Arantxa Giovanna Rosas Del Valle

student•

Yo resolví así el bug de no añadir más de una vez el mismo elemento

 case 'SET_FAVORITE':

      return state.myList.some((items) => items.id === action.payload.id) ? { ...state } :
        {
          ...state,
          myList: [...state.myList, action.payload],
        };

Erik Ricardo Sánchez Pérez

student•

Me parece que para la validación de si el elemento existe quedaría más simple de esta forma

case 'SET_FAVORITE':
    const item = state.myList.find( list => list.id === action.payload.id )
    if(item) return state;
    return {
        ...state,
        myList: [...state.myList, action.payload]
    }

Vicente Daniel Zurita Salas

student•

Yo modifiqué el reducer SET_FAVORITE.

case 'SET_FAVORITE':
      if (state.myList.filter((element) => element.id == action.payload.id).length !== 0) {
        return state;
      }
      return {
        ...state,
        myList: [...state.myList, action.payload],
      };

Andrés Campuzano Garzón

student•

🦄 Acá el código realizado hasta el momento: https://github.com/AndresCampuzano/React-Router-and-Redux/commit/392489519d93f8d055167d7f4089560ef86c3b4f

Marco Alejandro Rodriguez Ferrer

student•

Para evitar agregar el mismo elemento varias veces a la lista de favoritos se puede usar en reducer/index.js, lo siguiente:

yeccid emmanuel amaya maldonado

student•

Este Profesor sin duda está entre los mejores de Platzi, no lo dejen ir y que por favor haga mas cursos

Juan Pablo Leyva

student•

Se sigue añadiendo infinitamente desde trends. Para arreglarlo en src/reducer/index.js

const exists = state.myList.find((item) => item.id === action.payload.id);
      exists;

      return exists
        ? { ...state }
        : {
            ...state,
            myList: [...state.myList, action.payload],
          };```

Iair Poloniecki

student•

Yo lo hice así:

case 'SET_FAVORITE':
      return state.mylist.find(item => item.id === action.payload.id)
        ? state
        : {
            ...state,
            mylist: [...state.mylist, action.payload],
          };

Alejandro Betancur

student•

Existe un "bug " , porque no necesariamente se puede ver así y es que si añades un elemento a los favoritos , no debería mostrarse en la lista de trends o de originals . Lo resoli así :

import {
    actions
} from "../actions/index";

const reducer = (state, action) => {
 
    switch (action.type) {
        case actions.setFavorite:

            if (state.trends.find(items => items.id === action.payload.id)) {
                return {
                    ...state,
                    trends: state.trends.filter(items => items.id !== action.payload.id),
                    mylist: [...state.mylist, action.payload],
                }
            } else {
                return {
                    ...state,
                    originals: state.originals.filter(items => items.id !== action.payload.id),
                    mylist: [...state.mylist, action.payload],
                }
            }

            case actions.deleteFavorite:
                return {
                    ...state,
                    mylist: state.mylist.filter(items => items.id !== action.payload),
                        trends: [...state.trends, action.payload]
                }
                    default:
                        return state;
    }

};

export default reducer;

Rafa Jiménez

student•

Para solucionar el bug que permitía agregar el mismo item varias veces a 'Mi lista', he creado estas dos funciones en el Home.jsx justo antes del return del componente, una para trends y otra para originals, lo que hacen es comparar con myList y sacar los elementos repetidos

const trendsWhitOutMyList = trends.filter(
    ({ id: id1 }) => !myList.some(({ id: id2 }) => id2 === id1),
  );
  const originalsWhitOutMyList = originals.filter(
    ({ id: id1 }) => !myList.some(({ id: id2 }) => id2 === id1),
  );

Ademas hay que cambiar los map

<Categories title='Tendencias'>
        <Carousel>
          {trendsWhitOutMyList.map((item) => (
            <CarouselItem key={item.id} {...item} />
          ))}
        </Carousel>
      </Categories>

      <Categories title='Originales de Platzi Video'>
        <Carousel>
          {originalsWhitOutMyList.map((item) => (
            <CarouselItem key={item.id} {...item} />
          ))}
        </Carousel>
      </Categories>```

César Ernesto Rivas Martínez

student•

Hola Rafa,

Esta solución solventa el problema pero considero que no es la mejor, ahora te explico por qué.

Si te pones a pensar, el tener una nueva lista de videos (ya sea una, dos o mas), implica que tienes que hacer una nueva función para evitar que esta/s nueva/s lista/s muestren los videos que ya se agregaron a mi lista, y así sucesivamente. Esto agrega un nivel de complejidad innecesaria a nuestra aplicación.

Saludos.

Hans Elías Martínez Haar

student•

Esta es otra forma de evitar que dos elementos se agreguen a la lista dos veces

if(check[0] !== undefined ){
              let band 
              band = false
                for(  let i = 0; i < Object.keys(check).length  ; i++){
                        console.log (check[i].id , action.payload.id)
                        if(check[i].id === action.payload.id){
                     
                         band = true
                     }
                    if(band === true){
                            return state
                        }
                    band = false
                }  
            }

Gabriel augusto Rotger

student•

Hola, me confundió un poco saber como funciona isList. Es cada uno de los Items del carrusel?.

ANTHONY JEAMPIER RANGEL RODRIGUEZ

student•

isList es una bandera (Booleano) que nos va a permitir identificar a que lista pertenece el item que se esta enviando, si te das cuenta el isList solo se envia en esta seccion:

<Categories title="Mi Lista">
	<Carousel>
		{myList.map((item) => (
			<CarouselItem key={item.id} {...item} isList />
		))}
	</Carousel>
</Categories>

pero en las otras secciones no se envía, como se ve acontinuacion:

			<Categories title="Tendencias">
				<Carousel>
					{trends.map((item) => (
						<CarouselItem key={item.id} {...item} />
					))}
				</Carousel>
			</Categories>
			<Categories title="Originales de Platzi Video">
				<Carousel>
					{originals.map((item) => (
						<CarouselItem key={item.id} {...item} />
					))}
				</Carousel>
			</Categories>

lo que quiere decir, que en esas secciones el isList será null y en su defecto false. Por esa razón el icono eliminar solo aparece en la lista de favoritos y en las demás aparece el icono añadir. como se muestra en las siguientes imagenes.

Espero haberte ayudado.

Rodrigo Acevedo Gutiérrez

student•

Hola, isList es una propiedad booleana (true o false) que solo se manda en el carrusel de favoritos, cuando solo se pasa su nombre la propiedad es "true" y cuando no se escribe es "false" , como solo se manda en el carrusel de favoritos en al condición ternaria se indica que si es "true" aparezca el icono de borrar, de lo contrario aparezca el icono de agregar (quiere decir que el elemento está en otro carrusel distinto al de favoritos)

    case 'SET_FAVORITE':
      const exist = state.mylist.find(item => item.id === action.payload.id)
      if (exist) return {...state}

      return {
        ...state,
        mylist: [...state.mylist, action.payload]
      }

  const { id, cover, title, year, contentRating, duration, isList } = props;
  const handleSetFavorite = () => {
    props.setFavorite({ id, cover, title, year, contentRating, duration });
    document.getElementById(id).style.display = 'none';
  };

          {isList ? (
            <img
              className='carousel-item__details--img'
              src={removeIcon}
              alt='Remove Icon'
              onClick={() => handleDeleteFavorite(id)}
            />
          ) :
            (
              <img
                className='carousel-item__details--img'
                src={plusIcon}
                alt='Plus Icon'
                onClick={handleSetFavorite}
                id={id}
              />
            )}

case 'SET_FAVORITE':
            const index = state.myList.findIndex(items =&gt; items.id == action.payload.id);
            if(index == -1)
                return {
                    ...state,
                    myList: [...state.myList, action.payload]
                }
            return state;

 case 'SET_FAVORITE':

      return state.myList.some((items) => items.id === action.payload.id) ? { ...state } :
        {
          ...state,
          myList: [...state.myList, action.payload],
        };

case 'SET_FAVORITE':
    const item = state.myList.find( list => list.id === action.payload.id )
    if(item) return state;
    return {
        ...state,
        myList: [...state.myList, action.payload]
    }

case 'SET_FAVORITE':
      if (state.myList.filter((element) => element.id == action.payload.id).length !== 0) {
        return state;
      }
      return {
        ...state,
        myList: [...state.myList, action.payload],
      };

const exists = state.myList.find((item) => item.id === action.payload.id);
      exists;

      return exists
        ? { ...state }
        : {
            ...state,
            myList: [...state.myList, action.payload],
          };```

case 'SET_FAVORITE':
      return state.mylist.find(item => item.id === action.payload.id)
        ? state
        : {
            ...state,
            mylist: [...state.mylist, action.payload],
          };

import {
    actions
} from "../actions/index";

const reducer = (state, action) => {
 
    switch (action.type) {
        case actions.setFavorite:

            if (state.trends.find(items => items.id === action.payload.id)) {
                return {
                    ...state,
                    trends: state.trends.filter(items => items.id !== action.payload.id),
                    mylist: [...state.mylist, action.payload],
                }
            } else {
                return {
                    ...state,
                    originals: state.originals.filter(items => items.id !== action.payload.id),
                    mylist: [...state.mylist, action.payload],
                }
            }

            case actions.deleteFavorite:
                return {
                    ...state,
                    mylist: state.mylist.filter(items => items.id !== action.payload),
                        trends: [...state.trends, action.payload]
                }
                    default:
                        return state;
    }

};

export default reducer;

const trendsWhitOutMyList = trends.filter(
    ({ id: id1 }) => !myList.some(({ id: id2 }) => id2 === id1),
  );
  const originalsWhitOutMyList = originals.filter(
    ({ id: id1 }) => !myList.some(({ id: id2 }) => id2 === id1),
  );

<Categories title='Tendencias'>
        <Carousel>
          {trendsWhitOutMyList.map((item) => (
            <CarouselItem key={item.id} {...item} />
          ))}
        </Carousel>
      </Categories>

      <Categories title='Originales de Platzi Video'>
        <Carousel>
          {originalsWhitOutMyList.map((item) => (
            <CarouselItem key={item.id} {...item} />
          ))}
        </Carousel>
      </Categories>```

if(check[0] !== undefined ){
              let band 
              band = false
                for(  let i = 0; i < Object.keys(check).length  ; i++){
                        console.log (check[i].id , action.payload.id)
                        if(check[i].id === action.payload.id){
                     
                         band = true
                     }
                    if(band === true){
                            return state
                        }
                    band = false
                }  
            }

			<Categories title="Tendencias">
				<Carousel>
					{trends.map((item) => (
						<CarouselItem key={item.id} {...item} />
					))}
				</Carousel>
			</Categories>
			<Categories title="Originales de Platzi Video">
				<Carousel>
					{originals.map((item) => (
						<CarouselItem key={item.id} {...item} />
					))}
				</Carousel>
			</Categories>

Debuggeando nuestro proyecto (agregando validaciones a nuestro componente card)

Bienvenida al curso

Todo lo que aprenderás sobre React Router y Redux

¿Qué es React Router? y Aplicarlo en tus proyectos

¿Qué es React Router y cómo instalarlo?

Crear nuestro archivo de Rutas

Container: Login

Container: Register

Container: 404 Not Found

Componente: Layout

Manejando enlaces y configuraciones

¿Qué es Redux?

Qué es Redux

¿Qué es Redux? Profundizando en la herramienta

Instalación de Redux

Creando el Store de Redux

Aplicando Redux a nuestra aplicación

Creando los reducers

Finalizando reducers y eliminar favoritos

Debuggeando nuestro proyecto (agregando validaciones a nuestro componente card)

Crear Formulario de Login

Formulario de Login con Redux

Creando un Servicio para Gravatar

Uso de gravatar en nuestro proyecto

Validación para LogIn LogOut

Register

Register con Redux

Vista general del player

Arreglando la funcionalidad del player

Terminando de detallar nuestro player

Validaciones

Validaciones de UI

Debug con Redux Devtools

Cierre del curso

Cierre del Proyecto