Remove deprecated methods usage

packages/app/containers/AuthFlowRoute.tsx

@@ -6,6 +6,10 @@ import AuthFlowRouteContents from './AuthFlowRouteContents';
 export default function AuthFlowRoute(props: RouteProps) {
   const { component: Component, ...routeProps } = props;
 
+  if (!Component) {
+    throw new Error('props.component required');
+  }
+
   return (
     <Route
       {...routeProps}

packages/app/containers/AuthFlowRouteContents.test.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import sinon from 'sinon';
 import expect from 'app/test/unexpected';
 import { mount } from 'enzyme';
-
 import authFlow from 'app/services/authFlow';
 
 import AuthFlowRouteContents from './AuthFlowRouteContents';
@@ -21,7 +20,7 @@ describe('AuthFlowRouteContents', () => {
   }
 
   it('should render component if route allowed', () => {
-    const request = {
+    const authRequest = {
       path: '/path',
       params: { foo: 1 },
       query: new URLSearchParams(),
@@ -29,13 +28,14 @@ describe('AuthFlowRouteContents', () => {
 
     const routerProps = {
       location: {
-        pathname: request.path,
-        query: request.query,
+        pathname: authRequest.path,
+        search: '',
+        query: new URLSearchParams(),
       },
       match: {
-        params: request.params,
+        params: authRequest.params,
       },
-    };
+    } as any;
 
     (authFlow.handleRequest as any).callsArg(2);
 
@@ -46,7 +46,10 @@ describe('AuthFlowRouteContents', () => {
     const component = wrapper.find(Component);
 
     expect(authFlow.handleRequest, 'to have a call satisfying', [
-      request,
+      {
+        ...authRequest,
+        query: expect.it('to be a', URLSearchParams),
+      },
       expect.it('to be a function'),
       expect.it('to be a function'),
     ]);

packages/app/containers/AuthFlowRouteContents.tsx

@@ -1,52 +1,70 @@
 import React from 'react';
-import { Redirect } from 'react-router-dom';
+import { Redirect, RouteComponentProps } from 'react-router-dom';
 
 import authFlow from 'app/services/authFlow';
 
-type ComponentProps = {
-  component: any;
-  routerProps: { [key: string]: any };
-};
+interface Props {
+  component:
+    | React.ComponentType<RouteComponentProps<any>>
+    | React.ComponentType<any>;
+  routerProps: RouteComponentProps;
+}
+
+interface State {
+  access: null | 'rejected' | 'allowed';
+  component: React.ReactElement | null;
+}
 
 export default class AuthFlowRouteContents extends React.Component<
-  ComponentProps,
-  {
-    component: any;
-  }
+  Props,
+  State
 > {
-  state: {
-    component: any;
-  } = {
+  state: State = {
+    access: null,
     component: null,
   };
 
-  _isMounted = false;
+  mounted = false;
+
+  shouldComponentUpdate(
+    { routerProps: nextRoute, component: nextComponent }: Props,
+    state: State,
+  ) {
+    const { component: prevComponent, routerProps: prevRoute } = this.props;
+
+    return (
+      prevRoute.location.pathname !== nextRoute.location.pathname ||
+      prevRoute.location.search !== nextRoute.location.search ||
+      prevComponent !== nextComponent ||
+      this.state.access !== state.access
+    );
+  }
 
   componentDidMount() {
-    this._isMounted = true;
+    this.mounted = true;
     this.handleProps(this.props);
   }
 
-  componentWillReceiveProps(nextProps: ComponentProps) {
-    this.handleProps(nextProps);
+  componentDidUpdate() {
+    this.handleProps(this.props);
   }
 
   componentWillUnmount() {
-    this._isMounted = false;
+    this.mounted = false;
   }
 
   render() {
     return this.state.component;
   }
 
-  handleProps(props: ComponentProps) {
+  handleProps(props: Props) {
     const { routerProps } = props;
 
     authFlow.handleRequest(
       {
         path: routerProps.location.pathname,
         params: routerProps.match.params,
-        query: routerProps.location.query,
+        query: new URLSearchParams(routerProps.location.search),
       },
       this.onRedirect.bind(this),
       this.onRouteAllowed.bind(this, props),
@@ -54,23 +72,25 @@ export default class AuthFlowRouteContents extends React.Component<
   }
 
   onRedirect(path: string) {
-    if (!this._isMounted) {
+    if (!this.mounted) {
       return;
     }
 
     this.setState({
+      access: 'rejected',
       component: <Redirect to={path} />,
     });
   }
 
-  onRouteAllowed(props: ComponentProps) {
-    const { component: Component } = props;
-
-    if (!this._isMounted) {
+  onRouteAllowed(props: Props) {
+    if (!this.mounted) {
       return;
     }
 
+    const { component: Component } = props;
+
     this.setState({
+      access: 'allowed',
       component: <Component {...props.routerProps} />,
     });
   }