From ec87c7f21cfc00b32981dabefb0b4d2a3ab9379d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C4=B1dvan=20Akca?= Date: Tue, 19 Mar 2024 16:56:53 +0300 Subject: [PATCH] feat: introduce useLazyFlows with RQ --- .../web/src/components/AppFlows/index.jsx | 7 ++ packages/web/src/hooks/useLazyFlows.js | 30 ++++++++ packages/web/src/pages/Flows/index.jsx | 76 ++++++++----------- 3 files changed, 70 insertions(+), 43 deletions(-) create mode 100644 packages/web/src/hooks/useLazyFlows.js diff --git a/packages/web/src/components/AppFlows/index.jsx b/packages/web/src/components/AppFlows/index.jsx index bf5f4d8e..7aa5a3ef 100644 --- a/packages/web/src/components/AppFlows/index.jsx +++ b/packages/web/src/components/AppFlows/index.jsx @@ -4,11 +4,14 @@ 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'; + import * as URLS from 'config/urls'; import AppFlowRow from 'components/FlowRow'; import NoResultFound from 'components/NoResultFound'; import useFormatMessage from 'hooks/useFormatMessage'; + const FLOW_PER_PAGE = 10; + const getLimitAndOffset = (page) => ({ limit: FLOW_PER_PAGE, offset: (page - 1) * FLOW_PER_PAGE, @@ -19,6 +22,7 @@ function AppFlows(props) { const [searchParams, setSearchParams] = useSearchParams(); const connectionId = searchParams.get('connectionId') || undefined; const page = parseInt(searchParams.get('page') || '', 10) || 1; + const { data } = useQuery(GET_FLOWS, { variables: { appKey, @@ -26,10 +30,12 @@ function AppFlows(props) { ...getLimitAndOffset(page), }, }); + const getFlows = data?.getFlows || {}; const { pageInfo, edges } = getFlows; const flows = edges?.map(({ node }) => node); const hasFlows = flows?.length; + if (!hasFlows) { return ( ); } + return ( <> {flows?.map((appFlow) => ( diff --git a/packages/web/src/hooks/useLazyFlows.js b/packages/web/src/hooks/useLazyFlows.js new file mode 100644 index 00000000..4769fb26 --- /dev/null +++ b/packages/web/src/hooks/useLazyFlows.js @@ -0,0 +1,30 @@ +import * as React from 'react'; + +import api from 'helpers/api'; +import { useMutation } from '@tanstack/react-query'; + +export default function useFlows({ flowName, page }, { onSuccess }) { + const abortControllerRef = React.useRef(new AbortController()); + + React.useEffect(() => { + abortControllerRef.current = new AbortController(); + + return () => { + abortControllerRef.current?.abort(); + }; + }, [flowName]); + + const query = useMutation({ + mutationFn: async () => { + const { data } = await api.get('/v1/flows', { + params: { name: flowName, page }, + signal: abortControllerRef.current.signal, + }); + + return data; + }, + onSuccess, + }); + + return query; +} diff --git a/packages/web/src/pages/Flows/index.jsx b/packages/web/src/pages/Flows/index.jsx index 462a89eb..c77f72a4 100644 --- a/packages/web/src/pages/Flows/index.jsx +++ b/packages/web/src/pages/Flows/index.jsx @@ -1,6 +1,5 @@ import * as React from 'react'; import { Link, useSearchParams } from 'react-router-dom'; -import { useLazyQuery } from '@apollo/client'; import debounce from 'lodash/debounce'; import Box from '@mui/material/Box'; import Grid from '@mui/material/Grid'; @@ -9,6 +8,7 @@ import CircularProgress from '@mui/material/CircularProgress'; import Divider from '@mui/material/Divider'; import Pagination from '@mui/material/Pagination'; import PaginationItem from '@mui/material/PaginationItem'; + import Can from 'components/Can'; import FlowRow from 'components/FlowRow'; import NoResultFound from 'components/NoResultFound'; @@ -17,45 +17,37 @@ import Container from 'components/Container'; import PageTitle from 'components/PageTitle'; import SearchInput from 'components/SearchInput'; import useFormatMessage from 'hooks/useFormatMessage'; -import { GET_FLOWS } from 'graphql/queries/get-flows'; import * as URLS from 'config/urls'; -const FLOW_PER_PAGE = 10; -const getLimitAndOffset = (page) => ({ - limit: FLOW_PER_PAGE, - offset: (page - 1) * FLOW_PER_PAGE, -}); +import useLazyFlows from 'hooks/useLazyFlows'; + export default function Flows() { const formatMessage = useFormatMessage(); const [searchParams, setSearchParams] = useSearchParams(); const page = parseInt(searchParams.get('page') || '', 10) || 1; const [flowName, setFlowName] = React.useState(''); - const [loading, setLoading] = React.useState(false); - const [getFlows, { data }] = useLazyQuery(GET_FLOWS, { - onCompleted: () => { - setLoading(false); + const [isLoading, setIsLoading] = React.useState(false); + + const { data, mutate } = useLazyFlows( + { flowName, page }, + { + onSuccess: () => { + setIsLoading(false); + }, }, - }); - const fetchData = React.useMemo( - () => - debounce( - (name) => - getFlows({ - variables: { - ...getLimitAndOffset(page), - name, - }, - }), - 300, - ), - [page, getFlows], - ); - React.useEffect( - function fetchFlowsOnSearch() { - setLoading(true); - fetchData(flowName); - }, - [fetchData, flowName], ); + + const fetchData = React.useMemo(() => debounce(mutate, 300), [mutate]); + + React.useEffect(() => { + setIsLoading(true); + + fetchData({ flowName, page }); + + return () => { + fetchData.cancel(); + }; + }, [fetchData, flowName, page]); + React.useEffect( function resetPageOnSearch() { // reset search params which only consists of `page` @@ -63,17 +55,15 @@ export default function Flows() { }, [flowName], ); - React.useEffect(function cancelDebounceOnUnmount() { - return () => { - fetchData.cancel(); - }; - }, []); - const { pageInfo, edges } = data?.getFlows || {}; - const flows = edges?.map(({ node }) => node); + + const flows = data?.data || []; + const pageInfo = data?.meta; const hasFlows = flows?.length; + const onSearchChange = React.useCallback((event) => { setFlowName(event.target.value); }, []); + return ( @@ -116,18 +106,18 @@ export default function Flows() { - {loading && ( + {isLoading && ( )} - {!loading && + {!isLoading && flows?.map((flow) => )} - {!loading && !hasFlows && ( + {!isLoading && !hasFlows && ( )} - {!loading && pageInfo && pageInfo.totalPages > 1 && ( + {!isLoading && pageInfo && pageInfo.totalPages > 1 && (