diff --git a/packages/web/src/components/SearchInput/index.jsx b/packages/web/src/components/SearchInput/index.jsx index 3f176f3f..08433fd5 100644 --- a/packages/web/src/components/SearchInput/index.jsx +++ b/packages/web/src/components/SearchInput/index.jsx @@ -7,7 +7,7 @@ import FormControl from '@mui/material/FormControl'; import SearchIcon from '@mui/icons-material/Search'; import useFormatMessage from 'hooks/useFormatMessage'; -export default function SearchInput({ onChange }) { +export default function SearchInput({ onChange, defaultValue = '' }) { const formatMessage = useFormatMessage(); return ( @@ -16,6 +16,7 @@ export default function SearchInput({ onChange }) { { @@ -38,6 +43,36 @@ 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 getPathWithSearchParams = (page, flowName) => { + const searchParams = new URLSearchParams(); + + if (page > 1) { + searchParams.set('page', page); + } + if (flowName) { + searchParams.set('flowName', flowName); + } + + return { search: searchParams.toString() }; + }; + + const onDuplicateFlow = () => { + if (pageInfo?.currentPage > 1) { + navigate(getPathWithSearchParams(1, flowName)); + } else { + fetchFlows(); + } + }; + const fetchData = React.useMemo( () => debounce(fetchFlows, 300), [fetchFlows], @@ -54,21 +89,14 @@ export default function Flows() { }, [fetchData, flowName, page]); React.useEffect( - function resetPageOnSearch() { - // reset search params which only consists of `page` - setSearchParams({}); + function redirectToLastPage() { + if (navigateToLastPage) { + navigate(getPathWithSearchParams(pageInfo.totalPages, flowName)); + } }, - [flowName], + [navigateToLastPage], ); - const flows = data?.data || []; - const pageInfo = data?.meta; - const hasFlows = flows?.length; - - const onSearchChange = React.useCallback((event) => { - setFlowName(event.target.value); - }, []); - return ( @@ -78,7 +106,7 @@ export default function Flows() { - + - {isLoading && ( + {(isLoading || navigateToLastPage) && ( )} {!isLoading && @@ -119,11 +147,11 @@ export default function Flows() { ))} - {!isLoading && !hasFlows && ( + {!isLoading && !navigateToLastPage && !hasFlows && ( )} - {!isLoading && pageInfo && pageInfo.totalPages > 1 && ( - - setSearchParams({ page: page.toString() }) - } - renderItem={(item) => ( - - )} - /> - )} + {!isLoading && + !navigateToLastPage && + pageInfo && + pageInfo.totalPages > 1 && ( + ( + + )} + /> + )} );