Restriction HOC

Restricted.tsx

/** @jsx createElement **/
import { createElement, FC, Fragment } from 'react'
import { connect } from 'react-redux'
import { RootState } from '@/models/app'
import { Auth, Roles, roleOptions } from '@/models/auth'

interface Props {
  children: React.ReactNode
  role?: Roles
  roles?: Roles[]
}

interface Connected {
  auth: Auth
}

const Restricted: FC<Props & Connected> = ({ children, role, roles, auth }) => {
  if (!auth.isLoggedIn) return null

  if (role && (!roleOptions[auth.role] || auth.role !== role)) return null

  if (roles && !roles.includes(auth.role)) return null

  return <Fragment>{children}</Fragment>
}

const mapState = (state: RootState): Connected => ({
  auth: state.auth
})

export default connect(mapState)(Restricted)