usePermission react hook to handle frontend authorization concerns

motivation.md

why is this a React hook?

this is a simplified version of the production/real world version

You can consume roles from context/redux/relay or other place to improve dx and void bugs

usage.tsx

const App = ({ user }) => {
   const { hasRole } = usePermission(user);
   
   return (
      <span>Hello</span>
      {hasRole('PRODUCT:CREATE') && <button>Create Product</button>
   );
}

usePermission.tsx

const usePermission = (user: UserPermission_user) => {
  const hasRole = (role: string) => {
    return user.roles.includes(role);
  };
  
  return {
    hasRole
  };
};