Merge pull request #814 from cultuurnet/feature/III-5846

III-5846 - use debounced value for getOrganizersByWebsiteQuery

src/hooks/useDebounce.tsx

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+
+// see https://github.com/tannerlinsley/react-query/issues/293
+// see https://usehooks.com/useDebounce/
+const useDebounce = (value, delay) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+};
+
+export { useDebounce };

src/pages/organizers/create/steps/UrlStep.tsx

@@ -1,9 +1,10 @@
 import { useRouter } from 'next/router';
-import { FormEvent, useEffect, useMemo, useState } from 'react';
+import { FormEvent, useEffect, useState } from 'react';
 import { Controller, useWatch } from 'react-hook-form';
 import { Trans, useTranslation } from 'react-i18next';
 
 import { useGetOrganizersByWebsiteQuery } from '@/hooks/api/organizers';
+import { useDebounce } from '@/hooks/useDebounce';
 import { SupportedLanguage } from '@/i18n/index';
 import { StepProps } from '@/pages/steps/Steps';
 import { Organizer } from '@/types/Organizer';
@@ -32,16 +33,20 @@ const UrlStep = ({
   const { query } = useRouter();
   const { t, i18n } = useTranslation();
 
+  const [searchInput, setSearchInput] = useState('');
+
   const [watchedUrl] = useWatch({
     control,
     name: ['nameAndUrl.url'],
   });
 
+  const debouncedSearchInput = useDebounce(searchInput, 275);
+
   const getOrganizersByWebsiteQuery = useGetOrganizersByWebsiteQuery(
     {
-      website: watchedUrl,
+      website: debouncedSearchInput,
     },
-    { enabled: !!watchedUrl && isValidUrl(watchedUrl) },
+    { enabled: !!debouncedSearchInput && isValidUrl(debouncedSearchInput) },
   );
 
   const existingOrganizer: Organizer | undefined =
@@ -51,17 +56,15 @@ const UrlStep = ({
   const isUrlAlreadyTaken = errors.nameAndUrl?.url?.type === 'not_unique';
 
   useEffect(() => {
-    if (!isValidUrl(watchedUrl)) {
+    if (!isValidUrl(searchInput)) {
       setError('nameAndUrl.url', { type: 'matches' });
       return;
     }
 
     clearErrors('nameAndUrl.url');
-  }, [watchedUrl, clearErrors, setError]);
+  }, [searchInput, clearErrors, setError]);
 
   useEffect(() => {
-    if (!isValidUrl) return;
-
     if (
       existingOrganizer &&
       parseOfferId(existingOrganizer['@id']) !== query.organizerId
@@ -94,9 +97,11 @@ const UrlStep = ({
                   <Input
                     value={field.value?.url}
                     onChange={(event) => {
+                      const value = (event.target as HTMLInputElement).value;
+                      setSearchInput(value);
                       field.onChange({
                         ...field.value,
-                        url: (event.target as HTMLInputElement).value,
+                        url: value,
                       });
                     }}
                     onBlur={(event: FormEvent<HTMLInputElement>) => {