From e42f39f49b41f0874422a92530a79521f4a0c88c Mon Sep 17 00:00:00 2001 From: Matchu Date: Thu, 15 Sep 2022 03:38:42 -0700 Subject: [PATCH] Use new page title syntax for list pages I'm not gonna do SSR here, the pages aren't really designed for partial loading state yet. It could be done, but I'm too sleepy! And it's too much refactor at once. --- src/app/UserItemListPage.js | 70 ++++---- src/app/UserItemListsIndexPage.js | 281 +++++++++++++++--------------- 2 files changed, 181 insertions(+), 170 deletions(-) diff --git a/src/app/UserItemListPage.js b/src/app/UserItemListPage.js index 003c582..5fa1b08 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 431e9e2..8a82a18 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) => ( - - ))} - - - )} - + )} + + ); }