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

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.

Answer

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;
  }

Leave a Reply

Your email address will not be published. Required fields are marked *