Building up a wishlist-view react component

Since you have copied this file from the downloaded source code zip, you have all the logic or code present in it.

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

Get the loginStatus and userWishList of the user from Redux Selectors such as loginStatusSelector, GetWishListSelector respectively.

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

Verify if the userWishList is available during component load.

• If not, dispatch GET_USER_WISHLIST_ACTION Redux action to get the logged in user’s wishlist.
• If the user is not logged in properly, redirect them to the sign in page. Otherwise, display or render the wishlist-view component.

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

• With the help of StyledGrid, StyledContainer, TitleLayout, AccountSidebar, CreateWishListView and DisplayWishListView components you can easily render the wishlist-view page.

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