Migrate home page to Next.js routing

I think that means we're done? :3 Gonna uninstall react-router-dom next.

pages/[[...slug]].tsx

@@ -1,22 +0,0 @@
-import React from "react";
-import type { NextPageWithLayout } from "./_app";
-// import App from '../src'
-
-// next/dynamic is used to prevent breaking incompatibilities
-// with SSR from window.SOME_VAR usage, if this is not used
-// next/dynamic can be removed to take advantage of SSR/prerendering
-import dynamic from "next/dynamic";
-
-// try changing "ssr" to true below to test for incompatibilities, if
-// no errors occur the above static import can be used instead and the
-// below removed
-const App = dynamic(() => import("../src/app/App"), { ssr: false });
-
-const FallbackPage: NextPageWithLayout = () => {
-  return <App />;
-};
-
-// This old fallback page uses App, which already has PageLayout built-in.
-FallbackPage.renderWithLayout = (children: JSX.Element) => children;
-
-export default FallbackPage;

pages/index.tsx

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

src/app/App.js

@@ -1,46 +0,0 @@
-import React from "react";
-import {
-  BrowserRouter as Router,
-  Switch,
-  Route,
-  useLocation,
-} from "react-router-dom";
-
-import PageLayout from "./PageLayout";
-import { loadable } from "./util";
-
-const HomePage = loadable(() => import("./HomePage"));
-
-/**
- * App is the entry point of our application. There's not a ton of exciting
- * stuff happening here, mostly just setting up some globals and theming!
- *
- * To really dive into the code, try going down into a page component!
- */
-function App() {
-  return (
-    <Router>
-      <ScrollToTop />
-
-      <Switch>
-        <Route path="/">
-          <PageLayout hideHomeLink>
-            <HomePage />
-          </PageLayout>
-        </Route>
-      </Switch>
-    </Router>
-  );
-}
-
-/**
- * ScrollToTop scrolls to the top of the page when you navigate.
- * Copied from https://reactrouter.com/web/guides/scroll-restoration/scroll-to-top.
- */
-function ScrollToTop() {
-  const { pathname } = useLocation();
-  React.useEffect(() => window.scrollTo(0, 0), [pathname]);
-  return null;
-}
-
-export default App;

src/app/GlobalHeader.js

@@ -37,7 +37,7 @@ function GlobalHeader() {
 
 function HomeLink(props) {
   const { pathname } = useRouter();
-  const isHomePage = pathname === "";
+  const isHomePage = pathname === "/";
 
   return (
     <Link href="/" passHref>

src/app/HomePage.js

@@ -35,8 +35,9 @@ import {
   VStack,
 } from "@chakra-ui/react";
 import { ArrowForwardIcon, SearchIcon } from "@chakra-ui/icons";
-import { Link, useHistory, useLocation } from "react-router-dom";
 import { useLazyQuery, useQuery } from "@apollo/client";
+import Link from "next/link";
+import { useRouter } from "next/router";
 import Image from "next/image";
 
 import {
@@ -136,7 +137,7 @@ function HomePage() {
 }
 
 function StartOutfitForm({ onChange }) {
-  const history = useHistory();
+  const { push: pushHistory } = useRouter();
 
   const idealPose = React.useMemo(
     () => (Math.random() > 0.5 ? "HAPPY_FEM" : "HAPPY_MASC"),
@@ -161,7 +162,7 @@ function StartOutfitForm({ onChange }) {
       pose: closestPose,
     });
 
-    history.push(`/outfits/new?${params}`);
+    pushHistory(`/outfits/new?${params}`);
   };
 
   const buttonBgColor = useColorModeValue("green.600", "green.300");
@@ -208,10 +209,9 @@ function StartOutfitForm({ onChange }) {
 }
 
 function SubmitPetForm() {
-  const history = useHistory();
+  const { query, push: pushHistory } = useRouter();
   const theme = useTheme();
   const toast = useToast();
-  const location = useLocation();
 
   const [petName, setPetName] = React.useState("");
 
@@ -247,7 +247,7 @@ function SubmitPetForm() {
         for (const item of items) {
           params.append("objects[]", item.id);
         }
-        history.push(`/outfits/new?${params}`);
+        pushHistory(`/outfits/new?${params}`);
       },
       onError: () => {
         toast({
@@ -279,14 +279,13 @@ function SubmitPetForm() {
   // custom search engines. (I feel like a route or a different UX would be
   // better, but I don't really know enough to commit to one… let's just keep
   // this simple for now, I think. We might change this someday!)
+  const autoLoadPetName = query.loadPet;
   React.useEffect(() => {
-    const params = new URLSearchParams(location.search);
-    const petName = params.get("loadPet");
-    if (petName) {
-      setPetName(petName);
-      loadPet(petName);
+    if (autoLoadPetName != null) {
+      setPetName(autoLoadPetName);
+      loadPet(autoLoadPetName);
     }
-  }, [location, loadPet]);
+  }, [autoLoadPetName, loadPet]);
 
   const { brightBackground } = useCommonStyles();
   const inputBorderColor = useColorModeValue("green.600", "green.500");
@@ -358,22 +357,24 @@ function NewItemsSection() {
 function ItemsSearchField() {
   const [query, setQuery] = React.useState("");
   const { brightBackground } = useCommonStyles();
-  const history = useHistory();
+  const { push: pushHistory } = useRouter();
 
   return (
     <form
       onSubmit={(e) => {
         e.preventDefault();
         if (query) {
-          history.push(`/items/search/${encodeURIComponent(query)}`);
+          pushHistory(`/items/search/${encodeURIComponent(query)}`);
         }
       }}
     >
       <InputGroup size="sm">
         <InputLeftElement>
-          <Box as={Link} to="/items/search" display="flex">
-            <SearchIcon color="gray.400" />
-          </Box>
+          <Link href="/items/search" passHref>
+            <Box as="a" display="flex">
+              <SearchIcon color="gray.400" />
+            </Box>
+          </Link>
         </InputLeftElement>
         <Input
           value={query}
@@ -906,12 +907,11 @@ function FeedbackForm() {
  * other people know about the tools and poke around a powerless interface!
  */
 function useSupportSetup() {
-  const location = useLocation();
+  const { query } = useRouter();
   const toast = useToast();
 
+  const supportSecret = query.supportSecret;
   React.useEffect(() => {
-    const params = new URLSearchParams(location.search);
-    const supportSecret = params.get("supportSecret");
     const existingSupportSecret = localStorage.getItem("supportSecret");
 
     if (supportSecret && supportSecret !== existingSupportSecret) {
@@ -937,7 +937,7 @@ function useSupportSetup() {
         isClosable: true,
       });
     }
-  }, [location, toast]);
+  }, [supportSecret, toast]);
 }
 
 export default HomePage;