CEC-5039: view and update sums_version column (#452)

* CEC-5039: view and update sums_version column

* move async function

* add deps

* useEffect

* add deps

src/components/SearchSelect/SearchSelect.jsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import TextField from '@mui/material/TextField';
+import Autocomplete from '@mui/material/Autocomplete';
+
+export default function SearchSelect({
+  label = "",
+  value = "",
+  setValue = () => { },
+  getData = () => [],
+  research = false,
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [searchCount, setSearchCount] = React.useState(0);
+  const [inputValue, setInputValue] = React.useState("");
+  const [options, setOptions] = React.useState([{ label: value }]);
+
+  React.useEffect(() => {
+    function canSearch() {
+      if (research || searchCount === 0) {
+        return true;
+      }
+      return false;
+    }
+
+    async function fetchData() {
+      setOptions(await getData(value));
+    }
+
+    if (!open && canSearch()) {
+      fetchData();
+      setSearchCount((searchCount) => searchCount + 1);
+    }
+  }, [open, value, research, searchCount, getData]);
+
+  return (
+    <Autocomplete
+      fullWidth
+      value={value}
+      onChange={(_, value) => setValue(value)}
+      inputValue={inputValue}
+      onInputChange={(_, inputValue) => setInputValue(inputValue)}
+      open={open}
+      onOpen={() => setOpen(true)}
+      onClose={() => setOpen(false)}
+      options={options}
+      renderInput={(params) =>
+        <TextField
+          {...params}
+          label={label}
+          name={label}
+          variant="outlined"
+          margin="normal"
+        />
+      }
+    />
+  );
+}

src/components/SearchSelect/index.js

@@ -0,0 +1 @@
+export * from "./SearchSelect";