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

Do not always clear Onyx VBA data when accessing workspace sections #5771

Merged
merged 5 commits into from
Oct 13, 2021
Merged

Do not always clear Onyx VBA data when accessing workspace sections #5771

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
aca6c23
Do not always clear Onyx VBA data when accessing workspace sections
Gonals Oct 12, 2021
07001fa
Simplify solution
Gonals Oct 12, 2021
48345e7
remove extra line
Gonals Oct 12, 2021
fee575e
Keep state in onyx
Gonals Oct 13, 2021
ab5acf4
Pass state instead
Gonals Oct 13, 2021
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
19 changes: 16 additions & 3 deletions src/libs/actions/BankAccounts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -335,14 +335,20 @@ function fetchUserWallet() {
* Fetch the bank account currently being set up by the user for the free plan if it exists.
*
* @param {String} [stepToOpen]
* @param {Boolean} [hasLocalOpenAccount]
*/
function fetchFreePlanVerifiedBankAccount(stepToOpen) {
function fetchFreePlanVerifiedBankAccount(stepToOpen, hasLocalOpenAccount = false) {
// Remember which account BankAccountStep subStep the user had before so we can set it later
const subStep = lodashGet(reimbursementAccountInSetup, 'subStep', '');

// We are using set here since we will rely on data from the server (not local data) to populate the VBA flow
// and determine which step to navigate to.
Onyx.set(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {loading: true, error: ''});
// and determine which step to navigate to, unless there is an already open local account, in which case we'll only.
// override the data in ONYX if there isn't one on the server side.
if (hasLocalOpenAccount) {
Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {loading: true, error: ''});
} else {
Onyx.set(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {loading: true, error: ''});
}
let bankAccountID;

API.Get({
Expand Down Expand Up @@ -383,6 +389,13 @@ function fetchFreePlanVerifiedBankAccount(stepToOpen) {
// If the user is already setting up a bank account we will continue the flow for them
let currentStep = reimbursementAccountInSetup.currentStep;
const achData = bankAccount ? bankAccount.toACHData() : {};

// If we passed the flag indicating there was an already open account in local data, and there isn't
// one on the server side, let's make sure we use just the server-side data.
if (hasLocalOpenAccount && lodashGet(achData, 'state', '') !== BankAccount.STATE.OPEN) {
Onyx.set(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {loading: false, error: ''});
reimbursementAccountInSetup = {};
Copy link
Contributor Author

Choose a reason for hiding this comment

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

When we do Onyx.set(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {loading: false, error: ''}); on line 348, it happens before reimbursementAccountInSetup is set, so it never gets populated. In this case, we need to clear it manually.

Copy link
Contributor

Choose a reason for hiding this comment

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

I think my first question is.... why are we using Onyx.set() here and above instead of Onyx.merge()? If there is no reason for it, then I think we should just use merge() in both places and then I don't think you need any of the changes to the signature of fetchFreePlanVerifiedBankAccount()

Copy link
Contributor

Choose a reason for hiding this comment

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

I think we should just use merge() in both places

Correction: I mean, I think we can just use merge() above, and that's the only change this PR needs to make.

Copy link
Contributor Author

@Gonals Gonals Oct 12, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

If we use merge and the bank account has been deleted on the server side (but still remains in Onyx), it will remain in Oxyx instead of getting cleared out. Handling this situation was the annoying part of the issue 😬

Copy link
Contributor

Choose a reason for hiding this comment

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

How often would we expect that case to actually happen? Is that really a valid flow?

Copy link
Contributor Author

@Gonals Gonals Oct 12, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

I don't expect it to happen often at all. It can easily happen by deleting the bank account from oldDot, though.
Even not counting that flow, though I am not sure about using merge all the time. This function is used in bank account setup and I worry using merge in that flow will cause unwanted behavior (after all, the comments do mention we are using set specifically and consciously.

If we don't worry about the deleted bank account situation, though, we could get rid of this part and just have the set/merge split at the top.

Copy link
Contributor

Choose a reason for hiding this comment

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

Yeah, I saw the comment for the original set:

We are using set here since we will rely on data from the server (not local data) to populate the VBA flow

I don't know that this is really the desired behavior. This is making the app the opposite of offline-first. I think we should be fine rendering whatever is in Onyx, and then load new data on top of whatever is already there. Thinking about the setup flow, if the UI was showing what was in Onyx already, then why wouldn't it be OK to keep showing it when you're offline? I would try merge() and just verify it doesn't change anything about the VBA flow.

Regarding the delete account flow, I spoke with you 1:1 to make sure I had the full context around that and I don't think it is a flow we should worry about right now because it's a very edge case. The proper solution for handling the bank account deletion is to implement a pusher event just like we do when a new action is added to a report.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yep. I have been doing some testing on the VBA flow with merge and I haven't noticed any issues/differences. Let's move ahead with it, then!

}
if (!stepToOpen && achData.currentStep) {
// eslint-disable-next-line no-use-before-define
currentStep = getNextStepToComplete(achData);
Expand Down
4 changes: 3 additions & 1 deletion src/pages/workspace/WorkspacePageWithSections.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,9 @@ const defaultProps = {

class WorkspacePageWithSections extends React.Component {
componentDidMount() {
fetchFreePlanVerifiedBankAccount();
const achState = lodashGet(this.props.reimbursementAccount, 'achData.state', '');
const hasVBA = achState === BankAccount.STATE.OPEN;
fetchFreePlanVerifiedBankAccount('', hasVBA);
}

render() {
Expand Down