Creating a wishlist view

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

About this task

Procedure

Open the create-wishlist-view file in the src/components/pages/wish-list directory.

Since you have copied this file from the downloaded source code zip file, you have all the logic/code present in it. The file has the following content.

const handleWishListName = (event) => {
  setWishlistName(event.target.value);
};

const createWishListTranslation: any = {
 WishListMessage: t("WishList.WishListMessage"),
 WishListName: t("WishList.WishListName"),
 InvalidWishListName: t("WishList.InvalidWishListName"),
 AddWishList: t("WishList.AddWishList"),
};

Const validateWishListName = () => {
 const WISHLISTNAME_ALPHA_NUMERIC_SPECIAL_CHAR = 
  REG_EX.NICKNAME_ALPHA_NUMERIC_SPECIAL_CHAR;
 if (wishListName.length > 0 && wishListName.trim() === EMPTY_STRING)
  return true;
 if (!WISHLISTNAME_ALPHA_NUMERIC_SPECIAL_CHAR.test(WishlistName)) {
  return true;
 }
 return false;
};

const canCreateWishList = () => {
 if (
    wishListName.trim() === EMPTY_STRING ||
    wishListName.length === 0 ||
    validatewishListName()
 )  {
    return true;
 }
    return false;
};

The handleWishListName method is used to set the wish list name entered in to the React hook state wishListName.
The createWishListTranslation is the translation string object that contains i18n strings, which are passed as properties to create-wishlist-widget.
The validateWishListName method is a util, which validates the wishlist name entered. It has sample and basic validation logic, which validates the wish list name for alphabet, numeric values, and white spaces only. This method will return false when a wishlist name is valid. For all other cases, it will return true.
The canCreateWishList method is a util method which uses validateWishListName method.

If you have entered the valid wishlist name, this method will return false. Otherwise, it returns true. This method uses the following code to enable or disable the Create List button.

const createWishList = () => {
  const params = {
   body: {
    description: wishListName.trim(),
    registry: false,
   },
   ...payloadBase,
  };
  wishListService
   .createWishlist(params)
   .then((res) => {
    if (res.data?.uniqueID) {
       dispatch(
        wishListActions.GET_USER_WISHLIST_ACTION({ ...payloadBase })
       );
       const successMessage = {
        key: "success-message.CREATE_WISHLIST_SUCCESS",
        messageParameters: {
         "0": wishListName.trim(),
        },
       };
       dispatch(
        successActions.HANDLE_SUCCESS_MESSAGE_ACTION(successMessage)
       );
       setWishListName(EMPTY_STRING);
      }
    })
    .catch((e) => {
      console.log("could not create new wish list", e);
    });
  history.push(WISH_list_ROUTE);
};

The createWishList method is the Create List button click event handler, which triggers the wishlist REST API call for the creation of a wishlist. After successful creation of the wishlist, the method it will dispatch following Redux actions:
- GET_USER_WISHLIST_ACTION – For fetching the 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. The process also passes the required parameters, in this case, the wishlist name entered.
- After this, you will be redirected to the /wish-list route by using history.push(WISH_LIST_ROUTE) method.
```
useEffect(() => {
 return () => {
  cancels.forEach((cancel) => cancel());
 };
 // eslint-disable-next-line-react-hooks/exhaustive-deps
}, []); 

return (
 <CreateWishListWidget
   translation={createWishListTranslation}
   wishListName={wishListName}
   handleWishListName={handleWishListName}
   validateWishListName={validateWishListName}
   createWishList={createWishList}
   EMPTY_STRING={EMPTY_STRING}
   canCreateWishList={canCreateWishList}
  />
);
```
Cancel all the Axios requests during component unmount with the help of the React useEffect method. Finally, return the CreateWishListWidget component with the required props passed.