debounce search

backend/custom_admin/src/components/schedule-builder/add-item-modal/add-custom-event.tsx

@@ -149,7 +149,7 @@ const CustomByHand = ({ onCreate }) => {
           <option value="custom">Custom</option>
         </select>
       </div>
-      <button onClick={create} className="btn w-full">
+      <button onClick={create} className="btn w-full mt-3">
         Create
       </button>
     </>

backend/custom_admin/src/components/schedule-builder/add-item-modal/keynote-preview.tsx

@@ -6,7 +6,7 @@ import { InfoRecap } from "./info-recap";
 
 export const KeynotePreview = ({ keynote }: { keynote: Keynote }) => {
   const conferenceId = useCurrentConference();
-  const { data } = useAddItemModal();
+  const { data, close } = useAddItemModal();
   const [createScheduleItem] = useCreateScheduleItemMutation();
 
   const onAddToSchedule = async () => {
@@ -21,6 +21,7 @@ export const KeynotePreview = ({ keynote }: { keynote: Keynote }) => {
         },
       },
     });
+    close();
   };
 
   return (

backend/custom_admin/src/components/schedule-builder/add-item-modal/proposal-preview.tsx

@@ -25,7 +25,7 @@ export const ProposalPreview = ({ proposal }: Props) => {
 
 const AddActions = ({ proposal }: { proposal: Proposal }) => {
   const conferenceId = useCurrentConference();
-  const { data } = useAddItemModal();
+  const { data, close } = useAddItemModal();
   const [createScheduleItem] = useCreateScheduleItemMutation();
   const languages = proposal.languages;
   const onCreate = async (language: Language) => {
@@ -42,6 +42,7 @@ const AddActions = ({ proposal }: { proposal: Proposal }) => {
         },
       },
     });
+    close();
   };
 
   return (

backend/custom_admin/src/components/schedule-builder/add-item-modal/search-event.tsx

@@ -1,28 +1,54 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { useCurrentConference } from "../../utils/conference";
+import { useDebounce } from "../../utils/use-debounce";
 import { KeynotePreview } from "./keynote-preview";
 import { ProposalPreview } from "./proposal-preview";
-import { useSearchEventsQuery } from "./search-events.generated";
+import { useSearchEventsLazyQuery } from "./search-events.generated";
 
 export const SearchEvent = () => {
+  const searchInputRef = useRef<HTMLInputElement>(null);
   const conferenceId = useCurrentConference();
+
   const [searchQuery, setSearchQuery] = useState("");
-  const { data, loading } = useSearchEventsQuery({
-    variables: { conferenceId, query: searchQuery },
-    skip: !searchQuery,
+  const debouncedSearch = useDebounce(searchQuery, 300);
+  const [runSearch, { data, loading }] = useSearchEventsLazyQuery({
     returnPartialData: true,
   });
+
   const changeSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchQuery(e.target.value);
   };
+
+  useEffect(() => {
+    if (!searchInputRef.current) {
+      return;
+    }
+    searchInputRef.current.focus();
+  }, []);
+
+  useEffect(() => {
+    if (debouncedSearch) {
+      console.log("running search", debouncedSearch);
+
+      runSearch({
+        variables: {
+          conferenceId,
+          query: debouncedSearch,
+        },
+      });
+    } else {
+    }
+  }, [debouncedSearch]);
+
   return (
     <>
       <div className="mb-2">
         <strong>Search proposal / keynote</strong>
       </div>
       <div>
         <input
+          ref={searchInputRef}
           onChange={changeSearch}
           className="w-full p-3 border"
           type="text"
@@ -35,7 +61,7 @@ export const SearchEvent = () => {
         {!loading && data?.searchEvents.length === 0 && (
           <span>No events found</span>
         )}
-        {data?.searchEvents.length > 0 && (
+        {debouncedSearch && data?.searchEvents.length > 0 && (
           <ul>
             {data.searchEvents.map((event) => {
               if (event.__typename === "Proposal") {

backend/custom_admin/src/components/utils/use-debounce.ts

@@ -0,0 +1,17 @@
+import { useState, useEffect } from "react";
+
+export function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}