[WIP] Migrate /your-outfits to Next.js routing

This one was pretty boring! I was relieved to see the pagination changes seem to just work though 😅

pages/your-outfits.tsx

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

src/app/App.js

@@ -24,7 +24,6 @@ const UserItemListsIndexPage = loadable(() =>
   import("./UserItemListsIndexPage")
 );
 const UserItemListPage = loadable(() => import("./UserItemListPage"));
-const UserOutfitsPage = loadable(() => import("./UserOutfitsPage"));
 const WardrobePage = loadable(() => import("./WardrobePage"), {
   fallback: <WardrobePageLayout />,
 });
@@ -90,11 +89,6 @@ function App() {
             <UserItemListsIndexPage />
           </PageLayout>
         </Route>
-        <Route path="/your-outfits">
-          <PageLayout>
-            <UserOutfitsPage />
-          </PageLayout>
-        </Route>
         <Route path="/">
           <PageLayout hideHomeLink>
             <HomePage />

src/app/UserOutfitsPage.js

@@ -3,7 +3,8 @@ import { Box, Center, Flex, Wrap, WrapItem } from "@chakra-ui/react";
 import { ClassNames } from "@emotion/react";
 import gql from "graphql-tag";
 import { useQuery } from "@apollo/client";
-import { Link, useLocation } from "react-router-dom";
+import Link from "next/link";
+import { useRouter } from "next/router";
 
 import { Heading1, MajorErrorMessage, useCommonStyles } from "./util";
 import HangerSpinner from "./components/HangerSpinner";
@@ -55,8 +56,8 @@ const PER_PAGE = 20;
 function UserOutfitsPageContent() {
   const { isLoggedIn, isLoading: userLoading } = useCurrentUser();
 
-  const { search } = useLocation();
-  const offset = parseInt(new URLSearchParams(search).get("offset")) || 0;
+  const { query } = useRouter();
+  const offset = parseInt(query.offset) || 0;
 
   const { loading: queryLoading, error, data } = useQuery(
     USER_OUTFITS_PAGE_QUERY,
@@ -171,20 +172,21 @@ function OutfitCard({ outfit }) {
   );
 
   return (
-    <Box
-      as={Link}
-      to={`/outfits/${outfit.id}`}
-      display="block"
-      transition="all 0.2s"
-      _hover={{ transform: `scale(1.05)` }}
-      _focus={{
-        transform: `scale(1.05)`,
-        boxShadow: "outline",
-        outline: "none",
-      }}
-    >
-      <OutfitCardLayout image={image} caption={outfit.name} />
-    </Box>
+    <Link href={`/outfits/${outfit.id}`} passHref>
+      <Box
+        as="a"
+        display="block"
+        transition="all 0.2s"
+        _hover={{ transform: `scale(1.05)` }}
+        _focus={{
+          transform: `scale(1.05)`,
+          boxShadow: "outline",
+          outline: "none",
+        }}
+      >
+        <OutfitCardLayout image={image} caption={outfit.name} />
+      </Box>
+    </Link>
   );
 }
 

src/app/components/PaginationToolbar.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { Box, Button, Flex, Select } from "@chakra-ui/react";
-import { Link, useHistory, useLocation } from "react-router-dom";
+import Link from "next/link";
+import { useRouter } from "next/router";
 
 function PaginationToolbar({
   isLoading,
@@ -8,22 +9,20 @@ function PaginationToolbar({
   numPerPage = 30,
   ...props
 }) {
-  const { search } = useLocation();
-  const history = useHistory();
+  const { query, push: pushHistory } = useRouter();
 
-  const currentOffset =
-    parseInt(new URLSearchParams(search).get("offset")) || 0;
+  const currentOffset = parseInt(query.offset) || 0;
 
   const currentPageIndex = Math.floor(currentOffset / numPerPage);
   const currentPageNumber = currentPageIndex + 1;
   const numTotalPages = totalCount ? Math.ceil(totalCount / numPerPage) : null;
 
-  const prevPageSearchParams = new URLSearchParams(search);
+  const prevPageSearchParams = new URLSearchParams(query);
   const prevPageOffset = currentOffset - numPerPage;
   prevPageSearchParams.set("offset", prevPageOffset);
   const prevPageUrl = "?" + prevPageSearchParams.toString();
 
-  const nextPageSearchParams = new URLSearchParams(search);
+  const nextPageSearchParams = new URLSearchParams(query);
   const nextPageOffset = currentOffset + numPerPage;
   nextPageSearchParams.set("offset", nextPageOffset);
   const nextPageUrl = "?" + nextPageSearchParams.toString();
@@ -42,23 +41,25 @@ function PaginationToolbar({
       const newPageIndex = newPageNumber - 1;
       const newPageOffset = newPageIndex * numPerPage;
 
-      const newPageSearchParams = new URLSearchParams(search);
+      const newPageSearchParams = new URLSearchParams(query);
       newPageSearchParams.set("offset", newPageOffset);
-      history.push({ search: newPageSearchParams.toString() });
+      pushHistory("?" + newPageSearchParams.toString());
     },
-    [search, history, numPerPage]
+    [query, pushHistory, numPerPage]
   );
 
   return (
     <Flex align="center" justify="space-between" {...props}>
-      <Button
-        as={prevPageIsDisabled ? "button" : Link}
-        to={prevPageIsDisabled ? undefined : prevPageUrl}
-        _disabled={{ cursor: isLoading ? "wait" : "not-allowed", opacity: 0.4 }}
+      <LinkOrButton
+        href={prevPageIsDisabled ? undefined : prevPageUrl}
+        _disabled={{
+          cursor: isLoading ? "wait" : "not-allowed",
+          opacity: 0.4,
+        }}
         isDisabled={prevPageIsDisabled}
       >
         ← Prev
-      </Button>
+      </LinkOrButton>
       {numTotalPages && (
         <Flex align="center">
           <Box flex="0 0 auto">Page</Box>
@@ -73,18 +74,32 @@ function PaginationToolbar({
           <Box flex="0 0 auto">of {numTotalPages}</Box>
         </Flex>
       )}
-      <Button
-        as={nextPageIsDisabled ? "button" : Link}
-        to={nextPageIsDisabled ? undefined : nextPageUrl}
-        _disabled={{ cursor: isLoading ? "wait" : "not-allowed", opacity: 0.4 }}
+      <LinkOrButton
+        href={nextPageIsDisabled ? undefined : nextPageUrl}
+        _disabled={{
+          cursor: isLoading ? "wait" : "not-allowed",
+          opacity: 0.4,
+        }}
         isDisabled={nextPageIsDisabled}
       >
         Next →
-      </Button>
+      </LinkOrButton>
     </Flex>
   );
 }
 
+function LinkOrButton({ href, ...props }) {
+  if (href != null) {
+    return (
+      <Link href={href} passHref>
+        <Button as="a" {...props} />
+      </Link>
+    );
+  } else {
+    return <Button {...props} />;
+  }
+}
+
 function PageNumberSelect({
   currentPageNumber,
   numTotalPages,