Display a wishlist view

To display a wishlist view, follow the steps given in this document.

About this task

Procedure

  1. Open src/components/pages/wish-list/display-wishlist-view.tsx directory.
    • Since you have copied this file from the downloaded source code zip file, you have all the logic or code present in it. For detailed understanding see the following: 
      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 is the translation string object containing i18n strings, which is passed as props to display-wishlist-widget.
  2. The deleteWishList method is a Delete link click handler method for deleting the selected wishlist. This link will be displayed in the wishlist card. 
    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);
  });
};

    This method will work using either the unique idor wish list name.

    You can delete the wishlist by calling the Wish list REST API by passing the wish list unique id as the request parameter. After successful deletion of the wishlist, dispatch the following Redux Actions:
    • WISHLIST_RESET_ACTION - When you delete all the wishlists, reset the wishList redux store state to null.
    • GET_USER_WISHLIST_ACTION - For getting a logged-in user’s wishlist and updating the wishList Redux store state.
    • HANDLE_SUCCESS_MESSAGE_ACTION - For triggering the success message snack bar to display. It also passes the required parameters, in this case, the wishlist name that was deleted.
  3. In the first React useEffect method, you will get the productid from the wishlist, which will be pushed into an array. Then use the check Products REST API to get the product details such as thumbnails, and store the data in the productsData React hook state variable. Whenever userWishList is updated with products, productsData should be updated with product information. For that, userWishList is added in the dependency array. 
    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
 }, []);
  4. In the second React useEffect method, cancel all Axios request during component unmount and return the DisplayWishListWidget component with the required props passed. 
    return (
  <DisplayWishListWidget
     translation={DisplayWishListTranslation}
     wishList={wishList}
     deleteWishList={deleteWishList}
     productsData={productsData}
  />
);