diff --git a/src/app/UserItemListPage.js b/src/app/UserItemListPage.js
index f924728..8d91f84 100644
--- a/src/app/UserItemListPage.js
+++ b/src/app/UserItemListPage.js
@@ -19,9 +19,11 @@ 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() {
const { listId } = useParams();
+ const currentUser = useCurrentUser();
const { loading, error, data } = useQuery(
gql`
@@ -41,6 +43,8 @@ function UserItemListPage() {
isPb
name
thumbnailUrl
+ currentUserOwnsThis
+ currentUserWantsThis
}
}
}
@@ -67,6 +71,10 @@ function UserItemListPage() {
const { creator, ownsOrWantsItems } = closetList;
+ // NOTE: `currentUser` should have resolved by now, because the GraphQL query
+ // sends authorization, which requires the current user to load first!
+ const isCurrentUser = currentUser.id === creator.id;
+
let linkBackText;
let linkBackPath;
if (ownsOrWantsItems === "OWNS") {
@@ -107,17 +115,41 @@ function UserItemListPage() {
{closetList.description && (
{closetList.description}
)}
-
+
);
}
-function ClosetListContents({ closetList }) {
- const sortedItems = [...closetList.items].sort((a, b) =>
- a.name.localeCompare(b.name)
- );
+function ClosetListContents({ closetList, isCurrentUser }) {
+ const isTradeMatch = (item) =>
+ !isCurrentUser &&
+ ((closetList.ownsOrWantsItems === "OWNS" && item.currentUserWantsThis) ||
+ (closetList.ownsOrWantsItems === "WANTS" && item.currentUserOwnsThis));
- const tradeMatchingMode = "hide-all"; // TODO
+ const sortedItems = [...closetList.items].sort((a, b) => {
+ // This is a cute sort hack. We sort first by, bringing trade matches to
+ // the top, and then sorting by name _within_ those two groups.
+ const aName = `${isTradeMatch(a) ? "000" : "999"} ${a.name}`;
+ const bName = `${isTradeMatch(b) ? "000" : "999"} ${b.name}`;
+ return aName.localeCompare(bName);
+ });
+
+ let tradeMatchingMode;
+ if (isCurrentUser) {
+ // On your own item list, it's not helpful to show your own trade matches!
+ tradeMatchingMode = "hide-all";
+ } else if (closetList.ownsOrWantsItems === "OWNS") {
+ tradeMatchingMode = "offering";
+ } else if (closetList.ownsOrWantsItems === "WANTS") {
+ tradeMatchingMode = "seeking";
+ } else {
+ throw new Error(
+ `unexpected ownsOrWantsItems value: ${closetList.ownsOrWantsItems}`
+ );
+ }
return (