Cfrgtkky

In the React Component that handles the Sidebar, we have the Menu Items, as modules. I want to pass a specific state from Redux, and in the case of false hide a specific item.
I did it but with passing the state as Props with componentWillRecieveProps. But I need to do it specifically with createSelector from reselect, as componentWillRecieveProps is gonna be deprecated and we are starting to using reselect more and more.

Problem is I have no idea how to do that. The reselect docs are more confusing than helping. So can you help a little?

Component:

import React, { Component } from 'react';

import PropTypes from 'prop-types';

import classNames from 'classnames';

import { createSelector } from 'reselect';



import { isRouteActive } from './location';



class ModuleNavigation extends Component {

  static propTypes = {

    modules: PropTypes.array,

    user: PropTypes.object,

    currentRoute: PropTypes.string,

    isMinimized: PropTypes.bool,

    isItAvailable: PropTypes.bool,

  }



  state = {

    isOpen: false,

  }



  constructor(props) {

    super(props);



    this.topNavRef = React.createRef();

    this.bottomNavRef = React.createRef();

    this.moduleNavRef = React.createRef();

  }



  componentDidUpdate() {

    this.updateArrows();

  }



  componentDidMount() {

    this.updateArrows();

    window.addEventListener('resize', this.updateArrows);

  }



  componentWillUnmount() {

    window.removeEventListener('resize', this.updateArrows);

  }



  onToggle = () => {

    this.setState({ isOpen: !this.state.isOpen });

  }



  getRefId = (index) => {

    if (index === 0) return this.topNavRef;

    if (this.props.modules && index === this.props.modules.length - 1) return this.bottomNavRef;



    return null;

  }



  renderGroup = (group, index, user, currentRoute, isMinimized) => (

    <ul ref={this.getRefId(index)} key={group.name} className="module-navigation-group nav">

      {

        <li className={classNames('mt-10 mb-10 module-navigation-group-separator', { hidden: index === 0 })} />

      }

      {group.children

        .filter(mod =>

          mod.route && (!mod.permissions || userHasPermission(user, mod.permissions)))

        .map(mod =>

          (<li key={mod.name} className={classNames('module-navigation-group-item', { active: isRouteActive(currentRoute, mod.route) })}>

            <a href={(mod.parentApp ? '#' : '') + mod.route} target={mod.target} title={mod.name}>

              <i className={`fa ${mod.classNames} module-navigation-group-item-icon`} />

              {!isMinimized && <span className="hidden-xs hidden-sm ml-15 module-navigation-group-item-label">{mod.name}</span>}

            </a>

          </li>))}

    </ul>

  )



  render() {

    const {

      modules,

      currentRoute,

      user,

      isItAvailable,

    } = this.props;



    if (!user || !modules || !modules.length) return null;



    return (

      <div className={classNames('module-navigation-wrapper', { 'is-minimized': isMinimized })}>

        <div ref={this.moduleNavRef} isZKAvailable={isZKAvailable} className="module-navigation">

          {

            modules.map((group, index) =>

              this.renderGroup(group, index, user, currentRoute, isMinimized))

          }

        </div>

    );

  }

}



export default ModuleNavigation;

I want to pass the boolean isItAvailable to menu-items called modules here, and check the children of modules, for a specific one. If isItAvaialable =false dont show it

Hi you need a small refactoring to your class component, so that you can wrap the component with the connect hoc and get state values and inject them as props.

In your class component you make these changes, in order to get the isAvailable as prop, e.g. this.props.isAvailable:

// import connect hoc from react-redux

import { connect } from 'react-redux'



// import your selector from e.g. selectors.js, on the top

import {getIsAvailable} from './selectors'





// bottom, out of the class create the mapStateToProps function,

// in order to get state values and inject them as props to the component

const mapStateToProps = (state) => {

  return {

    isAvailable: getIsAvailable(state),

  }

}



// you export your component wrapped with the connect hoc, like so

export default connect(mapStateToProps, null)(ModuleNavigation)

Into your selectors file, you import reselect and use CreateSelecto like so:

import { createSelector } from 'reselect'



// get the local state data.

// you are gonna change the structure based on yours

const getLocalState = state => state.data



// here with creteSelector:

// 1. call the localstate and return the data

// 2. get the data as param of an arrow func and 

// make whatever we like with the data (calcs, checks etc)

// and finally return the data we need.

export const getIsAvailable = createSelector(

  getLocalState,

  data => data.isAvailable || false

)

Thats it. i hope it helps.