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 }) { { + setSearchParams({ flowName: event.target.value }); + }, []); + + const getLinkWithSearchParams = (page, flowName) => { + const searchParams = new URLSearchParams(); + + if (page > 1) { + searchParams.set('page', page); + } + 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(); + } + }; + + const onDuplicateFlow = () => { + if (pageInfo?.currentPage > 1) { + navigate(getLinkWithSearchParams(1, flowName)); + } else { + fetchFlows(); + } + }; + const fetchData = React.useMemo( () => debounce(fetchFlows, 300), [fetchFlows], @@ -53,22 +94,6 @@ export default function Flows() { }; }, [fetchData, flowName, page]); - React.useEffect( - function resetPageOnSearch() { - // reset search params which only consists of `page` - setSearchParams({}); - }, - [flowName], - ); - - const flows = data?.data || []; - const pageInfo = data?.meta; - const hasFlows = flows?.length; - - const onSearchChange = React.useCallback((event) => { - setFlowName(event.target.value); - }, []); - return ( @@ -78,7 +103,7 @@ export default function Flows() { - + ))} {!isLoading && !hasFlows && ( @@ -136,13 +161,10 @@ export default function Flows() { sx={{ display: 'flex', justifyContent: 'center', mt: 3 }} page={pageInfo?.currentPage} count={pageInfo?.totalPages} - onChange={(event, page) => - setSearchParams({ page: page.toString() }) - } renderItem={(item) => ( )}