// import { useEffect, useState } from 'react';
// import { useHistory, Route, Redirect } from 'react-router-dom';
// import { connect } from 'react-redux';

// const ProtectedRoute = ({
//   fallback = '/',
//   roles = ['admin'],
//   auth,
//   path, component
// }) => {
//   const [acl, setAcl] = useState([]);
//   const [access, setAccess] = useState(false);
//   const history = useHistory();

//   useEffect(() => {
//     if (auth && auth.payload && auth.payload.sub.acl.length !== 0) {
//       setAcl(auth.payload.sub.acl);
//     } else {
//       setAcl('anon');
//       setAccess(false);
//     }
//     const newAcl = roles.filter((item) => acl.includes(item));
//     if (newAcl.length) {
//       setAccess(true); console.log('access24', access);
//     }
//   }, [auth]);
//   console.log('acl', acl); console.log('roles', roles);
//   return (
//       < >
//         { access ? <Route path={path} component={component}/> : <Redirect to={fallback}/>}
//       </>
//   );
// };

// const CRoute = connect(state => ({ auth: state.auth.payload }))(ProtectedRoute);

// export default CRoute;
