Afficher une vue de liste de présélection

Pour afficher une vue de liste de présélection, suivez les étapes exposées dans ce document.

About this task

Procedure

Ouvrez le répertoire src/components/pages/wish-list/display-wishlist-view.tsx.
- Etant donné que vous avez copié ce fichier à partir du fichier zip de code source téléchargé, vous disposez de l'ensemble du code ou de la logique qu'il contient. Pour une compréhension détaillée, voir :
```
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 est l'objet de chaîne de traduction contenant des chaînes i18n, qui est transmis en tant que propriétés à display-wishlist-widget.
La méthode deleteWishList est une méthode de gestionnaire de clic sur le lien Delete pour la suppression de la liste de présélection sélectionnée. Ce lien s'affichera dans la carte de la liste de présélection.
```
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);
  });
};
```
Cette méthode fonctionne à l'aide de l'ID unique ou du nom de la liste de présélection.
Vous pouvez supprimer la liste de présélection en appelant l'API REST de la liste de présélection en transmettant l'ID unique de la liste de présélection comme paramètre de requête. Après avoir supprimé la liste de présélection, distribuez les actions Redux suivantes :
- WISHLIST_RESET_ACTION - Lorsque vous supprimez toutes la liste de présélection, l'état du magasin Redux WishList sera réinitialisé sur null.
- GET_USER_WISHLIST_ACTION - Pour obtenir la liste de présélection d'un utilisateur connecté et mettre à jour l'état du magasin Redux WishList .
- HANDLE_SUCCESS_MESSAGE_ACTION - Pour déclencher l'affichage de la barre de snack de message de réussite. Il transmet également les paramètres requis, dans ce cas, le nom de la liste de présélection qui a été supprimé.

Dans la première méthode useEffect React, vous obtenez la valeur productid à partir de la liste de présélection qui sera poussée dans une matrice. Vérifiez ensuite l'API REST Produits pour obtenir les détails du produit tels que les miniatures, etc., et stocker les données dans la variable d'état d'ancrage React productsData. Chaque fois que userWishList est mis à jour avec des produits, productsData doit être mis à jour avec les informations sur le produit. Pour cela, la valeur userWishList est ajoutée dans la matrice de dépendances.

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
 }, []);

Dans la deuxième méthode useEffect React, annulez toutes les requêtes Axios lors du démontage du composant et renvoyez le composant DisplayWishListWidget avec les propriétés requises transmises.
```
return (
  <DisplayWishListWidget
     translation={DisplayWishListTranslation}
     wishList={wishList}
     deleteWishList={deleteWishList}
     productsData={productsData}
  />
);
```