Design For Loading Components

Question

I am struggling with the design of a React application which I am building. The app has a chat window on the left and the content of the application on the right. When a user enters a command, the backend understands the nature of the command (uses Luis.ai and Microsoft Bot Framework) which all works as expected. However the React piece is where I'm struggling.

Say the user enters a command which states they want to update a person by entering "Update name to Bill". The application correctly understands that the command is update the person and should load the edit version of my person overview.

However I'm not sure exactly the best approach on how to do this. The approach I'm taking now basically loads an OverviewWrapper component. Inside of the Overview wrapper component based on the props passed to it should load either the Edit or the View pane. The View pane is loaded by default.

I guess I'm not sure if I should be trying to load the edit component by changing the state or if I should be trying to use the navigate function. Thank you in advance for your guidance.

Here is my code.

export default class Patient extends React.Component {
 constructor(props) {
 super(props);
 autoBind(this);

 this.directLine = new DirectLine({
  secret: "SOMEVALUEHERE"
 });

 this.state = {
  PATIENT: [],
  COMPPROPS: [],
 };

 this.setPanelState = this.setPanelState.bind(this);
}

 //Set State of COMPPROPS so that compState should be edit
setPanelState(activity) {
      var _compState = 'Edit';
      var _compName = 'Overview';
      this.setState({COMPPROPS: [{compName: 'Overview', compState: _compState}]});
      return _compState;
}

componentWillMount() {   

getPatient().then((result) => {
    this.setState({PATIENT: result});
});

//review any chat activity and if the command is update patient then run setpanelstate method which should set the state
this.directLine.activity$
    .filter(function (activity) {
      return activity.type === 'event' && activity.value === 'Update Patient';
    })
    .subscribe((activity) => {
      console.log("Im editing the overview");
     var _compState2
     _compState2 = this.setPanelState(activity);
     console.log('CompStateVar:'+_compState2)
    })
}

render() {
const OverviewWrapper = this.state.COMPPROPS.compState === 0 ? OverviewEditPane: OverviewPane
return (
...
                      <Box colorIndex='light-2'  direction='row' flex={false}>
                               <div>
                                <OverviewWrapper overview={this.state.PATIENT} ovtype={this.state.COMPPROPS} />
                              </div>
                      </Box>

Answer 1

I resolved this by keeping the existing design by only setting one value compState in the SetState value rather then trying to set both compName and compState. Once I did that everything seemed to work fine.