From 49c747ffe53b02bb067e6903643c7e993ed19bd0 Mon Sep 17 00:00:00 2001 From: KacperKoza343 Date: Fri, 25 Oct 2024 16:42:26 +0200 Subject: [PATCH] fix(human-app/frontend/jobs): move debounce to input component --- packages/apps/human-app/frontend/package.json | 1 - .../services/worker/available-jobs-data.ts | 38 ++----------------- .../src/api/services/worker/my-jobs-data.ts | 38 ++----------------- .../apps/human-app/frontend/src/i18n/en.json | 2 +- .../components/escrow-address-search-form.tsx | 11 ++++-- .../shared/helpers/validate-address-schema.ts | 2 +- 6 files changed, 18 insertions(+), 74 deletions(-) diff --git a/packages/apps/human-app/frontend/package.json b/packages/apps/human-app/frontend/package.json index 1b60ce0ce..9367f8ec5 100644 --- a/packages/apps/human-app/frontend/package.json +++ b/packages/apps/human-app/frontend/package.json @@ -44,7 +44,6 @@ "react-imask": "^7.4.0", "react-number-format": "^5.3.4", "react-router-dom": "^6.22.0", - "use-debounce": "^10.0.4", "vite-plugin-svgr": "^4.2.0", "zod": "^3.22.4", "zustand": "^4.5.0" diff --git a/packages/apps/human-app/frontend/src/api/services/worker/available-jobs-data.ts b/packages/apps/human-app/frontend/src/api/services/worker/available-jobs-data.ts index 1ed281356..d030c12e1 100644 --- a/packages/apps/human-app/frontend/src/api/services/worker/available-jobs-data.ts +++ b/packages/apps/human-app/frontend/src/api/services/worker/available-jobs-data.ts @@ -2,8 +2,6 @@ import { useInfiniteQuery, useQuery } from '@tanstack/react-query'; import { z } from 'zod'; import { useParams } from 'react-router-dom'; -import { useDebounce } from 'use-debounce'; -import { useMemo } from 'react'; import { apiClient } from '@/api/api-client'; import { apiPaths } from '@/api/api-paths'; import { stringifyUrlQueryObject } from '@/shared/helpers/stringify-url-query-object'; @@ -50,25 +48,10 @@ const getAvailableJobsTableData = async ( ); }; -const DEBOUNCE_TIME_MS = 500; - export function useGetAvailableJobsData() { - const { - filterParams: { escrow_address, ...filterParams }, - } = useJobsFilterStore(); + const { filterParams } = useJobsFilterStore(); const { address: oracle_address } = useParams<{ address: string }>(); - const [debouncedEscrowAddress] = useDebounce( - escrow_address, - DEBOUNCE_TIME_MS - ); - const dto = useMemo( - () => ({ - ...filterParams, - oracle_address: oracle_address ?? '', - escrow_address: debouncedEscrowAddress, - }), - [filterParams, oracle_address, debouncedEscrowAddress] - ); + const dto = { ...filterParams, oracle_address: oracle_address ?? '' }; return useQuery({ queryKey: ['availableJobs', dto], @@ -77,22 +60,9 @@ export function useGetAvailableJobsData() { } export function useInfiniteGetAvailableJobsData() { - const { - filterParams: { escrow_address, ...filterParams }, - } = useJobsFilterStore(); + const { filterParams } = useJobsFilterStore(); const { address: oracle_address } = useParams<{ address: string }>(); - const [debouncedEscrowAddress] = useDebounce( - escrow_address, - DEBOUNCE_TIME_MS - ); - const dto = useMemo( - () => ({ - ...filterParams, - oracle_address: oracle_address ?? '', - escrow_address: debouncedEscrowAddress, - }), - [filterParams, oracle_address, debouncedEscrowAddress] - ); + const dto = { ...filterParams, oracle_address: oracle_address ?? '' }; return useInfiniteQuery({ initialPageParam: 0, diff --git a/packages/apps/human-app/frontend/src/api/services/worker/my-jobs-data.ts b/packages/apps/human-app/frontend/src/api/services/worker/my-jobs-data.ts index 902c20d91..947c83747 100644 --- a/packages/apps/human-app/frontend/src/api/services/worker/my-jobs-data.ts +++ b/packages/apps/human-app/frontend/src/api/services/worker/my-jobs-data.ts @@ -2,8 +2,6 @@ import { useInfiniteQuery, useQuery } from '@tanstack/react-query'; import { z } from 'zod'; import { useParams } from 'react-router-dom'; -import { useMemo } from 'react'; -import { useDebounce } from 'use-debounce'; import { apiClient } from '@/api/api-client'; import { apiPaths } from '@/api/api-paths'; import { stringifyUrlQueryObject } from '@/shared/helpers/stringify-url-query-object'; @@ -50,25 +48,10 @@ const getMyJobsTableData = async (dto: GetMyJobTableDataDto) => { ); }; -const DEBOUNCE_TIME_MS = 500; - export function useGetMyJobsData() { - const { - filterParams: { escrow_address, ...filterParams }, - } = useMyJobsFilterStore(); + const { filterParams } = useMyJobsFilterStore(); const { address: oracle_address } = useParams<{ address: string }>(); - const [debouncedEscrowAddress] = useDebounce( - escrow_address, - DEBOUNCE_TIME_MS - ); - const dto = useMemo( - () => ({ - ...filterParams, - oracle_address: oracle_address ?? '', - escrow_address: debouncedEscrowAddress, - }), - [filterParams, oracle_address, debouncedEscrowAddress] - ); + const dto = { ...filterParams, oracle_address: oracle_address ?? '' }; return useQuery({ queryKey: ['myJobs', dto], @@ -77,22 +60,9 @@ export function useGetMyJobsData() { } export function useInfiniteGetMyJobsData() { - const { - filterParams: { escrow_address, ...filterParams }, - } = useMyJobsFilterStore(); + const { filterParams } = useMyJobsFilterStore(); const { address: oracle_address } = useParams<{ address: string }>(); - const [debouncedEscrowAddress] = useDebounce( - escrow_address, - DEBOUNCE_TIME_MS - ); - const dto = useMemo( - () => ({ - ...filterParams, - oracle_address: oracle_address ?? '', - escrow_address: debouncedEscrowAddress, - }), - [filterParams, oracle_address, debouncedEscrowAddress] - ); + const dto = { ...filterParams, oracle_address: oracle_address ?? '' }; return useInfiniteQuery({ initialPageParam: 0, diff --git a/packages/apps/human-app/frontend/src/i18n/en.json b/packages/apps/human-app/frontend/src/i18n/en.json index 01b6cb8cb..fee4a3d93 100644 --- a/packages/apps/human-app/frontend/src/i18n/en.json +++ b/packages/apps/human-app/frontend/src/i18n/en.json @@ -35,7 +35,7 @@ "jsonRpcError": "JSON-RPC error", "unsupportedNetwork": "Network selected in wallet is unsupported.", "unsupportedNetworkWithName": "Network '{{networkName}}' is unsupported.", - "invalidAddress": "Please enter a valid escrow address." + "invalidEscrowAddress": "Please enter a valid escrow address." }, "components": { "multiSelect": { diff --git a/packages/apps/human-app/frontend/src/pages/worker/jobs/components/escrow-address-search-form.tsx b/packages/apps/human-app/frontend/src/pages/worker/jobs/components/escrow-address-search-form.tsx index 2fb4a90f1..03feb7f3d 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/jobs/components/escrow-address-search-form.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/jobs/components/escrow-address-search-form.tsx @@ -5,6 +5,7 @@ import { zodResolver } from '@hookform/resolvers/zod'; import { z } from 'zod'; import { useEffect } from 'react'; import Grid from '@mui/material/Grid'; +import debounce from 'lodash/debounce'; import { useColorMode } from '@/hooks/use-color-mode'; import { Input } from '@/components/data-entry/input'; import { addressSchemaOrEmptyString } from '@/shared/helpers/validate-address-schema'; @@ -35,12 +36,16 @@ export function EscrowAddressSearchForm({ ), }); + const debouncedUpdater = debounce((value: string) => { + if (updater) updater(value); + }, 500); + useEffect(() => { const subscription = methods.watch(() => { void methods.trigger('searchValue').then((isSearchValueValid) => { const inputValue = methods.getValues('searchValue'); - if (updater && isSearchValueValid) { - updater(inputValue); + if (isSearchValueValid) { + debouncedUpdater(inputValue); } }); }); @@ -48,7 +53,7 @@ export function EscrowAddressSearchForm({ return () => { subscription.unsubscribe(); }; - }, [methods, updater]); + }, [debouncedUpdater, methods, updater]); return (