CEC-5150: search on fleets in bulk action (#454)

* CEC-5150: search on fleets in bulk action

* add deps

* add deps

* sonar

* sonar

* break out fetch

src/components/SearchSelect/SearchSelect.jsx

@@ -1,36 +1,59 @@
 import * as React from 'react';
 import TextField from '@mui/material/TextField';
-import Autocomplete from '@mui/material/Autocomplete';
+import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
+import CircularProgress from '@mui/material/CircularProgress';
 
 export default function SearchSelect({
   label = "",
   value = "",
   setValue = () => { },
-  getData = () => [],
+  getData = () => new Promise(),
   research = false,
 }) {
   const [open, setOpen] = React.useState(false);
-  const [searchCount, setSearchCount] = React.useState(0);
+  const [loading, setLoading] = React.useState(false);
   const [inputValue, setInputValue] = React.useState("");
-  const [options, setOptions] = React.useState([{ label: value }]);
+  const [options, setOptions] = React.useState([]);
+  const [searchComplete, setSearchComplete] = React.useState(false);
 
   React.useEffect(() => {
-    function canSearch() {
-      if (research || searchCount === 0) {
-        return true;
-      }
-      return false;
+    if (!loading || searchComplete) {
+      return undefined;
     }
 
-    async function fetchData() {
-      setOptions(await getData(value));
+    const debounce = setTimeout(async () => {
+      const data = await getData(inputValue);
+      setOptions(data);
+      if (!research) setSearchComplete(true);
+    }, research ? 500 : 0); // reduce queries while typing
+
+    return () => {
+      clearTimeout(debounce);
+    };
+  }, [research, loading, inputValue, getData, setOptions, searchComplete, setSearchComplete]);
+
+  React.useEffect(() => {
+    if (!research || searchComplete) {
+      return undefined;
     }
 
-    if (!open && canSearch()) {
-      fetchData();
-      setSearchCount((searchCount) => searchCount + 1);
+    setOptions([]);
+  }, [research, open, inputValue, setOptions, searchComplete]);
+
+  React.useEffect(() => {
+    if (searchComplete) {
+      return undefined;
     }
-  }, [open, value, research, searchCount, getData]);
+
+    setLoading(open && options.length === 0);
+    const timeout = setTimeout(() => {
+      setLoading(false);
+    }, 2000); // don't show loading forever
+
+    return () => {
+      clearTimeout(timeout);
+    }
+  }, [searchComplete, open, options, setLoading]);
 
   return (
     <Autocomplete
@@ -43,6 +66,8 @@ export default function SearchSelect({
       onOpen={() => setOpen(true)}
       onClose={() => setOpen(false)}
       options={options}
+      loading={loading}
+      filterOptions={research ? (x) => x : createFilterOptions()}
       renderInput={(params) =>
         <TextField
           {...params}
@@ -50,6 +75,15 @@ export default function SearchSelect({
           name={label}
           variant="outlined"
           margin="normal"
+          InputProps={{
+            ...params.InputProps,
+            endAdornment: (
+              <React.Fragment>
+                {loading ? <CircularProgress color="inherit" size={20} /> : null}
+                {params.InputProps.endAdornment}
+              </React.Fragment>
+            ),
+          }}
         />
       }
     />