diff --git a/src/app/UserItemListPage.js b/src/app/UserItemListPage.js index 978959d..8e5a8f6 100644 --- a/src/app/UserItemListPage.js +++ b/src/app/UserItemListPage.js @@ -9,7 +9,7 @@ import { Wrap, WrapItem, } from "@chakra-ui/react"; -import { ChevronRightIcon } from "@chakra-ui/icons"; +import { ArrowForwardIcon, ChevronRightIcon } from "@chakra-ui/icons"; import { Heading1, MajorErrorMessage } from "./util"; import { gql, useQuery } from "@apollo/client"; import { Link, useParams } from "react-router-dom"; @@ -18,7 +18,6 @@ import { HashLink } from "react-router-hash-link"; import HangerSpinner from "./components/HangerSpinner"; import MarkdownAndSafeHTML from "./components/MarkdownAndSafeHTML"; import ItemCard from "./components/ItemCard"; -import WIPCallout from "./components/WIPCallout"; import useCurrentUser from "./components/useCurrentUser"; function UserItemListPage() { @@ -104,13 +103,7 @@ function UserItemListPage() { - - {closetList.name} - - + {closetList.name} {closetList.description && ( {closetList.description} @@ -123,7 +116,11 @@ function UserItemListPage() { ); } -export function ClosetListContents({ closetList, isCurrentUser }) { +export function ClosetListContents({ + closetList, + isCurrentUser, + maxNumItemsToShow = null, +}) { const isTradeMatch = (item) => !isCurrentUser && ((closetList.ownsOrWantsItems === "OWNS" && item.currentUserWantsThis) || @@ -137,6 +134,13 @@ export function ClosetListContents({ closetList, isCurrentUser }) { return aName.localeCompare(bName); }); + let itemsToShow = sortedItems; + if (maxNumItemsToShow != null) { + itemsToShow = itemsToShow.slice(0, maxNumItemsToShow); + } + + const numMoreItems = Math.max(sortedItems.length - itemsToShow.length, 0); + let tradeMatchingMode; if (isCurrentUser) { // On your own item list, it's not helpful to show your own trade matches! @@ -153,9 +157,9 @@ export function ClosetListContents({ closetList, isCurrentUser }) { return ( - {sortedItems.length > 0 ? ( + {itemsToShow.length > 0 ? ( - {sortedItems.map((item) => ( + {itemsToShow.map((item) => ( This list is empty! )} + {numMoreItems > 0 && ( + + + Show {numMoreItems} more items + + + + + )} ); } +export function buildClosetListPath(closetList) { + let ownsOrWants; + if (closetList.ownsOrWantsItems === "OWNS") { + ownsOrWants = "owns"; + } else if (closetList.ownsOrWantsItems === "WANTS") { + ownsOrWants = "wants"; + } else { + throw new Error( + `unexpected ownsOrWantsItems value: ${closetList.ownsOrWantsItems}` + ); + } + + return `/user/${closetList.creator.id}/lists/${ownsOrWants}/${closetList.id}`; +} + export default UserItemListPage; diff --git a/src/app/UserItemsPage.js b/src/app/UserItemsPage.js index 6e09257..7bb6973 100644 --- a/src/app/UserItemsPage.js +++ b/src/app/UserItemsPage.js @@ -42,7 +42,7 @@ import SupportOnly from "./WardrobePage/support/SupportOnly"; import useSupport from "./WardrobePage/support/useSupport"; import useCurrentUser from "./components/useCurrentUser"; import WIPCallout from "./components/WIPCallout"; -import { ClosetListContents } from "./UserItemListPage"; +import { ClosetListContents, buildClosetListPath } from "./UserItemListPage"; const BadgeButton = React.forwardRef((props, ref) => ( @@ -590,26 +590,12 @@ function ClosetList({ closetList, isCurrentUser, showHeading }) { ); } -function buildClosetListPath(closetList) { - let ownsOrWants; - if (closetList.ownsOrWantsItems === "OWNS") { - ownsOrWants = "owns"; - } else if (closetList.ownsOrWantsItems === "WANTS") { - ownsOrWants = "wants"; - } else { - throw new Error( - `unexpected ownsOrWantsItems value: ${closetList.ownsOrWantsItems}` - ); - } - - return `/user/${closetList.creator.id}/lists/${ownsOrWants}/${closetList.id}`; -} - function UserSupportMenu({ children, user }) { const { supportSecret } = useSupport(); const toast = useToast();