refactor: rewrite useFlows as useConnectionFlows and useAppFlows with RQ

This commit is contained in:
Rıdvan Akca
2024-03-19 18:53:20 +03:00
parent ec87c7f21c
commit 316bda8c3f
8 changed files with 64 additions and 113 deletions

View File

@@ -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) {

View File

@@ -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
}
}
}
}
}
`;

View 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;
}

View 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;
}

View File

@@ -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(() => {