Creación de una vista de lista de deseos

Para crear una vista de lista de deseos, siga los pasos que se dan en este documento.

About this task

Procedure

Abra el archivo create-wishlist-view en el directorio src/components/pages/wish-list.

Puesto que ha copiado este archivo del archivo zip de código fuente descargado, tiene toda la lógica/código presente. El archivo tiene el contenido siguiente.

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

El método handleWishListName se utiliza para establecer el nombre de la lista de deseos que se ha introducido en el estado de enganche React wishListName.
El createWishListTranslation es el objeto de la serie de traducción que contiene series i18n, que se pasan como propiedades a create-wishlist-widget.
El método validateWishListName es un útil, que valida el nombre de lista de deseos especificado. Tiene una lógica de validación básica y de muestra, que valida el nombre de la lista de deseos solo para el alfabeto, los valores numéricos y los espacios en blanco. Este método devolverá false cuando un nombre de lista de deseos sea válido. Para todos los demás casos, devolverá el valor true.
El método canCreateWishList es un método de utilidad que utiliza el método validateWishListName.

Si ha especificado el nombre de lista de deseos válido, este método devolverá el valor false. De lo contrario, devuelve el valor true. Este método utiliza el código siguiente para habilitar o inhabilitar el botón Crear lista.

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

El método createWishList es el administrador de eventos de pulsación del botón Crear lista, que desencadena la llamada a la API de REST lista de deseos para crear una lista de deseos. Una vez que la lista de deseos se haya creado correctamente, el método se enviará siguiendo las acciones de Redux:
- GET_USER_WISHLIST_ACTION – Para captar la lista de deseos del usuario que ha iniciado sesión y actualizar el estado de la tienda de Redux wishList.
- HANDLE_SUCCESS_MESSAGE_ACTION– Para activar la visualización de la barra de bocadillos de mensaje de éxito. El proceso también pasa los parámetros necesarios, en este caso, el nombre de lista de deseos especificado.
- Después de esto, se le redirigirá a la ruta /wish-list utilizando el método 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}
  />
);
```
Cancele todas las solicitudes Axios durante la desmontado del componente con la ayuda del método React useEffect. Finalmente, devolver el componente CreateWishListWidget con las propiedades necesarias pasadas.