refactor: rewrite useRole with RQ

packages/web/src/graphql/queries/get-role.ee.js

@@ -1,18 +0,0 @@
-import { gql } from '@apollo/client';
-export const GET_ROLE = gql`
-  query GetRole($id: String!) {
-    getRole(id: $id) {
-      id
-      key
-      name
-      description
-      isAdmin
-      permissions {
-        id
-        action
-        subject
-        conditions
-      }
-    }
-  }
-`;

packages/web/src/helpers/computePermissions.ee.js

@@ -1,20 +1,21 @@
 export function getRoleWithComputedPermissions(role) {
   if (!role) return {};
-  const computedPermissions = role.permissions.reduce(
+  const computedPermissions = role.permissions?.reduce(
     (computedPermissions, permission) => ({
       ...computedPermissions,
       [permission.subject]: {
         ...(computedPermissions[permission.subject] || {}),
         [permission.action]: {
           conditions: Object.fromEntries(
-            permission.conditions.map((condition) => [condition, true])
+            permission.conditions.map((condition) => [condition, true]),
           ),
           value: true,
         },
       },
     }),
-    {}
+    {},
   );
+
   return {
     ...role,
     computedPermissions,
@@ -22,6 +23,7 @@ export function getRoleWithComputedPermissions(role) {
 }
 export function getPermissions(computedPermissions) {
   if (!computedPermissions) return [];
+
   return Object.entries(computedPermissions).reduce(
     (permissions, computedPermissionEntry) => {
       const [subject, actionsWithConditions] = computedPermissionEntry;
@@ -40,6 +42,6 @@ export function getPermissions(computedPermissions) {
       }
       return permissions;
     },
-    []
+    [],
   );
 }

packages/web/src/hooks/useRole.ee.js

@@ -1,19 +1,19 @@
-import * as React from 'react';
-import { useLazyQuery } from '@apollo/client';
-import { GET_ROLE } from 'graphql/queries/get-role.ee';
-export default function useRole(roleId) {
-  const [getRole, { data, loading }] = useLazyQuery(GET_ROLE);
-  React.useEffect(() => {
-    if (roleId) {
-      getRole({
-        variables: {
-          id: roleId,
-        },
+import { useQuery } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+
+export default function useRole({ roleId }) {
+  const query = useQuery({
+    queryKey: ['role', roleId],
+    queryFn: async ({ signal }) => {
+      const { data } = await api.get(`/v1/admin/roles/${roleId}`, {
+        signal,
       });
-    }
-  }, [roleId]);
-  return {
-    role: data?.getRole,
-    loading,
-  };
+
+      return data;
+    },
+    enabled: !!roleId,
+  });
+
+  return query;
 }

packages/web/src/pages/EditRole/index.ee.jsx

@@ -6,6 +6,7 @@ import Stack from '@mui/material/Stack';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
+
 import Container from 'components/Container';
 import Form from 'components/Form';
 import PageTitle from 'components/PageTitle';
@@ -19,13 +20,16 @@ import {
 } from 'helpers/computePermissions.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useRole from 'hooks/useRole.ee';
+
 export default function EditRole() {
   const formatMessage = useFormatMessage();
   const [updateRole, { loading }] = useMutation(UPDATE_ROLE);
   const navigate = useNavigate();
   const { roleId } = useParams();
-  const { role, loading: roleLoading } = useRole(roleId);
+  const { data, loading: isRoleLoading } = useRole({ roleId });
+  const role = data?.data;
   const enqueueSnackbar = useEnqueueSnackbar();
+
   const handleRoleUpdate = async (roleData) => {
     try {
       const newPermissions = getPermissions(roleData.computedPermissions);
@@ -39,18 +43,22 @@ export default function EditRole() {
           },
         },
       });
+
       enqueueSnackbar(formatMessage('editRole.successfullyUpdated'), {
         variant: 'success',
         SnackbarProps: {
           'data-test': 'snackbar-edit-role-success',
         },
       });
+
       navigate(URLS.ROLES);
     } catch (error) {
       throw new Error('Failed while updating!');
     }
   };
+
   const roleWithComputedPermissions = getRoleWithComputedPermissions(role);
+
   return (
     <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
       <Grid container item xs={12} sm={10} md={9}>
@@ -66,13 +74,13 @@ export default function EditRole() {
             onSubmit={handleRoleUpdate}
           >
             <Stack direction="column" gap={2}>
-              {roleLoading && (
+              {isRoleLoading && (
                 <>
                   <Skeleton variant="rounded" height={55} />
                   <Skeleton variant="rounded" height={55} />
                 </>
               )}
-              {!roleLoading && role && (
+              {!isRoleLoading && role && (
                 <>
                   <TextField
                     disabled={role.isAdmin}
@@ -104,7 +112,7 @@ export default function EditRole() {
                 color="primary"
                 sx={{ boxShadow: 2 }}
                 loading={loading}
-                disabled={role?.isAdmin || roleLoading}
+                disabled={role?.isAdmin || isRoleLoading}
                 data-test="update-button"
               >
                 {formatMessage('editRole.submit')}