refactor: rewrite get connected apps with RQ

This commit is contained in:
kasia.oczkowska
2024-04-11 13:29:11 +01:00
parent 897c96361f
commit b549ba3e39
9 changed files with 48 additions and 115 deletions

View File

@@ -1,15 +0,0 @@
import { gql } from '@apollo/client';
export const GET_CONNECTED_APPS = gql`
query GetConnectedApps($name: String) {
getConnectedApps(name: $name) {
key
name
iconUrl
docUrl
primaryColor
connectionCount
flowCount
supportsConnections
}
}
`;

View File

@@ -0,0 +1,25 @@
import { useQuery } from '@tanstack/react-query';
import useCurrentUser from 'hooks/useCurrentUser';
import api from 'helpers/api';
export default function useUserApps(appName) {
const { data } = useCurrentUser();
const userId = data?.data.id;
const query = useQuery({
queryKey: ['users', userId, 'apps', appName],
queryFn: async ({ signal }) => {
const { data } = await api.get(`/v1/users/${userId}/apps`, {
signal,
params: {
...(appName && { name: appName }),
},
});
return data;
},
enabled: !!userId,
});
return query;
}

View File

@@ -1,6 +1,5 @@
import * as React from 'react';
import { Link, Routes, Route, useNavigate } from 'react-router-dom';
import { useQuery } from '@apollo/client';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import Divider from '@mui/material/Divider';
@@ -15,23 +14,25 @@ import PageTitle from 'components/PageTitle';
import AppRow from 'components/AppRow';
import SearchInput from 'components/SearchInput';
import useFormatMessage from 'hooks/useFormatMessage';
import { GET_CONNECTED_APPS } from 'graphql/queries/get-connected-apps';
import * as URLS from 'config/urls';
import useUserApps from 'hooks/useUserApps';
export default function Applications() {
const navigate = useNavigate();
const formatMessage = useFormatMessage();
const [appName, setAppName] = React.useState(null);
const { data, loading } = useQuery(GET_CONNECTED_APPS, {
variables: { name: appName },
});
const apps = data?.getConnectedApps;
const { data, isLoading } = useUserApps(appName);
const apps = data?.data;
const hasApps = apps?.length;
const onSearchChange = React.useCallback((event) => {
setAppName(event.target.value);
}, []);
const goToApps = React.useCallback(() => {
navigate(URLS.APPS);
}, [navigate]);
return (
<Box sx={{ py: 3 }}>
<Container>
@@ -75,21 +76,21 @@ export default function Applications() {
<Divider sx={{ mt: [2, 0], mb: 2 }} />
{loading && (
{isLoading && (
<CircularProgress
data-test="apps-loader"
sx={{ display: 'block', margin: '20px auto' }}
/>
)}
{!loading && !hasApps && (
{!isLoading && !hasApps && (
<NoResultFound
text={formatMessage('apps.noConnections')}
to={URLS.NEW_APP_CONNECTION}
/>
)}
{!loading &&
{!isLoading &&
apps?.map((app) => (
<AppRow key={app.name} application={app} url={URLS.APP(app.key)} />
))}