Move suspend to react-query

coder · BrunoQuaresma · Oct 2, 2023 · Sep 28, 2023 · Sep 28, 2023 · Sep 29, 2023
commit 9db6ec6d290d6fbe88fe909a5151b14b8f210d09
diff --git a/site/src/api/queries/users.ts b/site/src/api/queries/users.ts
@@ -1,3 +1,4 @@
+import { QueryClient } from "@tanstack/react-query";
 import * as API from "api/api";
 import { UpdateUserPasswordRequest, UsersRequest } from "api/typesGenerated";
 
@@ -29,3 +30,12 @@ export const createFirstUser = () => {
     mutationFn: API.createFirstUser,
   };
 };
+
+export const suspendUser = (queryClient: QueryClient) => {
+  return {
+    mutationFn: API.suspendUser,
+    onSuccess: async () => {
+      await queryClient.invalidateQueries(["users"]);
+    },
+  };
+};
diff --git a/site/src/pages/UsersPage/UsersPage.test.tsx b/site/src/pages/UsersPage/UsersPage.test.tsx
@@ -176,7 +176,7 @@ describe("UsersPage", () => {
         });
 
         // Check if the success message is displayed
-        await screen.findByText(usersXServiceLanguage.suspendUserSuccess);
+        await screen.findByText("User suspended");
 
         // Check if the API was called correctly
         expect(API.suspendUser).toBeCalledTimes(1);
@@ -195,7 +195,7 @@ describe("UsersPage", () => {
         });
 
         // Check if the error message is displayed
-        await screen.findByText(usersXServiceLanguage.suspendUserError);
+        await screen.findByText("Error suspending user");
 
         // Check if the API was called correctly
         expect(API.suspendUser).toBeCalledTimes(1);

diff --git a/site/src/pages/UsersPage/UsersPage.tsx b/site/src/pages/UsersPage/UsersPage.tsx
@@ -4,7 +4,7 @@ import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog";
 import { nonInitialPage } from "components/PaginationWidget/utils";
 import { useMe } from "hooks/useMe";
 import { usePermissions } from "hooks/usePermissions";
