fliri.js

import React, {Component, Fragment} from 'react';
import { Modal, ModalBody, ModalHeader, ModalFooter, Button } from 'reactstrap';
/* eslint react/jsx-filename-extension: 0 */

const ErrorModal = ({error}) => (
  <Modal isOpen={showError} toggle={toggleError}>
    <ModalHeader toggle={toggleError}>Felicitaciones</ModalHeader>
    <ModalBody>
      <div className="col-md-6 offset-md-3">
        {error}
      </div>
    </ModalBody>
    <ModalFooter>
      <Button color="primary" onClick={() => toggleError()}>OK</Button>
    </ModalFooter>
  </Modal>
);

const DoneModal = ({message}) => (
  <Modal isOpen={showDone} toggle={toggleDone}>
    <ModalHeader toggle={toggleDone}>Felicitaciones</ModalHeader>
    <ModalBody>
      <div className="col-md-6 offset-md-3">
        {message}
      </div>
    </ModalBody>
    <ModalFooter>
      <Button color="primary" onClick={() => toggleDone()}>OK</Button>
    </ModalFooter>
  </Modal>
);

const defaultState = {
  doneMessage: undefined,
  error: undefined,
};

const withModal = Component => {
  class WithModal extends Component {
    this.state = defaultState;

    showModals(doneMessage, error) {
      this.setState({doneMessage, error});
    }

    hideModals() {
      this.setState(defaultState);
    }

    render() {
      const {doneMessage, error} = this.state;

      return (
        <Fragment>
          <Component {...this.props} showModals={this.showModals} hideModals={this.hideModals} />
          {doneMessage && <DoneModal message={doneMessage} />}
          {error && <ErrorModal error={error} />}
        </Fragment>
      )
    }
  }
  
  WithModal.displayName = `WithModal(${Component.displayName || Component.name}`;
                                    
  return WithModal;
}