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.

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

Merged
merged 2 commits into from
Mar 31, 2023
Merged

Conversation

matthew-white
Copy link
Member

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 of requestData 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(), and delete(). I wanted to move away from that pattern for a few reasons:

  • Consistency across components. There weren't that many components that used a method other than request(), and it seems simpler to have fewer ways to send requests.
  • Consistency with requestData resources. Resources only have a request() method.
  • The names get, put, and delete seem very generic: without context, they don't seem like they necessarily have to do with requests. Also, while delete 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:

  • run npm run test and npm run lint and confirmed all checks still pass OR confirm CircleCI build passes
  • verified that any code or assets from external sources are properly credited in comments or that everything is internally sourced

import { logOut } from '../../util/session';
import { noop } from '../../util/util';
import { useRequestData } from '../../request-data';

export default {
name: 'NavbarActions',
mixins: [request()],
Copy link
Member Author

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.

@matthew-white matthew-white mentioned this pull request Mar 27, 2023
Copy link
Contributor

@sadiqkhoja sadiqkhoja left a 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.

src/composables/request.js Show resolved Hide resolved
if (router != null)
watch(router.currentRoute, () => { awaitingResponse.value = false; });

return { request, awaitingResponse: readonly(awaitingResponse) };
Copy link
Contributor

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.

Copy link
Member Author

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.

Copy link
Contributor

Choose a reason for hiding this comment

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

that would work too

Copy link
Member Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants