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 all commits
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
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 @@ -969,6 +969,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
101 changes: 101 additions & 0 deletions site/src/api/queries/groups.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
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,
PatchGroupRequest,
} from "api/typesGenerated";

const GROUPS_QUERY_KEY = ["groups"];

const getGroupQueryKey = (groupId: string) => ["group", groupId];

export const groups = (organizationId: string) => {
return {
queryKey: GROUPS_QUERY_KEY,
queryFn: () => API.getGroups(organizationId),
};
};

export const group = (groupId: string) => {
Copy link
Member

@Parkreiner Parkreiner Sep 15, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

I can't remember if anyone discussed this, but is there a naming convention that we're going to follow for these React Query utility functions?

I guess my concern here is that group can be a verb or a noun, so it isn't immediately clear whether it does grouping, or if it creates a config object relevant to groups

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Hm...... this is a good one, I don't have an answer for that. What do you think @Parkreiner @aslilac ?

Copy link
Member

Choose a reason for hiding this comment

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

Maybe something like configureGroupQuery and configureGroupMutation? That way, it'd be clear from the first word that you would be getting a config object back

Copy link
Member

Choose a reason for hiding this comment

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

eh, I think the fact that they're coming from the queries module is clear enough. I like the short names that focus end result we've been using.

return {
queryKey: getGroupQueryKey(groupId),
queryFn: () => API.getGroup(groupId),
};
};

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

export const createGroup = (queryClient: QueryClient) => {
return {
mutationFn: ({
organizationId,
...request
}: CreateGroupRequest & { organizationId: string }) =>
API.createGroup(organizationId, request),
onSuccess: async () => {
await queryClient.invalidateQueries(GROUPS_QUERY_KEY);
},
};
};

export const patchGroup = (queryClient: QueryClient) => {
return {
mutationFn: ({
groupId,
...request
}: PatchGroupRequest & { groupId: string }) =>
API.patchGroup(groupId, request),
onSuccess: async (updatedGroup: Group) =>
invalidateGroup(queryClient, updatedGroup.id),
};
};

export const deleteGroup = (queryClient: QueryClient) => {
return {
mutationFn: API.deleteGroup,
onSuccess: async (_: void, groupId: string) =>
invalidateGroup(queryClient, groupId),
};
};

export const addMember = (queryClient: QueryClient) => {
return {
mutationFn: ({ groupId, userId }: { groupId: string; userId: string }) =>
API.addMember(groupId, userId),
onSuccess: async (updatedGroup: Group) =>
invalidateGroup(queryClient, updatedGroup.id),
};
};

export const removeMember = (queryClient: QueryClient) => {
return {
mutationFn: ({ groupId, userId }: { groupId: string; userId: string }) =>
API.removeMember(groupId, userId),
onSuccess: async (updatedGroup: Group) =>
invalidateGroup(queryClient, updatedGroup.id),
};
};

export const invalidateGroup = (queryClient: QueryClient, groupId: string) =>
Promise.all([
queryClient.invalidateQueries(GROUPS_QUERY_KEY),
queryClient.invalidateQueries(getGroupQueryKey(groupId)),
]);
30 changes: 11 additions & 19 deletions site/src/pages/GroupsPage/CreateGroupPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,33 @@
import { useMachine } from "@xstate/react";
import { useOrganizationId } from "hooks/useOrganizationId";
import { FC } from "react";
import { Helmet } from "react-helmet-async";
import { useNavigate } from "react-router-dom";
import { pageTitle } from "utils/page";
import { createGroupMachine } from "xServices/groups/createGroupXService";
import CreateGroupPageView from "./CreateGroupPageView";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { createGroup } from "api/queries/groups";

export const CreateGroupPage: FC = () => {
const queryClient = useQueryClient();
const navigate = useNavigate();
const organizationId = useOrganizationId();
const [createState, sendCreateEvent] = useMachine(createGroupMachine, {
context: {
organizationId,
},
actions: {
onCreate: (_, { data }) => {
navigate(`/groups/${data.id}`);
},
},
});
const { error } = createState.context;
const createGroupMutation = useMutation(createGroup(queryClient));

return (
<>
<Helmet>
<title>{pageTitle("Create Group")}</title>
</Helmet>
<CreateGroupPageView
onSubmit={(data) => {
sendCreateEvent({
type: "CREATE",
data,
onSubmit={async (data) => {
const newGroup = await createGroupMutation.mutateAsync({
organizationId,
...data,
});
navigate(`/groups/${newGroup.id}`);
}}
formErrors={error}
isLoading={createState.matches("creatingGroup")}
formErrors={createGroupMutation.error}
isLoading={createGroupMutation.isLoading}
/>
</>
);
Expand Down
Loading