import React from 'react';
import { Route } from 'react-router';
import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';

export function AuthorizedComponent({ required, roles, children }) {
  if ( !roles.includes(required) ) {
    return null;
  }

  return (
    <>
      {children}
    </>
  );
}

export function ConnectedAuthorizedComponent({ ...props }) {
  const roles = useSelector(({ session }) => ( session.user ? session.user.roles : [] ));
  return <AuthorizedComponent roles={roles} {...props} />
}

AuthorizedComponent.propTypes =  {
 required: PropTypes.string.isRequired,
 roles: PropTypes.arrayOf(PropTypes.string).isRequired
};