diff --git a/packages/web/src/pages/Flows/index.jsx b/packages/web/src/pages/Flows/index.jsx index b7edad81..40c5721f 100644 --- a/packages/web/src/pages/Flows/index.jsx +++ b/packages/web/src/pages/Flows/index.jsx @@ -27,10 +27,14 @@ export default function Flows() { const [searchParams, setSearchParams] = useSearchParams(); const page = parseInt(searchParams.get('page') || '', 10) || 1; const flowName = searchParams.get('flowName') || ''; - const [isLoading, setIsLoading] = React.useState(false); + const [isLoading, setIsLoading] = React.useState(true); const currentUserAbility = useCurrentUserAbility(); - const { data, mutate: fetchFlows } = useLazyFlows( + const { + data, + mutate: fetchFlows, + isSuccess, + } = useLazyFlows( { flowName, page }, { onSettled: () => { @@ -42,12 +46,13 @@ export default function Flows() { const flows = data?.data || []; const pageInfo = data?.meta; const hasFlows = flows?.length; + const navigateToLastPage = isSuccess && !hasFlows && page > 1; const onSearchChange = React.useCallback((event) => { setSearchParams({ flowName: event.target.value }); }, []); - const getLinkWithSearchParams = (page, flowName) => { + const getPathWithSearchParams = (page, flowName) => { const searchParams = new URLSearchParams(); if (page > 1) { @@ -56,24 +61,13 @@ export default function Flows() { if (flowName) { searchParams.set('flowName', flowName); } - return `?${searchParams.toString()}`; - }; - const onDeleteFlow = () => { - const isLastItem = flows?.length === 1; - const hasOtherPages = - pageInfo && pageInfo.totalPages > 1 && pageInfo.currentPage > 1; - - if (isLastItem && hasOtherPages) { - navigate(getLinkWithSearchParams(pageInfo.currentPage - 1, flowName)); - } else { - fetchFlows(); - } + return { search: searchParams.toString() }; }; const onDuplicateFlow = () => { if (pageInfo?.currentPage > 1) { - navigate(getLinkWithSearchParams(1, flowName)); + navigate(getPathWithSearchParams(1, flowName)); } else { fetchFlows(); } @@ -94,6 +88,15 @@ export default function Flows() { }; }, [fetchData, flowName, page]); + React.useEffect( + function redirectToLastPage() { + if (navigateToLastPage) { + navigate(getPathWithSearchParams(pageInfo.totalPages, flowName)); + } + }, + [navigateToLastPage], + ); + return ( @@ -136,7 +139,7 @@ export default function Flows() { - {isLoading && ( + {(isLoading || navigateToLastPage) && ( )} {!isLoading && @@ -145,10 +148,10 @@ export default function Flows() { key={flow.id} flow={flow} onDuplicateFlow={onDuplicateFlow} - onDeleteFlow={onDeleteFlow} + onDeleteFlow={fetchFlows} /> ))} - {!isLoading && !hasFlows && ( + {!isLoading && !navigateToLastPage && !hasFlows && ( )} - {!isLoading && pageInfo && pageInfo.totalPages > 1 && ( - ( - - )} - /> - )} + {!isLoading && + !navigateToLastPage && + pageInfo && + pageInfo.totalPages > 1 && ( + ( + + )} + /> + )} );