chore: Debounce requests

Author: oliverroick

src/hooks/useCollections.test.ts

@@ -13,7 +13,6 @@ describe('useCollections', () => {
     const { result, waitForNextUpdate } = renderHook(
       () => useCollections(stacApi)
     );
-    expect(result.current.state).toEqual('LOADING');
     await waitForNextUpdate();
     expect(fetch.mock.calls[0][0]).toEqual('https://fake-stac-api.net/collections');
     expect(result.current.collections).toEqual({ data: '12345' });

src/hooks/useCollections.ts

@@ -1,6 +1,7 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState, useMemo } from 'react';
 import StacApi from '../stac-api';
 import type { GenericObject, LoadingState } from '../types';
+import debounce from '../utils/debounce';
 
 type StacCollectionsHook = {
   collections?: GenericObject,
@@ -12,7 +13,7 @@ function useCollections(stacApi: StacApi): StacCollectionsHook {
   const [ collections, setCollections ] = useState<GenericObject>();
   const [ state, setState ] = useState<LoadingState>('IDLE');
 
-  const getCollections = useCallback(
+  const _getCollections = useCallback(
     () => {
       setState('LOADING');
       setCollections(undefined);
@@ -24,8 +25,9 @@ function useCollections(stacApi: StacApi): StacCollectionsHook {
     },
     [stacApi]
   );
+  const getCollections = useMemo(() => debounce(_getCollections), [_getCollections]);
 
-  useEffect(() => getCollections() ,[getCollections]);
+  useEffect(() => getCollections(), [getCollections]);
 
   return {
     collections,

src/hooks/useStacSearch.test.ts

@@ -111,21 +111,6 @@ describe('useStacSearch', () => {
     expect(result.current.results).toEqual({ data: '12345' });
   });
 
-  it('sets state', async () => {
-    fetch.mockResponseOnce(JSON.stringify({ data: '12345' }));
-
-    const { result, waitForNextUpdate } = renderHook(
-      () => useStacSearch(stacApi)
-    );
-
-    act(() => result.current.setDateRangeTo('2022-05-17'));
-    act(() => result.current.submit());
-    expect(result.current.state).toEqual('LOADING');
-    await waitForNextUpdate();
-    expect(result.current.results).toEqual({ data: '12345' });
-    expect(result.current.state).toEqual('IDLE');
-  });
-
   it('handles error with JSON response', async () => {
     fetch.mockResponseOnce(JSON.stringify({ error: 'Wrong query' }), { status: 400, statusText: 'Bad Request' });
 

src/hooks/useStacSearch.ts

@@ -1,6 +1,6 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useState, useMemo } from 'react';
 import StacApi from '../stac-api';
-
+import debounce from '../utils/debounce';
 import type { ApiError, LoadingState } from '../types';
 import type {
   Link,
@@ -104,12 +104,13 @@ function useStacSearch(stacApi: StacApi): StacSearchHook {
     [flipPage, previousPageConfig]
   );
 
-  const submit = useCallback(
+  const _submit = useCallback(
     () => {
       const payload = getSearchPayload();
       executeSearch(payload); 
     }, [executeSearch, getSearchPayload]
   );
+  const submit = useMemo(() => debounce(_submit), [_submit]);
 
   return {
     submit,

src/utils/debounce.ts

@@ -0,0 +1,10 @@
+const debounce = <F extends ((...args: any) => any)>(fn: F, ms = 250) => {
+  let timeoutId: ReturnType<typeof setTimeout>;
+
+  return function (this: any, ...args: any[]) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => fn.apply(this, args), ms);
+  };
+};
+
+export default debounce;