connect react redux HOC got error of `Cannot call a class as a function`

Question

What's wrong with my HOC below? I got error of cannot call a class as function?

https://i.imgur.com/SirwcGZ.png

My HOC

const CheckPermission = (Component) => { 
    return class App extends Component { 
        componentDidMount() {
            this.props.fetchUsers().then(resp => {
                this.setState({user: true, loading: false});
            })
        } 
        render() { 
           const { user, loading } = this.props

           loading && <div>Loading...</div>

           !user && <Redirect to="/dashboard" />

           return <Component {...this.props} />
        }
    } 
}


export default connect(state=>state.global, {fetchUsers})(CheckPermission)

This is how I import and user CheckPermission:

<Route exact path='/dashboard' component={CheckPermission(Dashboard)} />

Answer 1

you can't wrap checkPermissions with a connect because it is also a HOC. Instead you have to compose them.

import { compose } from 'redux';

...

export default compose(
  connect(state=>state.global, {fetchUsers}),  
  CheckPermission
);