refactor: rewrite useAuthClients with RQ

packages/web/src/components/AdminApplicationAuthClients/index.jsx

@@ -10,16 +10,18 @@ import Chip from '@mui/material/Chip';
 import Button from '@mui/material/Button';
 import * as URLS from 'config/urls';
 import useFormatMessage from 'hooks/useFormatMessage';
-import useAppAuthClients from 'hooks/useAppAuthClients.ee';
+import useAdminAppAuthClients from 'hooks/useAdminAppAuthClients';
 import NoResultFound from 'components/NoResultFound';
 
 function AdminApplicationAuthClients(props) {
   const { appKey } = props;
   const formatMessage = useFormatMessage();
-  const { appAuthClients, loading } = useAppAuthClients({ appKey });
-  if (loading)
+  const { data: appAuthClients, isLoading } = useAdminAppAuthClients(appKey);
+
+  if (isLoading)
     return <CircularProgress sx={{ display: 'block', margin: '20px auto' }} />;
-  if (!appAuthClients?.length) {
+
+  if (!appAuthClients?.data.length) {
     return (
       <NoResultFound
         to={URLS.ADMIN_APP_AUTH_CLIENTS_CREATE(appKey)}
@@ -27,7 +29,8 @@ function AdminApplicationAuthClients(props) {
       />
     );
   }
-  const sortedAuthClients = appAuthClients.slice().sort((a, b) => {
+
+  const sortedAuthClients = appAuthClients.data.slice().sort((a, b) => {
     if (a.id < b.id) {
       return -1;
     }
@@ -36,6 +39,7 @@ function AdminApplicationAuthClients(props) {
     }
     return 0;
   });
+
   return (
     <div>
       {sortedAuthClients.map((client) => (

packages/web/src/components/AppAuthClientsDialog/index.ee.jsx

@@ -6,29 +6,33 @@ import ListItem from '@mui/material/ListItem';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
 import * as React from 'react';
-import useAppAuthClients from 'hooks/useAppAuthClients.ee';
+import useAppAuthClients from 'hooks/useAppAuthClients';
 import useFormatMessage from 'hooks/useFormatMessage';
 
 function AppAuthClientsDialog(props) {
   const { appKey, onClientClick, onClose } = props;
-  const { appAuthClients } = useAppAuthClients({ appKey, active: true });
+  const { data: appAuthClients } = useAppAuthClients(appKey);
+
   const formatMessage = useFormatMessage();
+
   React.useEffect(
     function autoAuthenticateSingleClient() {
-      if (appAuthClients?.length === 1) {
-        onClientClick(appAuthClients[0].id);
+      if (appAuthClients?.data.length === 1) {
+        onClientClick(appAuthClients.data[0].id);
       }
     },
-    [appAuthClients],
+    [appAuthClients?.data],
   );
-  if (!appAuthClients?.length || appAuthClients?.length === 1)
+
+  if (!appAuthClients?.data.length || appAuthClients?.data.length === 1)
     return <React.Fragment />;
+
   return (
     <Dialog onClose={onClose} open={true}>
       <DialogTitle>{formatMessage('appAuthClientsDialog.title')}</DialogTitle>
 
       <List sx={{ pt: 0 }}>
-        {appAuthClients.map((appAuthClient) => (
+        {appAuthClients.data.map((appAuthClient) => (
           <ListItem disableGutters key={appAuthClient.id}>
             <ListItemButton onClick={() => onClientClick(appAuthClient.id)}>
               <ListItemText primary={appAuthClient.name} />