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