From 131ef8d87ade63721263e0b0f8b17410a8cda312 Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Mon, 16 Aug 2021 07:24:29 -1000 Subject: [PATCH 1/2] Fix prop dependent withOnyx updates + add test --- lib/withOnyx.js | 18 +++++++++--------- tests/components/ViewWithText.js | 2 +- tests/unit/withOnyxTest.js | 30 ++++++++++++++++++++++++++++++ 3 files changed, 40 insertions(+), 10 deletions(-) diff --git a/lib/withOnyx.js b/lib/withOnyx.js index 834e1ad9..d0c1fb8e 100644 --- a/lib/withOnyx.js +++ b/lib/withOnyx.js @@ -87,20 +87,20 @@ export default function (mapOnyxToState) { * @param {*} val */ setInitialState(statePropertyName, val) { - if (!this.state.loading) { - console.error('withOnyx.setInitialState() called after loading: false'); - return; - } + if (this.state.loading) { + this.tempState[statePropertyName] = val; - this.tempState[statePropertyName] = val; + // All state keys should exist and at least have a value of null + if (_.some(requiredKeysForInit, key => _.isUndefined(this.tempState[key]))) { + return; + } - // All state keys should exist and at least have a value of null - if (_.some(requiredKeysForInit, key => _.isUndefined(this.tempState[key]))) { + this.setState({...this.tempState, loading: false}); + delete this.tempState; return; } - this.setState({...this.tempState, loading: false}); - delete this.tempState; + this.setState({[statePropertyName]: val}); } /** diff --git a/tests/components/ViewWithText.js b/tests/components/ViewWithText.js index 692edc74..f7c20d79 100644 --- a/tests/components/ViewWithText.js +++ b/tests/components/ViewWithText.js @@ -8,7 +8,7 @@ const propTypes = { const ViewWithText = props => ( - {props.text} + {props.text} ); diff --git a/tests/unit/withOnyxTest.js b/tests/unit/withOnyxTest.js index 509cb5ff..4f34112b 100644 --- a/tests/unit/withOnyxTest.js +++ b/tests/unit/withOnyxTest.js @@ -126,6 +126,36 @@ describe('withOnyx', () => { }); }); + it('should update if a prop dependent key changes', () => { + let rerender; + let getByTestId; + const onRender = jest.fn(); + const TestComponentWithOnyx = withOnyx({ + text: { + key: props => `${ONYX_KEYS.COLLECTION.TEST_KEY}${props.collectionID}`, + }, + })(ViewWithText); + Onyx.set(`${ONYX_KEYS.COLLECTION.TEST_KEY}1`, 'test_1'); + Onyx.set(`${ONYX_KEYS.COLLECTION.TEST_KEY}2`, 'test_2'); + return waitForPromisesToResolve() + .then(() => { + const result = render(); + rerender = result.rerender; + getByTestId = result.getByTestId; + return waitForPromisesToResolve(); + }) + .then(() => { + expect(getByTestId('text-element').props.children).toEqual('test_1'); + }) + .then(() => { + rerender(); + return waitForPromisesToResolve(); + }) + .then(() => { + expect(getByTestId('text-element').props.children).toEqual('test_2'); + }); + }); + it('should pass a prop from one connected component to another', () => { const collectionItemID = 1; const onRender = jest.fn(); From 722492b30dcacb80276cea6dadfb9a0f40ee7624 Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Tue, 17 Aug 2021 07:28:22 -1000 Subject: [PATCH 2/2] rename setInitialState --- lib/Onyx.js | 2 +- lib/withOnyx.js | 22 +++++++++++----------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/lib/Onyx.js b/lib/Onyx.js index 014e1565..82324d50 100644 --- a/lib/Onyx.js +++ b/lib/Onyx.js @@ -328,7 +328,7 @@ function keyChanged(key, data, hasNewValue = true) { */ function sendDataToConnection(config, val, key) { if (config.withOnyxInstance) { - config.withOnyxInstance.setInitialState(config.statePropertyName, val); + config.withOnyxInstance.setWithOnyxState(config.statePropertyName, val); } else if (_.isFunction(config.callback)) { config.callback(val, key); } diff --git a/lib/withOnyx.js b/lib/withOnyx.js index d0c1fb8e..123fc4ad 100644 --- a/lib/withOnyx.js +++ b/lib/withOnyx.js @@ -31,7 +31,7 @@ export default function (mapOnyxToState) { constructor(props) { super(props); - this.setInitialState = this.setInitialState.bind(this); + this.setWithOnyxState = this.setWithOnyxState.bind(this); // This stores all the Onyx connection IDs to be used when the component unmounts so everything can be // disconnected. It is a key value store with the format {[mapping.key]: connectionID}. @@ -86,21 +86,21 @@ export default function (mapOnyxToState) { * @param {String} statePropertyName * @param {*} val */ - setInitialState(statePropertyName, val) { - if (this.state.loading) { - this.tempState[statePropertyName] = val; + setWithOnyxState(statePropertyName, val) { + if (!this.state.loading) { + this.setState({[statePropertyName]: val}); + return; + } - // All state keys should exist and at least have a value of null - if (_.some(requiredKeysForInit, key => _.isUndefined(this.tempState[key]))) { - return; - } + this.tempState[statePropertyName] = val; - this.setState({...this.tempState, loading: false}); - delete this.tempState; + // All state keys should exist and at least have a value of null + if (_.some(requiredKeysForInit, key => _.isUndefined(this.tempState[key]))) { return; } - this.setState({[statePropertyName]: val}); + this.setState({...this.tempState, loading: false}); + delete this.tempState; } /**