diff --git a/src/app/UserItemListPage.js b/src/app/UserItemListPage.js index 003c5829..5fa1b08d 100644 --- a/src/app/UserItemListPage.js +++ b/src/app/UserItemListPage.js @@ -31,13 +31,14 @@ import { WindowScroller, } from "react-virtualized"; -import { Heading1, Heading3, MajorErrorMessage, usePageTitle } from "./util"; +import { Heading1, Heading3, MajorErrorMessage } from "./util"; import HangerSpinner from "./components/HangerSpinner"; import MarkdownAndSafeHTML from "./components/MarkdownAndSafeHTML"; import ItemCard from "./components/ItemCard"; import useCurrentUser from "./components/useCurrentUser"; import useSupport from "./WardrobePage/support/useSupport"; import WIPCallout from "./components/WIPCallout"; +import Head from "next/head"; function UserItemListPage() { const { query } = useRouter(); @@ -74,8 +75,6 @@ function UserItemListPage() { const closetList = data?.closetList; - usePageTitle(closetList?.name); - if (loading) { return (
@@ -111,35 +110,42 @@ function UserItemListPage() { } return ( - - } - > - - - {creator.username}'s lists - - - {/* TODO: The "wants" version of this link doesn't always scroll down - * the page properly, now that we're not using the - * react-router-hash-link library. Oh well for now! - * Would be nice to fix by having Next.js eliminate the loading - * spinner perhaps?...*/} - - - {linkBackText} - - - - - - + <> + + {closetList?.name && ( + {closetList?.name} | Dress to Impress + )} + + + } + > + + + {creator.username}'s lists + + + {/* TODO: The "wants" version of this link doesn't always scroll down + * the page properly, now that we're not using the + * react-router-hash-link library. Oh well for now! + * Would be nice to fix by having Next.js eliminate the loading + * spinner perhaps?...*/} + + + {linkBackText} + + + + + + + ); } diff --git a/src/app/UserItemListsIndexPage.js b/src/app/UserItemListsIndexPage.js index 431e9e2c..8a82a182 100644 --- a/src/app/UserItemListsIndexPage.js +++ b/src/app/UserItemListsIndexPage.js @@ -33,11 +33,12 @@ import { useRouter } from "next/router"; import { useQuery, useLazyQuery, useMutation } from "@apollo/client"; import HangerSpinner from "./components/HangerSpinner"; -import { Heading1, Heading2, usePageTitle } from "./util"; +import { Heading1, Heading2 } from "./util"; import SupportOnly from "./WardrobePage/support/SupportOnly"; import useSupport from "./WardrobePage/support/useSupport"; import useCurrentUser from "./components/useCurrentUser"; import { ClosetList, NeopetsStarIcon } from "./UserItemListPage"; +import Head from "next/head"; const BadgeButton = React.forwardRef((props, ref) => ( @@ -90,7 +91,6 @@ function UserItemListsIndexPage() { } else { pageTitleText = null; } - usePageTitle(pageTitleText); if (loading) { return ( @@ -151,118 +151,155 @@ function UserItemListsIndexPage() { ).size; return ( - - {({ css }) => ( - - - - {pageTitleText} - - {data.user.contactNeopetsUsername && ( - - - - {data.user.contactNeopetsUsername} - - - )} - {data.user.contactNeopetsUsername && ( - - - - Neomail - - - )} - - - - + + {pageTitleText} | Dress to Impress + + + {({ css }) => ( + + + + {pageTitleText} + + {data.user.contactNeopetsUsername && ( + + - - Support - - - - - {/* Usually I put "Own" before "Want", but this matches the natural - * order on the page: the _matches_ for things you want are things - * _this user_ owns, so they come first. I think it's also probably a - * more natural train of thought: you come to someone's list _wanting_ - * something, and _then_ thinking about what you can offer. */} - {!isCurrentUser && numItemsTheyOwnThatYouWant > 0 && ( - - - - {numItemsTheyOwnThatYouWant > 1 - ? `${numItemsTheyOwnThatYouWant} items you want` - : "1 item you want"} - - - )} - {!isCurrentUser && numItemsTheyWantThatYouOwn > 0 && ( - - - - {numItemsTheyWantThatYouOwn > 1 - ? `${numItemsTheyWantThatYouOwn} items you own` - : "1 item you own"} - - - )} - - - - - - - + + {data.user.contactNeopetsUsername} + + + )} + {data.user.contactNeopetsUsername && ( + + + + Neomail + + + )} + + + + + + Support + + + + + {/* Usually I put "Own" before "Want", but this matches the natural + * order on the page: the _matches_ for things you want are things + * _this user_ owns, so they come first. I think it's also probably a + * more natural train of thought: you come to someone's list _wanting_ + * something, and _then_ thinking about what you can offer. */} + {!isCurrentUser && numItemsTheyOwnThatYouWant > 0 && ( + + + + {numItemsTheyOwnThatYouWant > 1 + ? `${numItemsTheyOwnThatYouWant} items you want` + : "1 item you want"} + + + )} + {!isCurrentUser && numItemsTheyWantThatYouOwn > 0 && ( + + + + {numItemsTheyWantThatYouOwn > 1 + ? `${numItemsTheyWantThatYouOwn} items you own` + : "1 item you own"} + + + )} + + + + + + + - - + + + {isCurrentUser + ? "Items you own" + : `Items ${data.user.username} owns`} + + + {listsOfOwnedItems.map((closetList) => ( + + ))} + + + + + + {isCurrentUser - ? "Items you own" - : `Items ${data.user.username} owns`} + ? "Items you want" + : `Items ${data.user.username} wants`} - - {listsOfOwnedItems.map((closetList) => ( + + {listsOfWantedItems.map((closetList) => ( - - - - - {isCurrentUser - ? "Items you want" - : `Items ${data.user.username} wants`} - - - {listsOfWantedItems.map((closetList) => ( - - ))} - - - )} - + )} + + ); }