refactor(widget-chat): Simplify spark injection and add basic test

packages/plugin-phone/README.md

@@ -167,18 +167,6 @@ Payload for [Call#sendFeedback](#callsendfeedback)
     to avoid including PII in these logs, but if you've taken advantage of the
     SDK's logger, you should make sure to avoid logging PII as well.
 
-# mediaDirection
-
-Indicates the direction of the specified media type for the specified
-participant
-
-**Parameters**
-
--   `mediaType` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** 
--   `participant` **Types~LocusParticipant** 
-
-Returns **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** One of `sendonly`, `recvonly`, `sendrecv`, or `inactive`
-
 # Phone
 
 **Extends SparkPlugin**
@@ -248,3 +236,15 @@ address or sip uri.
         new one will be created based on options.constraints
 
 Returns **[Call](#call)** 
+
+# mediaDirection
+
+Indicates the direction of the specified media type for the specified
+participant
+
+**Parameters**
+
+-   `mediaType` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** 
+-   `participant` **Types~LocusParticipant** 
+
+Returns **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** One of `sendonly`, `recvonly`, `sendrecv`, or `inactive`

packages/widget-chat/src/actions/user.js

@@ -22,7 +22,7 @@ export function receiveUser(userId, user) {
 export function fetchUser(userId) {
   return (dispatch) => {
     dispatch(requestUser(userId));
-    return spark.user.asUUID({email: userId})
+    spark.user.asUUID({email: userId})
       .then((response) => response.json())
       .then((user) => dispatch(receiveUser(userId, user)));
   };

packages/widget-chat/src/containers/chat-widget/index.js

@@ -1,17 +1,26 @@
 import React, {Component, PropTypes} from 'react';
 import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
 import classNames from 'classnames';
 
 import ConnectionStatus from '../../components/connection-status';
 import ActivityTitle from '../../components/activity-title';
+import {fetchUser} from '../../actions/user';
 import styles from './styles.css';
 
 import injectSpark from '../../modules/redux-spark/inject-spark';
 
 /**
  * ChatWidget Component
  */
-class ChatWidget extends Component {
+export class ChatWidget extends Component {
+
+  componentDidMount() {
+    const props = this.props;
+    if (!props.user) {
+      fetchUser(props.userId);
+    }
+  }
 
   shouldComponentUpdate() {
     return false;
@@ -35,32 +44,14 @@ class ChatWidget extends Component {
 }
 
 ChatWidget.propTypes = {
-  dispatch: PropTypes.func.isRequired,
-  isFetching: PropTypes.bool.isRequired,
+  fetchUser: PropTypes.func.isRequired,
   spark: React.PropTypes.object.isRequired,
-  user: PropTypes.object.isRequired,
   userId: PropTypes.string.isRequired
 };
 
-function mapStateToProps(state, ownProps) {
-  const {user} = state;
-  const {
-    isFetching,
-    item
-  } = user || {
-    isFetching: true,
-    item: []
-  };
-
-  return Object.assign({}, state.spark, {
-    user,
-    isFetching,
-    item,
-    userId: ownProps.userId,
-    spark: ownProps.spark
-  });
-}
-
 export default connect(
-  mapStateToProps
+  (state) => state.spark,
+  (dispatch) => bindActionCreators({
+    fetchUser
+  }, dispatch)
 )(injectSpark(ChatWidget));

packages/widget-chat/src/containers/chat-widget/index.test.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import ChatWidget from '.';
+import {ChatWidget} from '.';
 import {findRenderedDOMComponentWithTag, renderIntoDocument} from 'react-addons-test-utils';
 
 it(`is rendered properly`, () => {
   const widget = renderIntoDocument(
-    <ChatWidget heading="Chat Widget!" />
+    <ChatWidget userId="Chat Widget!" />
   );
 
   const widgetNode = findRenderedDOMComponentWithTag(widget, `h2`);

packages/widget-chat/src/modules/redux-spark/inject-spark.js

@@ -3,20 +3,38 @@ import spark from './spark';
 
 import SparkComponent from './component.js';
 
-export default function injectSpark(WrappedComponent) {
+function getDisplayName(C) {
+  return C.displayName || C.name || `C`;
+}
+
+export default function injectSpark(WrappedComponent, options = {}) {
+  const {
+    withRef = false
+  } = options;
 
   class InjectSpark extends Component {
+    getWrappedInstance() {
+      // TODO find a way to do this that doesn't require a deprecated API
+      // eslint-disable-next-line react/no-string-refs
+      return this.refs.wrappedInstance;
+    }
+
     render() {
       return (
         <div>
           <SparkComponent spark={spark} />
           <WrappedComponent
             {...this.props}
+            ref={withRef ? `wrappedInstance` : null}
             spark={spark}
           />
         </div>
       );
     }
   }
+
+  InjectSpark.displayName = `InjectSpark(${getDisplayName(WrappedComponent)})`;
+  InjectSpark.WrappedComponent = WrappedComponent;
+
   return InjectSpark;
 }

packages/widget-chat/src/modules/redux-spark/spark.test.js

@@ -0,0 +1,5 @@
+import spark from './spark';
+
+it(`is authenticated`, () => {
+  expect(spark.isAuthenticated).toBe(true);
+});