React Higher Order Inverse Component

BaseComponent.jsx

export default (VideoComponent) => {

  return class extends VideoComponent {
    constructor(props) {
      super(props);
      this.displayConnectInstruction = this.displayConnectInstruction.bind(this);
      this.handleCloseModal = this.handleCloseModal.bind(this);
    }

    displayConnectInstruction() {
      const { inProgress, isConnected, pluginInstallRequired } = this.props;
      if (inProgress || pluginInstallRequired ) return <div />;

      return(
        <div className={s.connectInstruction}>
          <p className={s.earlyMessage}>
            You might be a little early, but that's ok. Just hit Start and wait for the other side to do the same.
          </p>
          <button onClick={this.connect} disabled={isConnected} className={`${s.btnGreen} ${s.connectBtn}`}>
            Start Appointment
          </button>
        </div>
      );
    }

    statusMessage() {
      if (this.props.isError) {
        return (
          <div>
            <span>Unable to connect</span>
            <span>Please check your internet bandwidth and refresh the page</span>
          </div>
        );
      } else {
        return (
          <div>
            <span>Connected!</span>
            <span>Waiting for the other party to join...</span>
          </div>
        );
      }
    }

    statusIcon() {
      return this.props.isError 
        ? ( <i className="glyphicon glyphicon-exclamation-sign"></i> ) 
        : (<i className={`glyphicon glyphicon-refresh ${s.spinning}`}></i>);
    }

    appointmentVideoStatus() {
      const { isConnecting, isConnected } = this.props;
      if (!isConnecting) return null;

      return (
        <div className={s.appointmentVideoStatus}>
          {this.statusIcon()}
          <div>{ isConnected ? this.statusMessage() : 'Connecting....'}</div>
        </div>
      );
    }
    
    renderDeviceSettings() {
      let { isDeviceSettingsShown } = this.props;
        
      if(isDeviceSettingsShown)  {
        return (
          <DeviceSettingsBoxContainer />
        )
      };
    }

    displayPluginInstruction() {
      const { pluginInstallRequired, downloadUrl } = this.props;
  
      if (pluginInstallRequired) {
        return (
          <div className={s.installRequired}>
            <p>Before you can get started, you need to install a small plugin. Click below to download it.</p>
            <a href={downloadUrl} className={`${s.btnInfo} ${s.installButton}`}>
              Download Video Chat Plug-in
            </a>
          </div>
        );
      }
    }
    
    handleCloseModal() {
      this.props.hideWarningModal();
    }

    renderWarningModal() {
      const { requireUserConsent } = this.props;
      const modalTitle = "Permission required";
      const warningMessage = "The video plug-in is installed but needs your permission to run."
        + "Try looking in your addressbar and see if you can find a permissions dialog";

      if (requireUserConsent) {
        return (
          <WarningModal
            show={requireUserConsent}
            onHide={this.handleCloseModal}
            warningMessage={warningMessage}
            headerTitle={modalTitle}
            title={'OK'}
          />
        );
      }
    }

    renderRemoteVideo() {
      const { isConnected } = this.props;
      if(!isConnected) return null;
      return (
        <div id="remoteVideoPreview"></div>
      );
    }

    render() {
      return (
        <div className={classNames(s.videoPanel, { hidden: this.props.hidden }) }>
          {this.renderWarningModal()}
          {this.renderDeviceSettings()}
          <div className={s.renderingWrapper}>
            {this.renderRemoteVideo()}
            {this.displayConnectInstruction()}
            {this.displayPluginInstruction()}
            {this.appointmentVideoStatus()}
          </div>
        </div>
      );
    }
  };
}

ChildComponent.jsx

import VideoComponent from 'BaseComponent.jsx';
class AddLiveVideo extends Component {
  constructor(props) {
    super(props);
    this.connect = this.connect.bind(this);
  }

  componentDidMount() {
    this.props.initializeAddLive();
  }

  connect() {
    this.props.connectToAddLive();
  }
}

export default withStyles(VideoChatBase(AddLiveVideo), s);