feat: add useLazyApps hook
This commit is contained in:
@@ -20,11 +20,10 @@ import OutlinedInput from '@mui/material/OutlinedInput';
|
|||||||
import FormControl from '@mui/material/FormControl';
|
import FormControl from '@mui/material/FormControl';
|
||||||
import Box from '@mui/material/Box';
|
import Box from '@mui/material/Box';
|
||||||
|
|
||||||
import api from 'helpers/api';
|
|
||||||
import * as URLS from 'config/urls';
|
import * as URLS from 'config/urls';
|
||||||
import AppIcon from 'components/AppIcon';
|
import AppIcon from 'components/AppIcon';
|
||||||
import useFormatMessage from 'hooks/useFormatMessage';
|
import useFormatMessage from 'hooks/useFormatMessage';
|
||||||
import { useMutation } from '@tanstack/react-query';
|
import useLazyApps from 'hooks/useLazyApps';
|
||||||
|
|
||||||
function createConnectionOrFlow(appKey, supportsConnections = false) {
|
function createConnectionOrFlow(appKey, supportsConnections = false) {
|
||||||
if (!supportsConnections) {
|
if (!supportsConnections) {
|
||||||
@@ -40,27 +39,34 @@ function AddNewAppConnection(props) {
|
|||||||
const formatMessage = useFormatMessage();
|
const formatMessage = useFormatMessage();
|
||||||
const [appName, setAppName] = React.useState('');
|
const [appName, setAppName] = React.useState('');
|
||||||
const [isLoading, setIsLoading] = React.useState(false);
|
const [isLoading, setIsLoading] = React.useState(false);
|
||||||
|
const abortControllerRef = React.useRef(null);
|
||||||
|
|
||||||
const { data: apps, mutate } = useMutation({
|
const { data: apps, mutate } = useLazyApps({
|
||||||
mutationFn: async ({ payload, signal }) => {
|
appName,
|
||||||
const { data } = await api.get('/v1/apps', {
|
|
||||||
params: { name: appName },
|
|
||||||
});
|
|
||||||
|
|
||||||
return data;
|
|
||||||
},
|
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
},
|
},
|
||||||
|
abortControllerRef,
|
||||||
});
|
});
|
||||||
|
|
||||||
const fetchData = React.useMemo(() => debounce(mutate, 300), [mutate]);
|
const fetchData = React.useMemo(() => debounce(mutate, 300), [mutate]);
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
setIsLoading(true);
|
setIsLoading(true);
|
||||||
|
|
||||||
|
if (abortControllerRef.current) {
|
||||||
|
abortControllerRef.current.abort();
|
||||||
|
}
|
||||||
|
abortControllerRef.current = new AbortController();
|
||||||
|
|
||||||
fetchData(appName);
|
fetchData(appName);
|
||||||
|
|
||||||
return () => fetchData.cancel();
|
return () => {
|
||||||
|
fetchData.cancel();
|
||||||
|
if (abortControllerRef.current) {
|
||||||
|
abortControllerRef.current.abort();
|
||||||
|
}
|
||||||
|
};
|
||||||
}, [fetchData, appName]);
|
}, [fetchData, appName]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
29
packages/web/src/hooks/useLazyApps.js
Normal file
29
packages/web/src/hooks/useLazyApps.js
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
import { useMutation } from '@tanstack/react-query';
|
||||||
|
|
||||||
|
import api from 'helpers/api';
|
||||||
|
|
||||||
|
export default function useLazyApps({
|
||||||
|
appName,
|
||||||
|
onSuccess,
|
||||||
|
abortControllerRef,
|
||||||
|
}) {
|
||||||
|
const query = useMutation({
|
||||||
|
mutationFn: async ({ payload, signal }) => {
|
||||||
|
abortControllerRef.current = new AbortController();
|
||||||
|
|
||||||
|
const { data } = await api.get('/v1/apps', {
|
||||||
|
params: { name: appName },
|
||||||
|
signal: abortControllerRef.current.signal,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (abortControllerRef.current.signal.aborted) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
return data;
|
||||||
|
},
|
||||||
|
onSuccess,
|
||||||
|
});
|
||||||
|
|
||||||
|
return query;
|
||||||
|
}
|
Reference in New Issue
Block a user