How do you chain a React HOC with Meteor withTracker to pass data from Meteor to the HOC?


#1

I followed the excellent tutorial on managing Roles with an HOC under React : https://hackernoon.com/role-based-authorization-in-react-c70bb7641db4

My React HOC is :

const AuthorizationHOC = (allowedRoles) => (WrappedComponent) => {
    return class WithAuthorization extends Component {
        constructor(props) {
            this.state = {
                user: {
                    name: 'vcarl',
                    role: 'admin' // <= should instead come from Meteor through meteorRoles prop / withTracker
                }
            }
        }
        render() {
            const {role} = this.state.user;
            if (allowedRoles.includes(role)) {
                return <WrappedComponent {...this.props} />
            }
            else {
                return <div/>
            }
        }
    }
}

It worked as expected, f.ex :

AuthorizationHOC(['manager', 'admin'])(SubscribersAdmin);

I then tried to pass the role data to the HOC as this.props.meteorRole using withTracker :

export default AuthorizationHOCMeteorContainer = withTracker(() => {
    return {
        meteorRoles: 'admin'
    };
})(AuthorizationHOC);

but after several hours I still fail with an AuthorizationHOC is not a function error !
I suppose it’s quite obvious but I can’t get it! If someone could help :slight_smile:


#2

Does the following work?

export default AuthorizationHOCMeteorContainer = withTracker(() => {
    return {
        meteorRoles: 'admin'
    };
})(AuthorizationHOC('admin'])(SubscribersAdmin));