-
Notifications
You must be signed in to change notification settings - Fork 62
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
Replace request mixin with useRequest() composable #763
Conversation
import { logOut } from '../../util/session'; | ||
import { noop } from '../../util/util'; | ||
import { useRequestData } from '../../request-data'; | ||
|
||
export default { | ||
name: 'NavbarActions', | ||
mixins: [request()], |
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.
This component didn't actually use the mixin, so I just removed it. I think what happened here is that the component used to use the mixin when it was the one to send the logout request. At some point, that request was moved to the logOut()
function, which this component calls, but the mixin wasn't removed at the same time.
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.
I have added a couple of comments, which are reflection of my preference and not necessary to be incorporated.
if (router != null) | ||
watch(router.currentRoute, () => { awaitingResponse.value = false; }); | ||
|
||
return { request, awaitingResponse: readonly(awaitingResponse) }; |
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.
Not super important but I like http helper functions get
, post
, 'put`, etc. One thing that we can do is to return an object like:
{
send: _request(container, awaitingResponse),
post: _request(container, awaitingResponse, 'POST'), // _request should take optional argument for HTTP method
get: _request(container, awaitingResponse, 'GET'),
...
}
and then in components we would call this.request.send
or this.request.post
, that way we would have context of get
, post
and also having delete
would be possible as well.
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.
What do you think about the idea of adding these as properties on the request()
function? That's what axios does: axios
is a function with additional properties. That way, you can just call request()
if you want, but you could also call this.request.post()
, etc.
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.
that would work too
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.
This ended up being involved enough that I made a separate PR for it: #765.
This PR makes progress on #676, replacing the
request
mixin with a composable.What has been done to verify that this works as intended?
Existing tests continue to pass.
Why is this the best possible solution? Were any other approaches considered?
At some point, I'd like to make a few changes to the composable to make it more similar to the
request()
method ofrequestData
resources. I'm planning to do that as part of #675, and I may make some of those changes in .3 in a follow-up PR. However, since this PR touches so many files, I avoided making functional changes to the composable and mostly just tried to complete the conversion from mixin to composable.I've updated the comments above the composable. Those comments now mention
requestData
and mention that the composable is allowed to send GET requests (not that that should be common). However, there is other documentation that I need to update, particularly the contribution guide. I'll do that as part of #674.One change that I did make is that the composable now returns a single function,
request()
. In contrast, the mixin defined a number of other methods:post()
,put()
,patch()
, anddelete()
. I wanted to move away from that pattern for a few reasons:request()
, and it seems simpler to have fewer ways to send requests.requestData
resources. Resources only have arequest()
method.get
,put
, anddelete
seem very generic: without context, they don't seem like they necessarily have to do with requests. Also, whiledelete
was a valid method (property) name, it's not a valid name for a variable, so it doesn't work as well with the Composition API.Before submitting this PR, please make sure you have:
npm run test
andnpm run lint
and confirmed all checks still pass OR confirm CircleCI build passes