From 27e58ae925e6ba9b94bd1d3c7b430202311b3030 Mon Sep 17 00:00:00 2001 From: "kasia.oczkowska" Date: Wed, 13 Nov 2024 13:43:43 +0000 Subject: [PATCH 1/2] feat: persist pagination and search value on flows page --- .../web/src/components/SearchInput/index.jsx | 4 +- packages/web/src/pages/Flows/index.jsx | 72 ++++++++++++------- 2 files changed, 50 insertions(+), 26 deletions(-) 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) => ( )} From c76366e72e66d4223dd86a7a5fefb90555562e8b Mon Sep 17 00:00:00 2001 From: "kasia.oczkowska" Date: Fri, 15 Nov 2024 10:37:18 +0000 Subject: [PATCH 2/2] feat: introduce improvements --- packages/web/src/pages/Flows/index.jsx | 72 ++++++++++++++------------ 1 file changed, 39 insertions(+), 33 deletions(-) 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 && ( + ( + + )} + /> + )} );