Display wishlist widgets

The display-wishlist-widget.tsx file contains the sample source code for create wishlist widget. The implementation logic is described in this document.

About this task

Procedure

Import the Styled UI components from @hcl-commerce-store-sdk/react-component packages, and react libraries:

//Standard libraries
import React, { Fragment, useState, useEffect } from "react";
//UI
import {
  StyledTypography,
  StyledCard,
  StyledCardMedia,
  StyledGrid,
  StyledCircularProgress,
} from "@hcl-commerce-store-sdk/react-component";

Create an interface DisplayWishListWidgetProps, with needed properties to the functional component DisplayWishListWidget. Create the DisplayWishListWidget react functional component using the following code:

interface DisplayWishListWidgetProps {
translation: any;
WishListName: String;
handelWishListName: Function;
validateWishListName: Function;
canCreatewishlist: Function;
createWishList: Function;
EMPTY_STRING: string;

Props	Descriptions
translation	The translation object contains the i18n strings.
wishList	Logged in user’s Wishlist from React Redux store selector.
deleteWishList	Function to delete the selected wish list.
productsData	React hook state variable contains the products information added to a wish list.

As productData contains all the product information added to a wishlist, you will have to slice the array and store it in recentProducts:
```
const recentProducts = productsData.slice(0, 2);
```
Note: The wishlist card will show two thumbnails of recently added products.

To create a wishlist card for ViewList and Delete actions, use the following code:

const cardActions = [
 {
  text: translation.ViewList,
  link: "#",
 },
 {
  text: translation.Delete,
  handleClick: () =>
   deleteWishList(WishList.uniqueID, WishList.Description),
 },
];

To get the product information, an additional Rest API call is needed. Use a React state hook to verify productData availability.

Use StyledCircularProgress user interface component until productData is available for display. Use the following codes to achieve that:

const { translation wishList, deleteWishList, productsData } = props;
const [loading, setLoading] = useState<boolean>(true);
const recentProducts = productsData.slice(0, 2);

useEffect(() => {
 if (productsData && productsData.length > 0) {
  setLoading(false);
 }
 if (!wishList.item) {
  setLoading(false);
 }]
 // eslint-disable-nextline react-hooks/exclusive-deps
}, [productsData]);

return loading ? (
 <StyledCircularProgress />
):(
 <StylesCard
  className="product-card"
  contentComponent={contentComponent}
  cardActions={cardActions}
  confirmLabel={translation.Confirm}
  concelLabel={translation.cancel}
 />
);

The required Create wishlist widget and Display wishlist widgets are now created.

What to do next

Once the user interface widgets are created, create the Redux, Redux Saga and Redux store selectors components.