import * as React from "react" ; import { Route , RouteProps , Redirect } from "react-router-dom" ; import { getCurrentUserQuery , getApolloSession } from "@joincivil/utils" ; import { Query } from "react-apollo" ; export interface AuthenticatedRouteProps extends RouteProps { redirectTo : string ; onlyAllowUnauthenticated ? : boolean ; authUrl : string ; } export const AuthenticatedRoute = ( { render , redirectTo , authUrl , onlyAllowUnauthenticated = false , ... otherProps } ) => { const auth = getApolloSession ( ) ; const hasAuthToken = ! ! auth && ! ! auth . token ; if ( onlyAllowUnauthenticated ) { if ( hasAuthToken ) { return < Redirect to = { redirectTo } />; } } else { if ( ! hasAuthToken ) { return < Redirect to = { authUrl } />; } } if ( ! render ) { throw new Error ( "Please set a render function" ) ; } const renderChildren = ( ) => render ( otherProps ) ; if ( onlyAllowUnauthenticated && ! hasAuthToken ) { if ( render ) { return renderChildren ( ) ; } return null ; } return ( < Route { ... otherProps } > < Query < any > query = { getCurrentUserQuery } > { ( { loading , error , data } ) => { if ( loading ) { return null ; } if ( error && ! onlyAllowUnauthenticated ) { return < Redirect to = { redirectTo } />; } if ( render ) { return renderChildren ( ) ; } return null ; } } < /Query> < /Route>); } ; export const UnauthenticatedRoute = ( props ) => ( < AuthenticatedRoute onlyAllowUnauthenticated = { true } { ... props } />);