[WIP] Migrate single-list page to Next.js routing

Hey we're getting real close! :3

I accepted a small bug here where clicking the breadcrumb to "Items X wants" won't scroll down if the page isn't loaded yet. (e.g. you landed on this list page first). If you came *from* the lists index page though, then when you go back your stuff will be there already, so you should be fine. (It might also happen if the page loads fast enough, which in prod it might do?)

Just gonna leave it for now, because the workaround would be a lot! (have the page re-check the anchor once it's done loading)
This commit is contained in:
Emi Matchu 2022-09-14 23:18:13 -07:00
parent e1ebb0eb9a
commit 5d28c36e8a
5 changed files with 25 additions and 15 deletions

View file

@ -1,4 +1,4 @@
import UserItemListsIndexPage from "../../../src/app/UserItemListsIndexPage"; import UserItemListsIndexPage from "../../../../src/app/UserItemListsIndexPage";
export default function UserItemListsIndexPageWrapper() { export default function UserItemListsIndexPageWrapper() {
return <UserItemListsIndexPage />; return <UserItemListsIndexPage />;

View file

@ -0,0 +1,5 @@
import UserItemListPage from "../../../../../src/app/UserItemListPage";
export default function UserItemListPageWrapper() {
return <UserItemListPage />;
}

View file

@ -0,0 +1,4 @@
// These two routes are the same! Essentially it's a route param that must
// either be "owns" or "wants".
import UserItemListPageWrapper from "../owns/[listId]";
export default UserItemListPageWrapper;

View file

@ -11,7 +11,6 @@ import WardrobePageLayout from "./WardrobePage/WardrobePageLayout";
import { loadable } from "./util"; import { loadable } from "./util";
const HomePage = loadable(() => import("./HomePage")); const HomePage = loadable(() => import("./HomePage"));
const UserItemListPage = loadable(() => import("./UserItemListPage"));
const WardrobePage = loadable(() => import("./WardrobePage"), { const WardrobePage = loadable(() => import("./WardrobePage"), {
fallback: <WardrobePageLayout />, fallback: <WardrobePageLayout />,
}); });
@ -34,11 +33,6 @@ function App() {
<Route path="/outfits/:id"> <Route path="/outfits/:id">
<WardrobePage /> <WardrobePage />
</Route> </Route>
<Route path="/user/:userId/lists/:ownsOrWants(owns|wants)/:listId">
<PageLayout>
<UserItemListPage />
</PageLayout>
</Route>
<Route path="/"> <Route path="/">
<PageLayout hideHomeLink> <PageLayout hideHomeLink>
<HomePage /> <HomePage />

View file

@ -23,9 +23,8 @@ import {
EmailIcon, EmailIcon,
} from "@chakra-ui/icons"; } from "@chakra-ui/icons";
import { gql, useMutation, useQuery } from "@apollo/client"; import { gql, useMutation, useQuery } from "@apollo/client";
import { useParams } from "react-router-dom";
import { HashLink } from "react-router-hash-link";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router";
import { import {
List as VirtualizedList, List as VirtualizedList,
AutoSizer, AutoSizer,
@ -41,7 +40,8 @@ import useSupport from "./WardrobePage/support/useSupport";
import WIPCallout from "./components/WIPCallout"; import WIPCallout from "./components/WIPCallout";
function UserItemListPage() { function UserItemListPage() {
const { listId } = useParams(); const { query } = useRouter();
const { listId } = query;
const currentUser = useCurrentUser(); const currentUser = useCurrentUser();
const { loading, error, data } = useQuery( const { loading, error, data } = useQuery(
@ -118,12 +118,19 @@ function UserItemListPage() {
separator={<ChevronRightIcon marginTop="-2px" />} separator={<ChevronRightIcon marginTop="-2px" />}
> >
<BreadcrumbItem> <BreadcrumbItem>
<BreadcrumbLink as={Link} to={`/user/${creator.id}/lists`}> <Link href={`/user/${creator.id}/lists`} passHref>
{creator.username}'s lists <BreadcrumbLink>{creator.username}'s lists</BreadcrumbLink>
</BreadcrumbLink> </Link>
</BreadcrumbItem> </BreadcrumbItem>
<BreadcrumbItem as={HashLink} to={linkBackPath}> {/* TODO: The "wants" version of this link doesn't always scroll down
<BreadcrumbLink>{linkBackText}</BreadcrumbLink> * 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?...*/}
<BreadcrumbItem>
<Link href={linkBackPath} passHref>
<BreadcrumbLink>{linkBackText}</BreadcrumbLink>
</Link>
</BreadcrumbItem> </BreadcrumbItem>
</Breadcrumb> </Breadcrumb>
<Box height="1" /> <Box height="1" />