Generalized filter

Client/src/Components/Inputs/Search/index.jsx

@@ -9,12 +9,13 @@ import SearchIcon from "../../../assets/icons/search.svg?react";
  * @param {Object} props
  * @param {string} props.id - Unique identifier for the Autocomplete component
  * @param {Array<Object>} props.options - Options to display in the Autocomplete dropdown
+ * @param {string} props.filteredBy - Key to access the option label from the options
  * @param {string} props.value - Current input value for the Autocomplete
  * @param {Function} props.handleChange - Function to call when the input changes
  * @param {Object} props.sx - Additional styles to apply to the component
  * @returns {JSX.Element} The rendered Search component
  */
-const Search = ({ id, options, value, handleChange, sx }) => {
+const Search = ({ id, options, filteredBy, value, handleChange, sx }) => {
   const theme = useTheme();
 
   return (
@@ -28,7 +29,7 @@ const Search = ({ id, options, value, handleChange, sx }) => {
       freeSolo
       disableClearable
       options={options}
-      getOptionLabel={(option) => option.name}
+      getOptionLabel={(option) => option[filteredBy]}
       renderInput={(params) => (
         <TextField
           {...params}
@@ -68,11 +69,11 @@ const Search = ({ id, options, value, handleChange, sx }) => {
       )}
       filterOptions={(options, { inputValue }) => {
         const filtered = options.filter((option) =>
-          option.name.toLowerCase().includes(inputValue.toLowerCase())
+          option[filteredBy].toLowerCase().includes(inputValue.toLowerCase())
         );
 
         if (filtered.length === 0) {
-          return [{ name: "No monitors found", noOptions: true }];
+          return [{ [filteredBy]: "No monitors found", noOptions: true }];
         }
         return filtered;
       }}
@@ -91,7 +92,7 @@ const Search = ({ id, options, value, handleChange, sx }) => {
                 : {}
             }
           >
-            {option.name}
+            {option[filteredBy]}
           </ListItem>
         );
       }}
@@ -127,11 +128,8 @@ const Search = ({ id, options, value, handleChange, sx }) => {
 
 Search.propTypes = {
   id: PropTypes.string,
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string.isRequired,
-    })
-  ).isRequired,
+  options: PropTypes.array.isRequired,
+  filteredBy: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
   handleChange: PropTypes.func.isRequired,
   sx: PropTypes.object,

Client/src/Components/Search/index.jsx

@@ -1,49 +0,0 @@
-import Autocomplete from '@mui/material/Autocomplete';
-import TextField from '@mui/material/TextField';
-import Chip from '@mui/material/Chip';
-import Box from '@mui/material/Box';
-import { useTheme } from "@mui/material";
-
-const teamMembers = [
-  { title: 'John Doe'},
-  { title: 'Jane Smith'},
-  { title: 'Alex Johnson'},
-];
-
-/**
- * @component
- * @returns {JSX.Element}
- */
-
-export default function Search()
- {
-  const theme = useTheme();
-  return (
-    <Box padding={theme.spacing(2)}> {/* Add padding to the container */}
-      <Autocomplete
-        multiple
-        id="tags-outlined"
-        options={teamMembers}
-        getOptionLabel={(option) => option.title}
-        filterSelectedOptions
-        renderInput={(params) => (
-          <TextField
-            {...params}
-            label="Team Members"
-            placeholder="Favorites"
-          />
-        )}
-        renderTags={(value, getTagProps) =>
-          value.map((option) => (
-            <Chip
-              key={option.title}
-              variant="outlined"
-              label={option.title}
-              {...getTagProps({ option })}
-            />
-          ))
-        }
-      />
-    </Box>
-  );
-}

Client/src/Pages/Monitors/Home/index.jsx

@@ -120,6 +120,7 @@ const Monitors = ({ isAdmin }) => {
                   <Box width="25%" minWidth={150} ml="auto">
                     <Search
                       options={monitorState?.monitorsSummary.monitors}
+                      filteredBy="name"
                       value={search}
                       handleChange={setSearch}
                     />