action-cable lib

refactoring.js

Object.defineProperty(exports, '__esModule', {
  value: true,
});

const React = require('react');
const PropTypes = require('prop-types');
const actioncable = require('actioncable');
const createReactClass = require('create-react-class');

const { Provider, Consumer } = React.createContext();

const ActionCableProvider = props => {
  React.useEffect(() => {
    if (props.cable) {
      cable = props.cable;
    } else {
      cable = actioncable.createConsumer(props.url);
    }
  }, [props.cable, props.url]);

  React.useEffect(() => {
    if (!props.cable && cable) {
      cable.disconnect();
    }
  }, [props.cable]);

  // componentWillReceiveProps(nextProps) {
  //   // Props not changed
  //   if (
  //     props.cable === nextProps.cable &&
  //     props.url === nextProps.url
  //   ) {
  //     return;
  //   }

  //   componentWillUnmount();

  //   // create or assign cable
  //   componentWillMount();
  // },

  return React.createElement(
    Provider,
    {
      value: {
        cable,
      },
    },
    props.children || null
  );
};

ActionCableProvider.displayName = 'ActionCableProvider';

ActionCableProvider.propTypes = {
  cable: PropTypes.object,
  url: PropTypes.string,
  children: PropTypes.any,
};

const ActionCableController = () => {
  React.useEffect(() => {
    const _props = props;
    const { onReceived } = _props;
    const { onInitialized } = _props;
    const { onConnected } = _props;
    const { onDisconnected } = _props;
    const { onRejected } = _props;

    cable = props.cable.subscriptions.create(props.channel, {
      received(data) {
        onReceived && onReceived(data);
      },
      initialized() {
        onInitialized && onInitialized();
      },
      connected() {
        onConnected && onConnected();
      },
      disconnected() {
        onDisconnected && onDisconnected();
      },
      rejected() {
        onRejected && onRejected();
      },
    });
  }, []);

  React.useEffect(() => {
    if (cable) {
      props.cable.subscriptions.remove(cable);
      cable = null;
    }
  }, []);

  function send(data) {
    if (!cable) {
      throw new Error('ActionCable component unloaded');
    }

    cable.send(data);
  }

  function perform(action, data) {
    if (!cable) {
      throw new Error('ActionCable component unloaded');
    }

    cable.perform(action, data);
  }

  return props.children || null;
};

ActionCableController.displayName = 'ActionCableController';

ActionCableController.propTypes = {
  cable: PropTypes.object,
  onReceived: PropTypes.func,
  onInitialized: PropTypes.func,
  onConnected: PropTypes.func,
  onDisconnected: PropTypes.func,
  onRejected: PropTypes.func,
  children: PropTypes.any,
};

const ActionCableConsumer = React.forwardRef(function(props, ref) {
  const Component = () => {
    return React.createElement(Consumer, null, ({ cable }) => {
      return React.createElement(
        ActionCableController,
        {
          cable,
          ...props,
          ref: props.forwardedRef,
        },
        props.children || null
      );
    });
  };

  Component.displayName = 'ActionCableConsumer';

  Component.propTypes = {
    onReceived: PropTypes.func,
    onInitialized: PropTypes.func,
    onConnected: PropTypes.func,
    onDisconnected: PropTypes.func,
    onRejected: PropTypes.func,
    children: PropTypes.any,
  };

  return React.createElement(
    Component,
    {
      ...props,
      forwardedRef: ref,
    },
    props.children || null
  );
});

const ActionCable = () => {
  React.useEffect(() => {
    console.warn(
      'DEPRECATION WARNING: The <ActionCable /> component has been deprecated and will be removed in a future release. Use <ActionCableConsumer /> instead.'
    );
  }, []);

  return React.createElement(
    ActionCableConsumer,
    { ...props },
    props.children || null
  );
};

ActionCable.displayName = 'ActionCable';

// ActionCable.defaultProps = {
//   onReceived: () => {},
//   onInitialized: () => {},
//   onConnected: () => {},
//   onDisconnected: () => {},
//   onRejected: () => {},
//   children: [],
// };

// ActionCable.propTypes = {
//   onReceived: PropTypes.func,
//   onInitialized: PropTypes.func,
//   onConnected: PropTypes.func,
//   onDisconnected: PropTypes.func,
//   onRejected: PropTypes.func,
//   children: PropTypes.any,
// };

exports.ActionCable = ActionCable;
exports.ActionCableConsumer = ActionCableConsumer;
exports.ActionCableController = ActionCableController;
exports.ActionCableProvider = ActionCableProvider;

// Compatible old usage
exports.default = ActionCableProvider;