diff --git a/pages/[[...slug]].tsx b/pages/[[...slug]].tsx
deleted file mode 100644
index 54e53b9..0000000
--- a/pages/[[...slug]].tsx
+++ /dev/null
@@ -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 ;
-};
-
-// This old fallback page uses App, which already has PageLayout built-in.
-FallbackPage.renderWithLayout = (children: JSX.Element) => children;
-
-export default FallbackPage;
diff --git a/pages/index.tsx b/pages/index.tsx
new file mode 100644
index 0000000..0393e12
--- /dev/null
+++ b/pages/index.tsx
@@ -0,0 +1,5 @@
+import HomePage from "../src/app/HomePage";
+
+export default function HomePageWrapper() {
+ return ;
+}
diff --git a/src/app/App.js b/src/app/App.js
deleted file mode 100644
index dafbe94..0000000
--- a/src/app/App.js
+++ /dev/null
@@ -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 (
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-/**
- * 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;
diff --git a/src/app/GlobalHeader.js b/src/app/GlobalHeader.js
index 244ad97..034ba56 100644
--- a/src/app/GlobalHeader.js
+++ b/src/app/GlobalHeader.js
@@ -37,7 +37,7 @@ function GlobalHeader() {
function HomeLink(props) {
const { pathname } = useRouter();
- const isHomePage = pathname === "";
+ const isHomePage = pathname === "/";
return (
diff --git a/src/app/HomePage.js b/src/app/HomePage.js
index 7cf68f1..baf8761 100644
--- a/src/app/HomePage.js
+++ b/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 (