Add page titles to item list pages

src/app/UserItemListPage.js

@@ -10,7 +10,7 @@ import {
   WrapItem,
 } from "@chakra-ui/react";
 import { ArrowForwardIcon, ChevronRightIcon } from "@chakra-ui/icons";
-import { Heading1, MajorErrorMessage } from "./util";
+import { Heading1, MajorErrorMessage, usePageTitle } from "./util";
 import { gql, useQuery } from "@apollo/client";
 import { Link, useParams } from "react-router-dom";
 import { HashLink } from "react-router-hash-link";
@@ -51,6 +51,10 @@ function UserItemListPage() {
     { variables: { listId }, context: { sendAuth: true } }
   );
 
+  const closetList = data?.closetList;
+
+  usePageTitle(closetList?.name);
+
   if (loading) {
     return (
       <Center>
@@ -63,7 +67,6 @@ function UserItemListPage() {
     return <MajorErrorMessage error={error} variant="network" />;
   }
 
-  const closetList = data?.closetList;
   if (!closetList) {
     return <MajorErrorMessage variant="not-found" />;
   }

src/app/UserItemsPage.js

@@ -36,7 +36,7 @@ import { Link, useHistory, useParams } from "react-router-dom";
 import { useQuery, useLazyQuery, useMutation } from "@apollo/client";
 
 import HangerSpinner from "./components/HangerSpinner";
-import { Heading1, Heading2, Heading3 } from "./util";
+import { Heading1, Heading2, Heading3, usePageTitle } from "./util";
 import MarkdownAndSafeHTML from "./components/MarkdownAndSafeHTML";
 import SupportOnly from "./WardrobePage/support/SupportOnly";
 import useSupport from "./WardrobePage/support/useSupport";
@@ -86,6 +86,16 @@ function UserItemsPage() {
     { variables: { userId }, context: { sendAuth: true } }
   );
 
+  let pageTitleText;
+  if (isCurrentUser) {
+    pageTitleText = "Your lists";
+  } else if (data?.user) {
+    pageTitleText = `${data?.user?.username}'s lists`;
+  } else {
+    pageTitleText = null;
+  }
+  usePageTitle(pageTitleText);
+
   if (loading) {
     return (
       <Center>
@@ -150,9 +160,7 @@ function UserItemsPage() {
         <Box>
           <Flex align="center" wrap="wrap-reverse">
             <Box>
-              <Heading1>
-                {isCurrentUser ? "Your items" : `${data.user.username}'s items`}
-              </Heading1>
+              <Heading1>{pageTitleText}</Heading1>
               <Wrap spacing="2" opacity="0.7">
                 {data.user.contactNeopetsUsername && (
                   <WrapItem>