Matchu
e1ebb0eb9a
We're getting so close! :3 There was some shared components in `UserItemListPage` that needed updated too, even though the rest of the page isn't migrated yet.
62 lines
1.6 KiB
JavaScript
62 lines
1.6 KiB
JavaScript
import React from "react";
|
|
import {
|
|
BrowserRouter as Router,
|
|
Switch,
|
|
Route,
|
|
useLocation,
|
|
} from "react-router-dom";
|
|
|
|
import PageLayout from "./PageLayout";
|
|
import WardrobePageLayout from "./WardrobePage/WardrobePageLayout";
|
|
import { loadable } from "./util";
|
|
|
|
const HomePage = loadable(() => import("./HomePage"));
|
|
const UserItemListPage = loadable(() => import("./UserItemListPage"));
|
|
const WardrobePage = loadable(() => import("./WardrobePage"), {
|
|
fallback: <WardrobePageLayout />,
|
|
});
|
|
|
|
/**
|
|
* 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="/outfits/new">
|
|
<WardrobePage />
|
|
</Route>
|
|
<Route path="/outfits/:id">
|
|
<WardrobePage />
|
|
</Route>
|
|
<Route path="/user/:userId/lists/:ownsOrWants(owns|wants)/:listId">
|
|
<PageLayout>
|
|
<UserItemListPage />
|
|
</PageLayout>
|
|
</Route>
|
|
<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;
|