Wrapper for permission for react

reactAuthWrapper.md

Code :

export const withAuth = (Component, menuObj) => {
    const { menuId, action, menuName } = menuObj;
    class UserMode extends React.Component {
        state = {
            isAllowedToAccess: false,
            isProcessCompleted: false,
            menuPermissionObj: {},
            masterAccess: false
        };

        async componentDidMount() {
            const permission = this.props.auth.menuPermissions
                ? this.props.auth.menuPermissions
                : JSON.parse(localStorage.getItem('menu_permissions'));
            await this.checkAuthorization(permission);
        }

        shouldComponentUpdate(nextProps, nextState) {
            /* 
             Restrict re-render until there is 
             menuPermissions object available for user profile
            */
            if (this.props.auth.menuPermissions) {
                return true;
            } else {
                return false;
            }
        }

        /* Business logic to check roles & permissions for the user and restrict them */
        checkAuthorization = permissionArr => {
            const menuData = this.props.auth.menuList
                ? this.props.auth.menuList
                : JSON.parse(localStorage.getItem('menu_list'));
            let access = false;
            let menuPermissionObj = {};
            if (permissionArr) {
                permissionArr.forEach((item, index) => {
                    let id = menuId ? menuId : menuData[menuName];
                    if (item.menu_id == id) {
                        if (item[action] == 1) {
                            access = true;
                        }
                        menuPermissionObj = {
                            add: convertToBool(item.add),
                            edit: convertToBool(item.edit),
                            view: convertToBool(item.view),
                            delete: convertToBool(item.delete)
                        };
                    }
                });
            }

            console.log('has access', access);
            this.setState({
                isAllowedToAccess: access,
                isProcessCompleted: true,
                menuPermissionObj
            });
        };

        render() {
            const {
                isProcessCompleted,
                isAllowedToAccess,
                menuPermissionObj,
                masterAccess
            } = this.state;
            return isProcessCompleted ? (
                isAllowedToAccess ? (
                    <Fragment>
                        <Component
                            {...this.props}
                            menuAccess={menuPermissionObj}
                            masterAccess={masterAccess}
                        />
                    </Fragment>
                ) : (
                    <Redirect to="/dashboard" />
                )
            ) : (
                <Loading state={this.state} />
            );
        }
    }

    function mapStateToProps(state) {
        return { auth: state.auth };
    }
    return connect(
        mapStateToProps,
        {}
    )(UserMode);
};