fix(human-app/frontend/jobs): move debounce to input component

humanprotocol · Oct 25, 2024 · 49c747f · 49c747f
1 parent 0c4a3c5
commit 49c747f
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 74 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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/...s/apps/human-app/frontend/src/pages/worker/jobs/components/escrow-address-search-form.tsx b/...s/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,20 +36,24 @@ 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);
         }
       });
     });
 
     return () => {
       subscription.unsubscribe();
     };
-  }, [methods, updater]);
+  }, [debouncedUpdater, methods, updater]);
 
   return (
     <Grid

diff --git a/packages/apps/human-app/frontend/src/shared/helpers/validate-address-schema.ts b/packages/apps/human-app/frontend/src/shared/helpers/validate-address-schema.ts
@@ -9,6 +9,6 @@ export const addressSchemaOrEmptyString = z.string().refine(
     return /^0x[0-9a-fA-F]{40}$/.test(value);
   },
   {
-    message: t('errors.invalidAddress'),
+    message: t('errors.invalidEscrowAddress'),
   }
 );