Trying to make a conditional state based on api data using redux

Question

I am trying to figure out the best way to setup a conditional modal pop up based on weather the response from an api call is null or not. I am most familiar with functional components but here I am working with a component that was built as a class component. I am wondering if I can use the redux store to set up the state or whats the best way to show my UnsignedNoteModal if there is data returned from the api call this is the parent component where I need to settup the conditional statement:

const mapStateToProps = (state, ownProps) => {
  return {
    permissions: state.common.permissions,
    currentUser: state.common.currentUser,
    assignedFaxCount: (
      get(state.componentData, `${ASSIGNED_FAX_LIST}.data.items`) || []
    ).filter((i) => !i.complete).length,
    unassignedFaxCount: (
      get(state.componentData, `${UNASSIGNED_FAX_LIST}.data.items`) || []
    ).filter((i) => !i.assigned).length,
  };
};

const mapDispatchToProps = (dispatch) => ({});

class ProviderDashboard extends Component {
  constructor(props) {
    super(props);
    this.state = { unsignedNote: true };
    this.toggle = () => this.setState({ unsignedNote: false });
  }

  unassignedFaxList() {
    return (
      <DashboardFaxList
        title="Faxes to forward"
        getItems={api.Faxes.unassignedFaxes}
        currentUser={this.props.currentUser}
        listName={UNASSIGNED_FAX_LIST}
        viewMode={FAX_VIEW_MODE_ASSIGN}
        count={this.props.unassignedFaxCount}
      />
    );
  }

  assignedFaxList() {
    return (
      <DashboardFaxList
        title="Faxes to address"
        getItems={api.Faxes.assignedFaxes}
        currentUser={this.props.currentUser}
        listName={ASSIGNED_FAX_LIST}
        viewMode={FAX_VIEW_MODE_COMPLETE}
        count={this.props.assignedFaxCount}
      />
    );
  }

  render() {
    const canManage = hasPermission(this.props.permissions, PERMISSION_MANAGE);
    const canSeePatients = hasPermission(
      this.props.permissions,
      PERMISSION_SEE_PATIENTS
    );

    return (
      <div>
        {this.state.unsignedNote && (
          <UnsignedNoteModal
            onSubmit={this.toggle}
            getList={api.Encounters.unsignedEncounters((e) => e)}
            
          />
        )}
        <NavBar />
        <div className="dashboard-container">
          <h4>
            {" "}
            <div className="header-icon float-left">
              <DashboardIcon />
            </div>{" "}
            Dashboard{" "}
          </h4>
          <Row>
            <Col md={{ size: 8 }}></Col>
            <Col md={{ size: 4 }}>
              {canSeePatients && <PrescriptionErrors />}
              {canManage && this.unassignedFaxList()}
              {(canSeePatients || canManage) && this.assignedFaxList()}
            </Col>
          </Row>
        </div>
      </div>
    );
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ProviderDashboard);

Right now I have the state in this component settup to display the modal I've been building but I need to alter it to only show if the api call I am sending in the UnsignedNoteModal returns something besides null. Im not sure whats the best route for handling this and any insight into where to begin or how to approach this problem would be awesome.

Use "getDerivedStateFromProps" to update "this.state.unsignedNote" from props you receive from API. reactjs.org/docs/… — Paveloosha
– Paveloosha, Commented Oct 6, 2020 at 17:07

Paveloosha · Accepted Answer · 2020-10-06 18:06:47Z

1

You can update your state from props using "getDerivedStateFromProps". You need to set "unsignedNote" as "false/true" in "mapStateToProps" depending on your API data.

static getDerivedStateFromProps(nextProps, prevState) {
    const {
      unsignedNote = false, // Default value is false
    } = nextProps;
    const {
      unsignedNote: unsignedNoteInState = false, //Default value is false
    } = prevState;

    if(unsignedNote & unsignedNote !== unsignedNoteInState) {
      return {
        ...prevState,
        unsignedNote,
      }
    }
    return prevState;
  }

answered Oct 6, 2020 at 18:06

Paveloosha

6532 gold badges7 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CourtneyJ Over a year ago

Thanks for your response! I understand why youd say to update your state from props using "getDerivedStateFromProps". I am trying to figure out how exactly to set up unsigned note as true/false in my mapStateToProps function. Should I be making the api call in the mapStateToProps function? Like unsignedNote: if(api.Encounters.unsignedEncounters === null){ unsignedNote === false}...etc ?

Paveloosha Over a year ago

@CourtneyJ, so flow will be like this, 1. You call an action to make API call, 2. Action updates Redux store using Reducers with response from API (May be with data or no data), 3. You will get that data in "state" as parameter of "mapStateToProps". 4. Write logic like unsignedNote: unsignedEncounters ? false : true,. (You can write logic base on length of unsignedEncounters if it's an array of checking if it's empty incase of object).

Collectives™ on Stack Overflow

Trying to make a conditional state based on api data using redux

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related