Skip to content

chore(site): refactor groups to use react-query #9701

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

Merged
merged 9 commits into from
Sep 19, 2023
Merged

chore(site): refactor groups to use react-query #9701

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
07a4bd4
Remove groups service
BrunoQuaresma Sep 15, 2023
6b93fcc
Remove create group service
BrunoQuaresma Sep 15, 2023
7466c8b
Remove edit group service
BrunoQuaresma Sep 15, 2023
93c0f37
Remove groups service
BrunoQuaresma Sep 15, 2023
9bfb06e
Refactor queries a bit
BrunoQuaresma Sep 15, 2023
d6220a0
Merge branch 'main' of https://github.com/coder/coder into bq/refacto…
BrunoQuaresma Sep 18, 2023
ac005c1
Fix verbiage
BrunoQuaresma Sep 18, 2023
23a34d6
Merge branch 'main' of https://github.com/coder/coder into bq/refacto…
BrunoQuaresma Sep 19, 2023
0871f2d
Move removeGroupMember into GroupMemberRow component
BrunoQuaresma Sep 19, 2023
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
Prev Previous commit
Next Next commit
Remove groups service
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committed Sep 15, 2023
commit 93c0f378ce8ad72f9b61494ae3b6c3afcb5e3a2e
18 changes: 18 additions & 0 deletions site/src/api/api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -954,6 +954,24 @@ export const patchGroup = async (
return response.data;
};

export const addMember = async (groupId: string, userId: string) => {
return patchGroup(groupId, {
name: "",
display_name: "",
add_users: [userId],
remove_users: [],
});
};

export const removeMember = async (groupId: string, userId: string) => {
return patchGroup(groupId, {
name: "",
display_name: "",
add_users: [],
remove_users: [userId],
});
};

export const deleteGroup = async (groupId: string): Promise<void> => {
await axios.delete(`/api/v2/groups/${groupId}`);
};
Expand Down
57 changes: 57 additions & 0 deletions site/src/api/queries/groups.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { QueryClient } from "@tanstack/react-query";
import * as API from "api/api";
Copy link
Member

Choose a reason for hiding this comment

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

Following the conversation we had earlier, would this need to be updated to use named imports, or do we just generally do the wildcard import for the API?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This is a good question, I like this way because it avoids conflicts but I don't think we set a preference. What do you think @aslilac ?

Copy link
Member

Choose a reason for hiding this comment

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

yeah, this is what I've been doing to. it's fine. 🤷‍♀️

import { checkAuthorization } from "api/api";
import {
CreateGroupRequest,
Group,
Expand All @@ -20,6 +21,24 @@ export const group = (groupId: string) => {
};
};

export const groupPermissions = (groupId: string) => {
return {
queryKey: ["group", groupId, "permissions"],
queryFn: () =>
checkAuthorization({
checks: {
canUpdateGroup: {
object: {
resource_type: "group",
resource_id: groupId,
},
action: "update",
},
},
}),
};
};

export const createGroup = (queryClient: QueryClient) => {
return {
mutationFn: ({
Expand Down Expand Up @@ -48,3 +67,41 @@ export const patchGroup = (queryClient: QueryClient) => {
},
};
};

export const deleteGroup = (queryClient: QueryClient) => {
return {
mutationFn: API.deleteGroup,
onSuccess: async (_: void, groupId: string) => {
await Promise.all([
queryClient.invalidateQueries(["groups"]),
queryClient.invalidateQueries(["group", groupId]),
]);
},
};
};

export const addMember = (queryClient: QueryClient) => {
return {
mutationFn: ({ groupId, userId }: { groupId: string; userId: string }) =>
API.addMember(groupId, userId),
onSuccess: async (updatedGroup: Group) => {
await Promise.all([
queryClient.invalidateQueries(["groups"]),
queryClient.invalidateQueries(["group", updatedGroup.id]),
]);
},
};
};

export const removeMember = (queryClient: QueryClient) => {
return {
mutationFn: ({ groupId, userId }: { groupId: string; userId: string }) =>
API.removeMember(groupId, userId),
onSuccess: async (updatedGroup: Group) => {
await Promise.all([
queryClient.invalidateQueries(["groups"]),
queryClient.invalidateQueries(["group", updatedGroup.id]),
]);
},
};
};
Loading