UI: Added Machine List Search Bar

pkgs/ui/src/components/table/searchBar.tsx

@@ -1,29 +1,107 @@
 "use client";
 
-import { ChangeEvent, SetStateAction, Dispatch } from "react";
+import {
+  SetStateAction,
+  Dispatch,
+  useState,
+  useEffect,
+  useRef,
+  useMemo,
+} from "react";
 import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
 import SearchIcon from "@mui/icons-material/Search";
+import { useDebounce } from "../hooks/useDebounce";
+import { TableData } from "@/data/nodeData";
+import {
+  Autocomplete,
+  Box,
+  Container,
+  InputAdornment,
+  Stack,
+  TextField,
+} from "@mui/material";
 
 export interface SearchBarProps {
-  search: string;
-  setSearch: Dispatch<SetStateAction<string>>;
+  tableData: TableData[];
+  setFilteredList: Dispatch<SetStateAction<TableData[]>>;
 }
 
 export function SearchBar(props: SearchBarProps) {
-  const { search, setSearch } = props;
-  const handleSearch = (event: ChangeEvent<HTMLInputElement>) => {
-    setSearch(event.target.value);
+  let { tableData, setFilteredList } = props;
+  const [search, setSearch] = useState<string>("");
+  const debouncedSearch = useDebounce(search, 250);
+
+  // Define a function to handle the Esc key press
+  const handleEsc = (event: any) => {
+    if (event.key === "Escape") {
+      setSearch("");
+      setFilteredList(tableData);
+    }
   };
 
+  useEffect(() => {
+    if (debouncedSearch) {
+      const filtered: TableData[] = tableData.filter((row) => {
+        return row.name.toLowerCase().includes(debouncedSearch.toLowerCase());
+      });
+      setFilteredList(filtered);
+    }
+  }, [debouncedSearch]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.value === "") {
+      setFilteredList(tableData);
+    }
+    setSearch(e.target.value);
+  };
+
+  const suggestions = useMemo(
+    () => tableData.map((row) => row.name),
+    [tableData],
+  );
+
   return (
-    <label htmlFor="search">
-      <Tooltip title="Filter list">
-        <IconButton>
-          <SearchIcon />
-        </IconButton>
-      </Tooltip>
-      <input id="search" type="text" value={search} onChange={handleSearch} />
-    </label>
+    <Autocomplete
+      freeSolo
+      options={suggestions}
+      onChange={(event, value) => {
+        // do something with the selected value
+        if (value === null) {
+          setSearch("");
+          setFilteredList(tableData);
+        } else {
+          setSearch(value);
+        }
+      }}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          fullWidth
+          label="Search"
+          variant="outlined"
+          value={search}
+          onKeyDown={handleEsc}
+          onChange={handleInputChange}
+          autoComplete="nickname"
+          InputProps={{
+            ...params.InputProps,
+            endAdornment: (
+              <InputAdornment position="end">
+                <IconButton>
+                  <SearchIcon />
+                </IconButton>
+              </InputAdornment>
+            ),
+          }}
+        >
+          {/* {suggestions.map((item, index) => (
+                <option key={index} onClick={() => handleSelect(item)}>
+                  {item}
+                </option>
+              ))} */}
+        </TextField>
+      )}
+    />
   );
 }