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
Next Next commit
Remove groups service
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committed Sep 15, 2023
commit 07a4bd4f8f879bb22149c4859df352384bd83354
8 changes: 8 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,8 @@
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. 🤷‍♀️


export const groups = (organizationId: string) => {
return {
queryKey: ["groups"],
queryFn: () => API.getGroups(organizationId),
};
};
26 changes: 15 additions & 11 deletions site/src/pages/GroupsPage/GroupsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,28 @@
import { useMachine } from "@xstate/react";
import { useFeatureVisibility } from "hooks/useFeatureVisibility";
import { useOrganizationId } from "hooks/useOrganizationId";
import { usePermissions } from "hooks/usePermissions";
import { FC } from "react";
import { FC, useEffect } from "react";
import { Helmet } from "react-helmet-async";
import { pageTitle } from "utils/page";
import { groupsMachine } from "xServices/groups/groupsXService";
import GroupsPageView from "./GroupsPageView";
import { useQuery } from "@tanstack/react-query";
import { groups } from "api/queries/groups";
import { displayError } from "components/GlobalSnackbar/utils";
import { getErrorMessage } from "api/errors";

export const GroupsPage: FC = () => {
const organizationId = useOrganizationId();
const { createGroup: canCreateGroup } = usePermissions();
const { template_rbac: isTemplateRBACEnabled } = useFeatureVisibility();
const [state] = useMachine(groupsMachine, {
context: {
organizationId,
shouldFetchGroups: isTemplateRBACEnabled,
},
});
const { groups } = state.context;
const groupsQuery = useQuery(groups(organizationId));

useEffect(() => {
if (groupsQuery.error) {
displayError(
getErrorMessage(groupsQuery.error, "Error on loading groups."),
);
}
}, [groupsQuery.error]);

return (
<>
Expand All @@ -27,7 +31,7 @@ export const GroupsPage: FC = () => {
</Helmet>

<GroupsPageView
groups={groups}
groups={groupsQuery.data}
canCreateGroup={canCreateGroup}
isTemplateRBACEnabled={isTemplateRBACEnabled}
/>
Expand Down
60 changes: 0 additions & 60 deletions site/src/xServices/groups/groupsXService.ts
View file
Open in desktop

This file was deleted.