-
Notifications
You must be signed in to change notification settings - Fork 49
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.
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
Order Client Loading States #256
Conversation
Nice work @dalyathan, thanks |
} else { | ||
if (wasSetToTrue) { | ||
wasFinallySetToFalse = true; | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
These else statements could be simplified into:
} else { | |
if (wasSetToTrue) { | |
wasFinallySetToFalse = true; | |
} | |
} | |
} else if (wasSetToTrue) { | |
wasFinallySetToFalse = true; | |
} |
BUT, another option would be to not use listenKeys
at all:
expect(client.$activeOrder.value?.loading).toBe(false);
const promise = client.removeOrderLine('T_1');
expect(client.$activeOrder.value?.loading).toBe(true);
await promise;
expect(client.$activeOrder.value?.loading).toBe(false);
It does require a bit of work to refactor, but I do find the code a bit more followable. I leave it up to you, both approaches are ok, but if you choose the listenKeys
options we need to simplify the if/else statement like above.
I do like the custom expect
messages, I was actually looking for something like this the other day, didnt know this worked 👐
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Which is an even better approach. Updating PR now
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Some changes required!
packages/vendure-order-client/test/vendure-order-client.spec.ts
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@dalyathan Nice, good idea with the helper function, nice and readable now!
Description
This PR aims to implement global loading and error states for the active order store and the current user store.
Vue example:
addItemToOrder
,applyCouponCode
, etc), you can use the decorator@HandleLoadingState('$activeOrder')
to handle loading and error states for$activeorder
login
), you can use@HandleLoadingState('$currentUser')
so that it handles loading and error states for$currentUser
@HandleLoadingState('$currentUser')
or@HandleLoadingState('$activeOrder')
setResult(this.$activeOrder, activeOrder);
orsetResult(this.$currentUser, currentUser);
to store the result (or ErrorResult) in the store.getActiveOrder()
as example, that should already be correctly implemented (untested)this.throwIfErrorResult(activeOrder as ActiveOrder<A>);
to return either anActiveOrder
or throw if an ErrorResult was returned.validateCurrentUser
andvalidateOrder
can be replaced withthrowIfErrorResult
@nanostores/vue
needs to be installed, so that we can test if loading and result states are correctly set. I guess we can useconst { data, loading, error } = useStore(orderClient.$activeOrder);
in our tests.getActiveOrder()
)loading
anddata
result thoughBreaking changes
Checklist
📌 Always:
⚡ Most of the time:
📦 For publishable packages:
package.json
to the next patch/minor/major?