accounts-frontend/packages/app/containers/AuthFlowRouteContents.tsx

import React from 'react';
import { Redirect, RouteComponentProps } from 'react-router-dom';

import authFlow from 'app/services/authFlow';

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<Props, State> {
    state: State = {
        access: null,
        component: null,
    };

    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.mounted = true;
        this.handleProps(this.props);
    }

    componentDidUpdate() {
        this.handleProps(this.props);
    }

    componentWillUnmount() {
        this.mounted = false;
    }

    render() {
        return this.state.component;
    }

    handleProps(props: Props) {
        const { routerProps } = props;

        authFlow.handleRequest(
            {
                path: routerProps.location.pathname,
                params: routerProps.match.params,
                query: new URLSearchParams(routerProps.location.search),
            },
            this.onRedirect.bind(this),
            this.onRouteAllowed.bind(this, props),
        );
    }

    onRedirect(path: string) {
        if (!this.mounted) {
            return;
        }

        this.setState({
            access: 'rejected',
            component: <Redirect to={path} />,
        });
    }

    onRouteAllowed(props: Props) {
        if (!this.mounted) {
            return;
        }

        const { component: Component } = props;

        this.setState({
            access: 'allowed',
            component: <Component {...props.routerProps} />,
        });
    }
}