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 edit group service
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committed Sep 15, 2023
commit 7466c8b7b841be7e984858e6f5d9121ca23cd071
29 changes: 28 additions & 1 deletion site/src/api/queries/groups.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
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 { CreateGroupRequest } from "api/typesGenerated";
import {
CreateGroupRequest,
Group,
PatchGroupRequest,
} from "api/typesGenerated";

export const groups = (organizationId: string) => {
return {
Expand All @@ -9,6 +13,13 @@ export const groups = (organizationId: string) => {
};
};

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: ["group", groupId],
queryFn: () => API.getGroup(groupId),
};
};

export const createGroup = (queryClient: QueryClient) => {
return {
mutationFn: ({
Expand All @@ -21,3 +32,19 @@ export const createGroup = (queryClient: QueryClient) => {
},
};
};

export const patchGroup = (queryClient: QueryClient) => {
return {
mutationFn: ({
groupId,
...request
}: PatchGroupRequest & { groupId: string }) =>
API.patchGroup(groupId, request),
onSuccess: async (updatedGroup: Group) => {
await Promise.all([
queryClient.invalidateQueries(["groups"]),
queryClient.invalidateQueries(["group", updatedGroup.id]),
]);
},
};
};
47 changes: 24 additions & 23 deletions site/src/pages/GroupsPage/SettingsGroupPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,24 @@
import { useMachine } from "@xstate/react";
import { FC } from "react";
import { Helmet } from "react-helmet-async";
import { useNavigate, useParams } from "react-router-dom";
import { pageTitle } from "utils/page";
import { editGroupMachine } from "xServices/groups/editGroupXService";
import SettingsGroupPageView from "./SettingsGroupPageView";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { group, patchGroup } from "api/queries/groups";
import { displayError } from "components/GlobalSnackbar/utils";
import { getErrorMessage } from "api/errors";

export const SettingsGroupPage: FC = () => {
const { groupId } = useParams();
if (!groupId) {
throw new Error("Group ID not defined.");
}

const { groupId } = useParams() as { groupId: string };
const queryClient = useQueryClient();
const groupQuery = useQuery(group(groupId));
const patchGroupMutation = useMutation(patchGroup(queryClient));
const navigate = useNavigate();

const navigateToGroup = () => {
navigate(`/groups/${groupId}`);
};

const [editState, sendEditEvent] = useMachine(editGroupMachine, {
context: {
groupId,
},
actions: {
onUpdate: navigateToGroup,
},
});
const { error, group } = editState.context;

return (
<>
<Helmet>
Expand All @@ -36,13 +27,23 @@ export const SettingsGroupPage: FC = () => {

<SettingsGroupPageView
onCancel={navigateToGroup}
onSubmit={(data) => {
sendEditEvent({ type: "UPDATE", data });
onSubmit={async (data) => {
try {
await patchGroupMutation.mutateAsync({
groupId,
...data,
add_users: [],
remove_users: [],
});
navigateToGroup();
} catch (error) {
displayError(getErrorMessage(error, "Failed to update group"));
}
}}
group={group}
formErrors={error}
isLoading={editState.matches("loading")}
isUpdating={editState.matches("updating")}
group={groupQuery.data}
formErrors={groupQuery.error}
isLoading={groupQuery.isLoading}
isUpdating={patchGroupMutation.isLoading}
/>
</>
);
Expand Down
100 changes: 0 additions & 100 deletions site/src/xServices/groups/editGroupXService.ts
View file
Open in desktop

This file was deleted.