Mostrar una vista de lista de deseos

Para mostrar una vista de lista de deseos, siga los pasos que se dan en este documento.

About this task

Procedure

Abra el directorio src/components/pages/wish-list/display-wishlist-view.tsx.
- Puesto que ha copiado este archivo del archivo zip de código fuente descargado, tiene toda la lógica o código presente. Para obtener información detallada, consulte lo siguientes:
```
const DisplayWishListTranslation: any = {
 ViewList: t("WishList.ViewList"),
 Delete: t("WishList.Delete"),
 Confirm: t("WishList.Confirm"),
 Cancel: t("WishList.Cancel"),
 WishListEmptyMessage: t("WishList.WishListEmptyMessage"),
 WishListItemsMessage: t("WishList.WishListItemsMessage"),
};
```
- DisplayWishListTranslation es el objeto de cadena de traducción que contiene cadenas i18n, que se trasladan como accesorios a display-wishlist-widget.
El método deleteWishList es el método Delete del administrador de clics en los enlaces para eliminar la lista de deseos seleccionada. Este enlace se visualizará en la tarjeta de lista de deseos.
```
const deleteWishListName = (wishListId: string, wishListName: string) => {
  const parameters: any = {
   externalId: wishListId,
   ...payloadBase,
  };
  wishListService
   .deletewishlist(parameters)
   .then((res) => {
    if (res.data?.uniqueID) {
     if (userWishList.length === 1) {
       dispatch(wishListActions.WISHLIST_RESET_ACTION());
     } else {
       dispatch(
        wishListActions.GET_USER_WISHLIST_ACTION({ ...payloadBase })
       );
     }
     const successMessage = {
       key: "success-message.DELETE_WISHLIST_SUCCESS
       messageParameters: {
        "0": wishListName,
       },
     };
     dispatch(
       successActions.HANDLE_SUCCESS_MESSAGE_ACTION(successMessage)
     );
    }
  })
  .catch((e) => {
    console.log("could not delete wish list", e);
  });
};
```
Este método funcionará utilizando el nombre de la lista de deseos del ID exclusivo.
Puede suprimir la lista de deseos llamando a la API REST de deseos pasando el ID exclusivo de la lista de deseos como parámetro de solicitud. Después de suprimir satisfactoriamente la lista de deseos, despacha las siguientes acciones de Redux:
- WISHLIST_RESET_ACTION - Cuando suprima todas las listas de deseos, restablezca el estado de la tienda wishList redux a nulo.
- GET_USER_WISHLIST_ACTION- Para iniciar sesión en la lista de deseos del usuario y actualizar el estado de la tienda wishList Redux.
- HANDLE_SUCCESS_MESSAGE_ACTION - Para activar la visualización de la barra de bocadillos del mensaje de éxito. También pasa los parámetros necesarios, en este caso, el nombre de la lista de deseos que se ha suprimido.

En el primer método useEffect React, recibirá el productid de la lista de deseos que se insertará en una matriz. A continuación, use Products REST API para obtener los detalles del producto como miniaturas y almacenar los datos en la variable productsData de estado de enganche react. Siempre que el userWishList se actualice con productos, productsData debe actualizarse con información de productos. Para ello, se añade userWishList a la matriz de dependencia.

useEffect(() => {
   let productIds: string[] = [];
   if (wishList.item) {
    for (let product of wishList.item) {
      if (product.productId) productIds.push(product.productId);
    }
   }
   if (productIds.length > 0) {
     const requestParameters = {
       id: productIds,
       ...payloadBase,
     };
     productsService
       .findProductsUsingGET(requestParameters)
       .then(res) => {
         const products = res?.data.contents;
         if (products) {
           setProductsData(products);
         }
       })
       .catch((e) =>
          console.log("could not retrive wish list products details", e)
       );
   }
   //eslint-disable-next-line react-hooks/exhaustive-deps
 }, [userWishList]);
 
 useEffect(() => {
   return () => {
     cancels.forEach((cancel) = cancel());
   );
   // eslint-disable-next-line react-hooks/exhaustive-deps
 }, []);

En el segundo método React useEffect , cancele todas las solicitudes de Axios durante el desmontaje del componente y devuelva el componente DisplayWishListWidget con los accesorios requeridos aprobados.
```
return (
  <DisplayWishListWidget
     translation={DisplayWishListTranslation}
     wishList={wishList}
     deleteWishList={deleteWishList}
     productsData={productsData}
  />
);
```