prep for react-router v6

README.md

@@ -82,14 +82,19 @@ You don't have to follow these instructions, but it's one way to set up a contin
 - `dokku elasticsearch:create fediverse`
 - `dokku elasticsearch:link fediverse phoenix`
 
-6. Update the backend configuration. In particular, change the `user_agent` in [config.exs](/backend/config/config.exs) to something descriptive.
+6. Set the build dirs
-7. Push the apps, e.g. `git push dokku@<DOMAIN>:phoenix` (note that the first push cannot be from the CD pipeline).
+
-8. Set up SSL for the Phoenix app
+- `dokku builder:set phoenix build-dir backend`
+- `dokku builder:set gephi build-dir gephi`
+
+7. Update the backend configuration. In particular, change the `user_agent` in [config.exs](/backend/config/config.exs) to something descriptive.
+8. Push the apps, e.g. `git push dokku@<DOMAIN>:phoenix` (note that the first push cannot be from the CD pipeline).
+9. Set up SSL for the Phoenix app
 
 - `dokku letsencrypt:enable phoenix`
 - `dokku letsencrypt:cron-job --add`
 
-9. Set up a cron job for the graph layout (use the `dokku` user). E.g.
+10. Set up a cron job for the graph layout (use the `dokku` user). E.g.
 
 ```
 SHELL=/bin/bash

frontend/src/AppRouter.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { Classes } from "@blueprintjs/core";
 
 import { ConnectedRouter } from "connected-react-router";
-import { Route } from "react-router-dom";
+import { Route, Switch } from "react-router-dom";
 import { Nav } from "./components/organisms";
 import {
   AboutScreen,
@@ -20,11 +20,23 @@ const AppRouter: React.FC = () => (
     <div className={`${Classes.DARK} App`}>
       <Nav />
       <main role="main">
-        <Route path="/instances" exact component={TableScreen} />
+        <Switch>
-        <Route path="/about" exact component={AboutScreen} />
+          <Route path="/instances" exact>
-        <Route path="/admin/login" exact component={LoginScreen} />
+            <TableScreen />
-        <Route path="/admin/verify" exact component={VerifyLoginScreen} />
+          </Route>
-        <Route path="/admin" exact component={AdminScreen} />
+          <Route path="/about" exact>
+            <AboutScreen />
+          </Route>
+          <Route path="/admin/login" exact>
+            <LoginScreen />
+          </Route>
+          <Route path="/admin/verify" exact>
+            <VerifyLoginScreen />
+          </Route>
+          <Route path="/admin" exact>
+            <AdminScreen />
+          </Route>
+        </Switch>
         {/* We always want the GraphScreen to be rendered (since un- and re-mounting it is expensive */}
         <GraphScreen />
       </main>

frontend/src/components/screens/GraphScreen.tsx

@@ -3,13 +3,15 @@ import { connect } from "react-redux";
 import { Dispatch } from "redux";
 import styled from "styled-components";
 
-import { Route, RouteComponentProps, Switch, withRouter } from "react-router";
+import { Route, Switch } from "react-router";
 import { InstanceScreen, SearchScreen } from ".";
 import { INSTANCE_DOMAIN_PATH } from "../../constants";
 import { loadInstance } from "../../redux/actions";
 import { AppState } from "../../redux/types";
 import { domainMatchSelector, isSmallScreen } from "../../util";
 import { Graph, SidebarContainer } from "../organisms";
+import { useLocation } from "react-router-dom";
+import type { Location } from "history";
 
 const GraphContainer = styled.div`
   display: flex;
@@ -24,7 +26,8 @@ const FullDiv = styled.div`
   right: 0;
 `;
 
-interface GraphScreenProps extends RouteComponentProps {
+interface GraphScreenProps {
+  location: Location;
   currentInstanceName: string | null;
   pathname: string;
   graphLoadError: boolean;
@@ -79,8 +82,12 @@ class GraphScreenImpl extends React.Component<GraphScreenProps, GraphScreenState
         {isSmallScreen || !this.state.hasBeenViewed || <Graph />}
         <SidebarContainer>
           <Switch>
-            <Route path={INSTANCE_DOMAIN_PATH} component={InstanceScreen} />
+            <Route path={INSTANCE_DOMAIN_PATH}>
-            <Route exact path="/" component={SearchScreen} />
+              <InstanceScreen />
+            </Route>
+            <Route exact path="/">
+              <SearchScreen />
+            </Route>
           </Switch>
         </SidebarContainer>
       </GraphContainer>
@@ -106,4 +113,9 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
   loadInstance: (domain: string | null) => dispatch(loadInstance(domain) as any),
 });
 const GraphScreen = connect(mapStateToProps, mapDispatchToProps)(GraphScreenImpl);
-export default withRouter(GraphScreen);
+const Component = (props: Omit<React.ComponentProps<typeof GraphScreen>, "location">) => {
+  const location = useLocation();
+  return <GraphScreen {...props} location={location} />;
+};
+Component.displayName = "GraphScreen";
+export default Component;