Migrate home page to Next.js routing

I think that means we're done? :3 Gonna uninstall react-router-dom next.
This commit is contained in:
Emi Matchu 2022-09-15 00:43:05 -07:00
parent eb602556bf
commit 38170bfbb2
5 changed files with 27 additions and 90 deletions

View file

@ -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;

5
pages/index.tsx Normal file
View file

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

View file

@ -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;

View file

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

View file

@ -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">
<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;