Reach Router: Advanced permissions proof of concept

permission-auth-only.ts

import { TAuthContainerUserData } from '@app/containers/AuthContainer'

export default {
  guard(user: TAuthContainerUserData) {
    return user == null
  },
  redirectTo: '/login'
}

permission-guest-only.ts

import { TAuthContainerUserData } from '@app/containers/AuthContainer'

export default {
  guard(user: TAuthContainerUserData): boolean {
    return user != null
  },
  redirectTo: '/'
}

RouterPermission.tsx

import * as React from 'react'
import { Subscribe as UnstatedSubscribe } from 'unstated'
import { AuthContainer } from '@app/containers'
import { TAuthContainerUserData } from '@app/containers/AuthContainer'
import { Redirect } from '@reach/router'
import authOnly from './permission-auth-only'
import guestOnly from './permission-auth-only'

interface IPermissionFunction {
  guard: (user: TAuthContainerUserData) => boolean
  redirectTo: string
}

interface IPermissionExternalProps {
  permission: IPermissionFunction
  children: any
}

interface IPermissionInternalProps extends IPermissionExternalProps {
  user: TAuthContainerUserData
}

class Permission extends React.Component<IPermissionInternalProps> {
  render() {
    const {children, permission, user, ...props} = this.props

    if (!permission.guard(user)) {
      return <Redirect to={permission.redirectTo} />
    }

    return React.cloneElement(children, props)
  }
}

class WrappedPermission extends React.Component<IPermissionExternalProps> {
  static authOnly = authOnly
  static guestOnly = guestOnly

  render() {
    const props = this.props
    return (
      <UnstatedSubscribe to={[AuthContainer]}>
        {(auth: AuthContainer) => (
          <Permission {...props} user={auth.state.data} />
        )}
      </UnstatedSubscribe>
    )
  }
}

export default WrappedPermission