Création d'une vue de liste de présélection

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

About this task

Procedure

Ouvrez le fichier create-wishlist-view dans le répertoire src/components/pages/wish-list

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/de la logique qu'il contient. Le fichier a le contenu suivant.

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;
};

La méthode handleWishListName est utilisée pour définir le nom de la liste de présélection saisi dans à l'état d'ancrage React wishListName.
createWishListTranslation est l'objet de chaîne de traduction qui contient des chaînes i18n, qui sont transmises en tant que propriétés à create-wishlist-widget.
La méthode validateWishListName est un utilitaire, qui valide le nom de la liste de présélection saisi. Elle dispose d'une logique de validation d'échantillon et de base, qui valide le nom de la liste de présélection pour l'alphabet, les valeurs numériques et les espaces uniquement. Cette méthode renvoie la valeur false lorsque le nom de la liste de présélection est valide. Dans tous les autres cas, la valeur true est alors renvoyée.
La méthode canCreateWishList est une méthode utilitaire qui utilise la méthode validateWishListName.

Si vous avez entré le nom de liste de présélection valide, cette méthode renverra la valeur false. Sinon, elle renvoie la valeur true. Cette méthode utilise le code suivant pour activer ou désactiver le bouton Créer une liste.

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);
};

La méthode createWishList est un gestionnaire d'événement de clic sur le bouton Créer une liste, ce qui déclenche l'appel de l'API REST de la liste de présélection pour la création de la liste de présélection. Une fois la création de la liste de présélection réussie, la méthode va distribuer les actions Redux suivantes :
- GET_USER_WISHLIST_ACTION – Pour extraire la liste de présélection de l'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. Le processus transmet également les paramètres requis, dans ce cas, le nom de la liste de présélection saisi.
- Après cela, vous serez redirigé vers la route /wish-list à l'aide de la méthode history.push(WISH_LIST_ROUTE).
```
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}
  />
);
```
Annulez toutes les requêtes Axios lors du démontage du composant à l'aide de la méthode useEffect React. Enfin, renvoyez le composant CreateWishListWidget avec les propriétés requises transmises.