Génération d'un composant React wishlist-view

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 ou de la logique qu'il contient.

const WishListView: React.FC = (props: any) => {
  const loginStatus = useSelector(loginStatusSelector);
  const userWishList = useSelector(GetWishListSelector);

Obtenez les valeurs loginStatus et userWishList de l'utilisateur à partir de sélecteurs Redux comme loginStatusSelector, GetWishListSelector, respectivement.

useEffect(() => {
   if (!userWishList) {
     let payload = {
       ...payloadBase,
     };
     dispatch(wishListActions.GET_USER_WISHLIST_ACTION(payload));
   }
   return () => {
     cancels.forEach((cancel) => cancel());
   };
   //esIint-disable-next-line react-hooks/exhaustive-deps
 }, []);

Vérifiez si la valeur userWishList est disponible lors du chargement du composant.

• Si ce n'est pas le cas, distribuez l'action Redux GET_USER_WISHLIST_ACTION pour obtenir la liste de présélection de l'utilisateur connecté.
• Si l'utilisateur n'est pas correctement connecté, redirigez-le vers la page de connexion. Sinon, affichez ou rendez le composant wishlist-view.

  if (!loginStatus) (
    return <Redirect to=(SIGNIN) />;
  } else {
    return (
     <StyledContainer cid="wish-list-view">

• A l'aide des composants StyledGrid, StyledContainer, TitleLayout, AccountSidebar, CreateWishListView et DisplayWishListView, vous pouvez facilement afficher la page wishlist-view.

  <Stylescontainer cid="wish-list-view">
    <TitleLayout title={t("WishList.Title")} cid="wish-list-view-title" />
    <StyledGrid container spacing={3}>
      <StyledGrid container spacing={3} className="sidebar">
        <AccountSidebar />
      </StyledGrid>
      <StyledGrid item xs={12} md={9}>
        <StyledGrid container spacing={4}>
          <StyledGrid item xs={12}>
            <CreateWishListView />
          <StyledGrid>
          {userWishList && userWishList.length > 0 && (
            <StyledGrid item xs={12}>
               <StyledGrid
                  container
                  spacing={2}
                  alignItem="stretch"
                  direction="row">
                  {userWishList.map((wishList: any) => (
                    <StyledGrid item xs={12} sm={6} key={wishList.uniqueID}>
                      <DisplayWishListView
                        userWishList={userWishList}
                        wishList={wishList}
                      />
                    </StyledGrid>
                  ))}
                </StyledGrid>
              </StyledGrid>
             )}
             {!userWishList && (
               <StyledGrid item>
                  <StyledTypography varient="body2">
                    {t("wishList.NoWishListMessage")}
                  </StyledTypography>
                </StyledGrid>
               )}
              </StyledGrid>
             </StyledGrid>