refactor: rewrite useFlows as useConnectionFlows and useAppFlows with RQ
This commit is contained in:
@@ -1,7 +1,5 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { useQuery } from '@apollo/client';
|
||||
import { Link, useSearchParams } from 'react-router-dom';
|
||||
import { GET_FLOWS } from 'graphql/queries/get-flows';
|
||||
import Pagination from '@mui/material/Pagination';
|
||||
import PaginationItem from '@mui/material/PaginationItem';
|
||||
|
||||
@@ -9,31 +7,31 @@ import * as URLS from 'config/urls';
|
||||
import AppFlowRow from 'components/FlowRow';
|
||||
import NoResultFound from 'components/NoResultFound';
|
||||
import useFormatMessage from 'hooks/useFormatMessage';
|
||||
import useConnectionFlows from 'hooks/useConnectionFlows';
|
||||
import useAppFlows from 'hooks/useAppFlows';
|
||||
|
||||
const FLOW_PER_PAGE = 10;
|
||||
|
||||
const getLimitAndOffset = (page) => ({
|
||||
limit: FLOW_PER_PAGE,
|
||||
offset: (page - 1) * FLOW_PER_PAGE,
|
||||
});
|
||||
function AppFlows(props) {
|
||||
const { appKey } = props;
|
||||
const formatMessage = useFormatMessage();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const connectionId = searchParams.get('connectionId') || undefined;
|
||||
const page = parseInt(searchParams.get('page') || '', 10) || 1;
|
||||
const isConnectionFlowEnabled = !!connectionId;
|
||||
const isAppFlowEnabled = !!appKey && !connectionId;
|
||||
|
||||
const { data } = useQuery(GET_FLOWS, {
|
||||
variables: {
|
||||
appKey,
|
||||
connectionId,
|
||||
...getLimitAndOffset(page),
|
||||
},
|
||||
});
|
||||
const connectionFlows = useConnectionFlows(
|
||||
{ connectionId, page },
|
||||
{ enabled: isConnectionFlowEnabled },
|
||||
);
|
||||
|
||||
const getFlows = data?.getFlows || {};
|
||||
const { pageInfo, edges } = getFlows;
|
||||
const flows = edges?.map(({ node }) => node);
|
||||
const appFlows = useAppFlows({ appKey, page }, { enabled: isAppFlowEnabled });
|
||||
|
||||
const flows = isConnectionFlowEnabled
|
||||
? connectionFlows?.data?.data || []
|
||||
: appFlows?.data?.data || [];
|
||||
const pageInfo = isConnectionFlowEnabled
|
||||
? connectionFlows?.data?.meta || []
|
||||
: appFlows?.data?.meta || [];
|
||||
const hasFlows = flows?.length;
|
||||
|
||||
if (!hasFlows) {
|
||||
|
@@ -1,36 +0,0 @@
|
||||
import { gql } from '@apollo/client';
|
||||
export const GET_FLOWS = gql`
|
||||
query GetFlows(
|
||||
$limit: Int!
|
||||
$offset: Int!
|
||||
$appKey: String
|
||||
$connectionId: String
|
||||
$name: String
|
||||
) {
|
||||
getFlows(
|
||||
limit: $limit
|
||||
offset: $offset
|
||||
appKey: $appKey
|
||||
connectionId: $connectionId
|
||||
name: $name
|
||||
) {
|
||||
pageInfo {
|
||||
currentPage
|
||||
totalPages
|
||||
}
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
name
|
||||
createdAt
|
||||
updatedAt
|
||||
active
|
||||
status
|
||||
steps {
|
||||
iconUrl
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
22
packages/web/src/hooks/useAppFlows.js
Normal file
22
packages/web/src/hooks/useAppFlows.js
Normal file
@@ -0,0 +1,22 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
|
||||
import api from 'helpers/api';
|
||||
|
||||
export default function useAppFlows({ appKey, page }, { enabled }) {
|
||||
const query = useQuery({
|
||||
queryKey: ['appFlows', appKey, page],
|
||||
queryFn: async ({ signal }) => {
|
||||
const { data } = await api.get(`/v1/apps/${appKey}/flows`, {
|
||||
params: {
|
||||
page,
|
||||
},
|
||||
signal,
|
||||
});
|
||||
|
||||
return data;
|
||||
},
|
||||
enabled,
|
||||
});
|
||||
|
||||
return query;
|
||||
}
|
25
packages/web/src/hooks/useConnectionFlows.js
Normal file
25
packages/web/src/hooks/useConnectionFlows.js
Normal file
@@ -0,0 +1,25 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
|
||||
import api from 'helpers/api';
|
||||
|
||||
export default function useConnectionFlows(
|
||||
{ connectionId, page },
|
||||
{ enabled },
|
||||
) {
|
||||
const query = useQuery({
|
||||
queryKey: ['connectionFlows', connectionId, page],
|
||||
queryFn: async ({ signal }) => {
|
||||
const { data } = await api.get(`/v1/connections/${connectionId}/flows`, {
|
||||
params: {
|
||||
page,
|
||||
},
|
||||
signal,
|
||||
});
|
||||
|
||||
return data;
|
||||
},
|
||||
enabled,
|
||||
});
|
||||
|
||||
return query;
|
||||
}
|
@@ -3,7 +3,7 @@ import * as React from 'react';
|
||||
import api from 'helpers/api';
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
|
||||
export default function useFlows({ flowName, page }, { onSuccess }) {
|
||||
export default function useLazyFlows({ flowName, page }, { onSuccess }) {
|
||||
const abortControllerRef = React.useRef(new AbortController());
|
||||
|
||||
React.useEffect(() => {
|
||||
|
Reference in New Issue
Block a user