Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Component did connect hook #306

Merged
merged 6 commits into from
Jun 7, 2015
Merged

Component did connect hook #306

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d290cb0
Added hook and test for componentDidConnect
ericwooley Jun 6, 2015
84c05c9
removed unessary argument
ericwooley Jun 6, 2015
a46b50a
added another test to make sure action was being recieved
ericwooley Jun 6, 2015
25ad1df
Switched to a static method
ericwooley Jun 6, 2015
38879fe
removed function check, only checked truthy, added props in to method…
ericwooley Jun 6, 2015
7c83e17
switch to undefined
ericwooley Jun 6, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 31 additions & 30 deletions dist/alt-with-addons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
module.exports = require('./components/AltContainer.js');

},{"./components/AltContainer.js":2}],2:[function(require,module,exports){
(function (global){
/**
* AltContainer.
*
Expand Down Expand Up @@ -63,7 +62,7 @@ module.exports = require('./components/AltContainer.js');
*/
'use strict';

var React = (typeof window !== "undefined" ? window.React : typeof global !== "undefined" ? global.React : null);
var React = (window.React);
var mixinContainer = require('./mixinContainer');
var assign = require('../utils/functions').assign;

Expand All @@ -77,7 +76,6 @@ var AltContainer = React.createClass(assign({

module.exports = AltContainer;

}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{"../utils/functions":27,"./mixinContainer":3}],3:[function(require,module,exports){
'use strict';

Expand Down Expand Up @@ -1593,11 +1591,12 @@ var StoreMixin = {
return x;
};

var makeActionHandler = function makeActionHandler(action) {
var makeActionHandler = function makeActionHandler(action, isError) {
return function (x) {
var fire = function fire() {
loadCounter -= 1;
action(intercept(x, action, args));
if (isError) throw x;
};
return typeof window === 'undefined' ? function () {
return fire();
Expand All @@ -1610,7 +1609,7 @@ var StoreMixin = {
loadCounter += 1;
/* istanbul ignore else */
if (spec.loading) spec.loading(intercept(null, spec.loading, args));
return spec.remote.apply(spec, [state].concat(args)).then(makeActionHandler(spec.success))['catch'](makeActionHandler(spec.error));
return spec.remote.apply(spec, [state].concat(args))['catch'](makeActionHandler(spec.error, 1)).then(makeActionHandler(spec.success));
} else {
// otherwise emit the change now
_this.emitChange();
Expand Down Expand Up @@ -1959,6 +1958,7 @@ var STATE_CONTAINER = (0, _esSymbol2['default'])();
exports.STATE_CONTAINER = STATE_CONTAINER;

},{"es-symbol":5}],16:[function(require,module,exports){
/* istanbul ignore next */
'use strict';

Object.defineProperty(exports, '__esModule', {
Expand All @@ -1969,7 +1969,6 @@ exports.warn = warn;
exports.uid = uid;
exports.formatAsConstant = formatAsConstant;
exports.dispatchIdentity = dispatchIdentity;
/* istanbul ignore next */
function NoopClass() {}

var builtIns = Object.getOwnPropertyNames(NoopClass);
Expand Down Expand Up @@ -2163,16 +2162,6 @@ exports['default'] = ActionListeners;
module.exports = exports['default'];

},{"es-symbol":5}],19:[function(require,module,exports){
'use strict';

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

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

/**
* AltManager(Alt: AltClass): undefined
*
Expand All @@ -2199,6 +2188,16 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
* ```
*/

'use strict';

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

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

var AltManager = (function () {
function AltManager(Alt) {
_classCallCheck(this, AltManager);
Expand Down Expand Up @@ -2494,12 +2493,12 @@ function atomic(alt) {
module.exports = exports['default'];

},{"./functions":24,"./makeFinalStore":25}],22:[function(require,module,exports){
/*global window*/
'use strict';

Object.defineProperty(exports, '__esModule', {
value: true
});
/*global window*/
exports['default'] = chromeDebug;

function chromeDebug(alt) {
Expand All @@ -2510,7 +2509,6 @@ function chromeDebug(alt) {
module.exports = exports['default'];

},{}],23:[function(require,module,exports){
(function (global){
/**
* 'Higher Order Component' that controls the props of a wrapped
* component via stores.
Expand Down Expand Up @@ -2564,7 +2562,7 @@ Object.defineProperty(exports, '__esModule', {

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var _react = (typeof window !== "undefined" ? window.React : typeof global !== "undefined" ? global.React : null);
var _react = (window.React);

var _react2 = _interopRequireDefault(_react);

Expand Down Expand Up @@ -2594,6 +2592,10 @@ function connectToStores(Component) {
stores.forEach(function (store) {
store.listen(_this.onChange);
});
var component = this.refs['connectToStores-component'];
if (typeof component.componentDidConnect === 'function') {
component.componentDidConnect();
}
},

componentWillUnmount: function componentWillUnmount() {
Expand All @@ -2610,7 +2612,9 @@ function connectToStores(Component) {
},

render: function render() {
return _react2['default'].createElement(Component, (0, _functions.assign)({}, this.props, this.state));
return _react2['default'].createElement(Component, (0, _functions.assign)({
ref: 'connectToStores-component'
}, this.props, this.state));
}
});

Expand All @@ -2620,7 +2624,6 @@ function connectToStores(Component) {
exports['default'] = connectToStores;
module.exports = exports['default'];

}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{"./functions":24}],24:[function(require,module,exports){
'use strict';

Expand Down Expand Up @@ -2655,12 +2658,6 @@ function assign(target) {
}

},{}],25:[function(require,module,exports){
"use strict";

Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = makeFinalStore;
/**
* makeFinalStore(alt: AltInstance): AltStore
*
Expand All @@ -2685,6 +2682,12 @@ exports["default"] = makeFinalStore;
* ```
*/

"use strict";

Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = makeFinalStore;
function FinalStore() {
var _this = this;

Expand All @@ -2707,7 +2710,6 @@ function makeFinalStore(alt) {
module.exports = exports["default"];

},{}],26:[function(require,module,exports){
(function (global){
'use strict';

Object.defineProperty(exports, '__esModule', {
Expand All @@ -2717,7 +2719,7 @@ exports['default'] = withAltContext;

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var _react = (typeof window !== "undefined" ? window.React : typeof global !== "undefined" ? global.React : null);
var _react = (window.React);

var _react2 = _interopRequireDefault(_react);

Expand All @@ -2741,7 +2743,6 @@ function withAltContext(flux) {

module.exports = exports['default'];

}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{}],27:[function(require,module,exports){
'use strict';

Expand Down
7 changes: 4 additions & 3 deletions dist/alt.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1004,11 +1004,12 @@ var StoreMixin = {
return x;
};

var makeActionHandler = function makeActionHandler(action) {
var makeActionHandler = function makeActionHandler(action, isError) {
return function (x) {
var fire = function fire() {
loadCounter -= 1;
action(intercept(x, action, args));
if (isError) throw x;
};
return typeof window === 'undefined' ? function () {
return fire();
Expand All @@ -1021,7 +1022,7 @@ var StoreMixin = {
loadCounter += 1;
/* istanbul ignore else */
if (spec.loading) spec.loading(intercept(null, spec.loading, args));
return spec.remote.apply(spec, [state].concat(args)).then(makeActionHandler(spec.success))['catch'](makeActionHandler(spec.error));
return spec.remote.apply(spec, [state].concat(args))['catch'](makeActionHandler(spec.error, 1)).then(makeActionHandler(spec.success));
} else {
// otherwise emit the change now
_this.emitChange();
Expand Down Expand Up @@ -1370,6 +1371,7 @@ var STATE_CONTAINER = (0, _esSymbol2['default'])();
exports.STATE_CONTAINER = STATE_CONTAINER;

},{"es-symbol":1}],11:[function(require,module,exports){
/* istanbul ignore next */
'use strict';

Object.defineProperty(exports, '__esModule', {
Expand All @@ -1380,7 +1382,6 @@ exports.warn = warn;
exports.uid = uid;
exports.formatAsConstant = formatAsConstant;
exports.dispatchIdentity = dispatchIdentity;
/* istanbul ignore next */
function NoopClass() {}

var builtIns = Object.getOwnPropertyNames(NoopClass);
Expand Down
3 changes: 3 additions & 0 deletions src/utils/connectToStores.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,9 @@ function connectToStores(Component) {
stores.forEach((store) => {
store.listen(this.onChange)
})
if (typeof Component.componentDidConnect === 'function') {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we can assume its a function

and we should pass in props and context

Component.componentDidConnect()
}
},

componentWillUnmount() {
Expand Down
54 changes: 54 additions & 0 deletions test/connect-to-stores-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,60 @@ export default {
const span = TestUtils.findRenderedDOMComponentWithTag(node, 'span')

assert(span.props.foo === 'Baz')
},

'componentDidConnect hook is called '() {
let componentDidConnect = false
class ClassComponent extends React.Component {
static getStores() {
return [testStore]
}
static getPropsFromStores(props) {
return testStore.getState()
}
static componentDidConnect() {
componentDidConnect = true
}
render() {
return <span foo={this.props.foo} />
}
}
const WrappedComponent = connectToStores(ClassComponent)
const node = TestUtils.renderIntoDocument(
<WrappedComponent />
)
assert(componentDidConnect === true)
},
'Component receives all updates'(done) {
let componentDidConnect = false
class ClassComponent extends React.Component {
static getStores() {
return [testStore]
}
static getPropsFromStores(props) {
return testStore.getState()
}
static componentDidConnect() {
testActions.updateFoo('Baz')
componentDidConnect = true
}
componentDidUpdate() {
assert(this.props.foo === 'Baz')
done()
}
render() {
return <span foo={this.props.foo} />
}
}

const WrappedComponent = connectToStores(ClassComponent)

let node = TestUtils.renderIntoDocument(
<WrappedComponent />
)

const span = TestUtils.findRenderedDOMComponentWithTag(node, 'span')
assert(componentDidConnect === true)
}
}
}