Create app namespace for all absolute requires of app modules. Move all packages under packages yarn workspace

packages/app/containers/AuthFlowRoute.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Route, RouteProps } from 'react-router-dom';
+
+import AuthFlowRouteContents from './AuthFlowRouteContents';
+
+export default function AuthFlowRoute(props: RouteProps) {
+  const { component: Component, ...routeProps } = props;
+
+  return (
+    <Route
+      {...routeProps}
+      render={routerProps => (
+        <AuthFlowRouteContents
+          routerProps={routerProps}
+          component={Component}
+        />
+      )}
+    />
+  );
+}

packages/app/containers/AuthFlowRouteContents.test.tsx

@@ -0,0 +1,57 @@
+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';
+
+describe('AuthFlowRouteContents', () => {
+  beforeEach(() => {
+    sinon.stub(authFlow, 'handleRequest');
+  });
+
+  afterEach(() => {
+    (authFlow.handleRequest as any).restore();
+  });
+
+  function Component() {
+    return <div />;
+  }
+
+  it('should render component if route allowed', () => {
+    const request = {
+      path: '/path',
+      params: { foo: 1 },
+      query: new URLSearchParams(),
+    };
+
+    const routerProps = {
+      location: {
+        pathname: request.path,
+        query: request.query,
+      },
+      match: {
+        params: request.params,
+      },
+    };
+
+    (authFlow.handleRequest as any).callsArg(2);
+
+    const wrapper = mount(
+      <AuthFlowRouteContents routerProps={routerProps} component={Component} />,
+    );
+
+    const component = wrapper.find(Component);
+
+    expect(authFlow.handleRequest, 'to have a call satisfying', [
+      request,
+      expect.it('to be a function'),
+      expect.it('to be a function'),
+    ]);
+
+    expect(component.exists(), 'to be true');
+    expect(component.props(), 'to equal', routerProps);
+  });
+});

packages/app/containers/AuthFlowRouteContents.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Redirect } from 'react-router-dom';
+
+import authFlow from 'app/services/authFlow';
+
+type ComponentProps = {
+  component: any;
+  routerProps: { [key: string]: any };
+};
+
+export default class AuthFlowRouteContents extends React.Component<
+  ComponentProps,
+  {
+    component: any;
+  }
+> {
+  state: {
+    component: any;
+  } = {
+    component: null,
+  };
+
+  _isMounted = false;
+
+  componentDidMount() {
+    this._isMounted = true;
+    this.handleProps(this.props);
+  }
+
+  componentWillReceiveProps(nextProps: ComponentProps) {
+    this.handleProps(nextProps);
+  }
+
+  componentWillUnmount() {
+    this._isMounted = false;
+  }
+
+  render() {
+    return this.state.component;
+  }
+
+  handleProps(props: ComponentProps) {
+    const { routerProps } = props;
+
+    authFlow.handleRequest(
+      {
+        path: routerProps.location.pathname,
+        params: routerProps.match.params,
+        query: routerProps.location.query,
+      },
+      this.onRedirect.bind(this),
+      this.onRouteAllowed.bind(this, props),
+    );
+  }
+
+  onRedirect(path: string) {
+    if (!this._isMounted) {
+      return;
+    }
+
+    this.setState({
+      component: <Redirect to={path} />,
+    });
+  }
+
+  onRouteAllowed(props: ComponentProps) {
+    const { component: Component } = props;
+
+    if (!this._isMounted) {
+      return;
+    }
+
+    this.setState({
+      component: <Component {...props.routerProps} />,
+    });
+  }
+}

packages/app/containers/PrivateRoute.tsx

@@ -0,0 +1,29 @@
+import React, { ComponentType } from 'react';
+import { Route, Redirect, RouteProps } from 'react-router-dom';
+import { Location } from 'history';
+import { connect } from 'react-redux';
+import { getActiveAccount } from 'app/components/accounts/reducer';
+import { Account } from 'app/components/accounts';
+import { RootState } from 'app/reducers';
+
+interface Props extends RouteProps {
+  component: ComponentType<any>;
+  account: Account | null;
+}
+
+const PrivateRoute = ({ account, component: Component, ...rest }: Props) => (
+  <Route
+    {...rest}
+    render={(props: { location: Location }) =>
+      !account || !account.token ? (
+        <Redirect to="/login" />
+      ) : (
+        <Component {...props} />
+      )
+    }
+  />
+);
+
+export default connect((state: RootState) => ({
+  account: getActiveAccount(state),
+}))(PrivateRoute);