-import { FC, ReactNode } from "react";
+import { FC, ReactNode, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { useSearchParams, useNavigate } from "react-router-dom";
 import { usersMachine } from "xServices/users/usersXService";
@@ -15,13 +15,15 @@ import { UsersPageView } from "./UsersPageView";
 import { useStatusFilterMenu } from "./UsersFilter";
 import { useFilter } from "components/Filter/filter";
 import { useDashboard } from "components/Dashboard/DashboardProvider";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { getAuthMethods } from "api/api";
 import { roles } from "api/queries/roles";
 import { deploymentConfig } from "api/queries/deployment";
 import { prepareQuery } from "utils/filters";
 import { usePagination } from "hooks";
-import * as UsersQuery from "api/queries/users";
+import { users, suspendUser } from "api/queries/users";
+import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
+import { getErrorMessage } from "api/errors";
 
 export const Language = {
   suspendDialogTitle: "Suspend user",
@@ -36,6 +38,7 @@ const getSelectedUser = (id: string, users?: User[]) =>
   users?.find((u) => u.id === id);
 
 export const UsersPage: FC<{ children?: ReactNode }> = () => {
+  const queryClient = useQueryClient();
   const navigate = useNavigate();
   const searchParamsResult = useSearchParams();
   const { entitlements } = useDashboard();
@@ -46,17 +49,14 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
     searchParamsResult,
   });
   const usersQuery = useQuery(
-    UsersQuery.users({
+    users({
       q: prepareQuery(filter),
       limit: pagination.limit,
       offset: pagination.offset,
     }),
   );
-  const users = usersQuery.data?.users;
-  const count = usersQuery.data?.count;
   const {
     usernameToDelete,
-    usernameToSuspend,
     usernameToActivate,
     userIdToResetPassword,
     newUserPassword,
@@ -95,6 +95,8 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
   });
   const isLoading =
     usersQuery.isLoading || rolesQuery.isLoading || authMethods.isLoading;
+  const [confirmSuspendUser, setConfirmSuspendUser] = useState<User>();
+  const suspendUserMutation = useMutation(suspendUser(queryClient));
 
   return (
     <>
@@ -104,7 +106,7 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
       <UsersPageView
         oidcRoleSyncEnabled={oidcRoleSyncEnabled}
         roles={rolesQuery.data}
-        users={users}
+        users={usersQuery.data?.users}
         authMethods={authMethods.data}
         onListWorkspaces={(user) => {
           navigate(
@@ -124,13 +126,7 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
             username: user.username,
           });
         }}
-        onSuspendUser={(user) => {
-          usersSend({
-            type: "SUSPEND_USER",
-            userId: user.id,
-            username: user.username,
-          });
-        }}
+        onSuspendUser={setConfirmSuspendUser}
         onActivateUser={(user) => {
           usersSend({
             type: "ACTIVATE_USER",
@@ -161,7 +157,7 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
             status: statusMenu,
           },
         }}
-        count={count}
+        count={usersQuery.data?.count}
         page={pagination.page}
         limit={pagination.limit}
         onPageChange={pagination.goToPage}
@@ -187,24 +183,26 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
       <ConfirmDialog
         type="delete"
         hideCancel={false}
-        open={
-          usersState.matches("confirmUserSuspension") ||
-          usersState.matches("suspendingUser")
-        }
-        confirmLoading={usersState.matches("suspendingUser")}
-        title={Language.suspendDialogTitle}
-        confirmText={Language.suspendDialogAction}
-        onConfirm={() => {
-          usersSend("CONFIRM_USER_SUSPENSION");
+        open={confirmSuspendUser !== undefined}
+        confirmLoading={suspendUserMutation.isLoading}
+        title="Suspend user"
+        confirmText="Suspend"
+        onConfirm={async () => {
+          try {
+            await suspendUserMutation.mutateAsync(confirmSuspendUser!.id);
+            setConfirmSuspendUser(undefined);
+            displaySuccess("User suspended");
+          } catch (e) {
+            displayError(getErrorMessage(e, "Error suspending user"));
+          }
         }}
         onClose={() => {
-          usersSend("CANCEL_USER_SUSPENSION");
+          setConfirmSuspendUser(undefined);
         }}
         description={
           <>
-            {Language.suspendDialogMessagePrefix}
-            {usernameToSuspend && " "}
-            <strong>{usernameToSuspend ?? ""}</strong>?
+            Do you want to suspend the user{" "}
+            <strong>{confirmSuspendUser?.username ?? ""}</strong>?
           </>
         }
       />
@@ -241,7 +239,7 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
             usersState.matches("resettingUserPassword")
           }
           loading={usersState.matches("resettingUserPassword")}
-          user={getSelectedUser(userIdToResetPassword, users)}
+          user={getSelectedUser(userIdToResetPassword, usersQuery.data?.users)}
           newPassword={newUserPassword}
           onClose={() => {
             usersSend("CANCEL_USER_PASSWORD_RESET");

diff --git a/site/src/xServices/users/usersXService.ts b/site/src/xServices/users/usersXService.ts
@@ -6,9 +6,6 @@ import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
 import { generateRandomString } from "utils/random";
 
 export const Language = {
-  getUsersError: "Error getting users.",
-  suspendUserSuccess: "Successfully suspended the user.",
-  suspendUserError: "Error suspending user.",
   deleteUserSuccess: "Successfully deleted the user.",
   deleteUserError: "Error deleting user.",
   activateUserSuccess: "Successfully activated the user.",
@@ -20,10 +17,6 @@ export const Language = {
 };
 
 export interface UsersContext {
-  // Suspend user
-  userIdToSuspend?: TypesGen.User["id"];
-  usernameToSuspend?: TypesGen.User["username"];
-  suspendUserError?: unknown;
   // Delete user
   userIdToDelete?: TypesGen.User["id"];
   usernameToDelete?: TypesGen.User["username"];
@@ -42,12 +35,6 @@ export interface UsersContext {
 }
 
 export type UsersEvent =
-  // Suspend events
-  | {
-      type: "SUSPEND_USER";
-      userId: TypesGen.User["id"];
-      username: TypesGen.User["username"];
-    }
   | { type: "CONFIRM_USER_SUSPENSION" }
   | { type: "CANCEL_USER_SUSPENSION" }
   // Delete events
@@ -113,10 +100,6 @@ export const usersMachine =
         idle: {
           entry: "clearSelectedUser",
           on: {
-            SUSPEND_USER: {
-              target: "confirmUserSuspension",
-              actions: "assignUserToSuspend",
-            },
             DELETE_USER: {
               target: "confirmUserDeletion",
               actions: "assignUserToDelete",
@@ -138,16 +121,6 @@ export const usersMachine =
             },
           },
         },
-        confirmUserSuspension: {
-          on: {
-            CONFIRM_USER_SUSPENSION: {
-              target: "suspendingUser",
-            },
-            CANCEL_USER_SUSPENSION: {
-              target: "idle",
-            },
-          },
-        },
         confirmUserDeletion: {
           on: {
             CONFIRM_USER_DELETE: {
@@ -168,28 +141,6 @@ export const usersMachine =
             },
           },
         },
-        suspendingUser: {
-          entry: "clearSuspendUserError",
-          invoke: {
-            src: "suspendUser",
-            id: "suspendUser",
-            onDone: [
-              {
-                target: "idle",
-                actions: "displaySuspendSuccess",
-              },
-            ],
-            onError: [
-              {
-                target: "idle",
-                actions: [
-                  "assignSuspendUserError",
-                  "displaySuspendedErrorMessage",
-                ],
-              },
-            ],
-          },
-        },
         deletingUser: {
           entry: "clearDeleteUserError",
           invoke: {
@@ -289,13 +240,6 @@ export const usersMachine =
     },
     {
       services: {
-        suspendUser: (context) => {
-          if (!context.userIdToSuspend) {
-            throw new Error("userIdToSuspend is undefined");
-          }
-
-          return API.suspendUser(context.userIdToSuspend);
-        },
         deleteUser: (context) => {
           if (!context.userIdToDelete) {
             throw new Error("userIdToDelete is undefined");
@@ -334,19 +278,13 @@ export const usersMachine =
 
       actions: {
         clearSelectedUser: assign({
-          userIdToSuspend: (_) => undefined,
-          usernameToSuspend: (_) => undefined,
           userIdToDelete: (_) => undefined,
           usernameToDelete: (_) => undefined,
           userIdToActivate: (_) => undefined,
           usernameToActivate: (_) => undefined,
           userIdToResetPassword: (_) => undefined,
           userIdToUpdateRoles: (_) => undefined,
         }),
-        assignUserToSuspend: assign({
-          userIdToSuspend: (_, event) => event.userId,
-          usernameToSuspend: (_, event) => event.username,
-        }),
         assignUserToDelete: assign({
           userIdToDelete: (_, event) => event.userId,
           usernameToDelete: (_, event) => event.username,
@@ -361,9 +299,6 @@ export const usersMachine =
         assignUserIdToUpdateRoles: assign({
           userIdToUpdateRoles: (_, event) => event.userId,
         }),
-        assignSuspendUserError: assign({
-          suspendUserError: (_, event) => event.data,
-        }),
         assignDeleteUserError: assign({
           deleteUserError: (_, event) => event.data,
         }),
@@ -376,9 +311,6 @@ export const usersMachine =
         assignUpdateRolesError: assign({
           updateUserRolesError: (_, event) => event.data,
         }),
-        clearSuspendUserError: assign({
-          suspendUserError: (_) => undefined,
-        }),
         clearDeleteUserError: assign({
           deleteUserError: (_) => undefined,
         }),
@@ -391,16 +323,6 @@ export const usersMachine =
         clearUpdateUserRolesError: assign({
           updateUserRolesError: (_) => undefined,
         }),
-        displaySuspendSuccess: () => {
-          displaySuccess(Language.suspendUserSuccess);
-        },
-        displaySuspendedErrorMessage: (context) => {
-          const message = getErrorMessage(
-            context.suspendUserError,
-            Language.suspendUserError,
-          );
-          displayError(message);
-        },
         displayDeleteSuccess: () => {
           displaySuccess(Language.deleteUserSuccess);
         },