Creación del componente React de vista de lista de deseos

Puesto que ha copiado este archivo del zip de código fuente descargado, tiene toda la lógica o código presente.

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

Obtenga el loginStatus y userWishList del usuario de Selectores de Redux como loginStatusSelector , GetWishListSelector respectivamente.

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
 }, []);

Verifique si userWishList está disponible durante la carga del componente.

• Si no es así, la acción GET_USER_WISHLIST_ACTION de Redux para obtener la lista de deseos del usuario que ha iniciado sesión.
• Si el usuario no ha iniciado la sesión correctamente, redirigirlo a la página de inicio de sesión. De lo contrario, visualice o renderice el componente wishlist-view.

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

• Con la ayuda de los componentes StyledGrid, StyledContainer, TitleLayout, AccountSidebar, CreateWishListView y DisplayWishListView puede renderizar fácilmente la página de vista de lista de deseos.

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