Refactored frontend

src/views/components/CatalogSearch.jsx

@@ -1,42 +0,0 @@
-import { useEffect, useRef } from "react";
-import Paper from "@mui/material/Paper";
-import InputBase from "@mui/material/InputBase";
-import Divider from "@mui/material/Divider";
-import IconButton from "@mui/material/IconButton";
-import MenuIcon from "@mui/icons-material/Menu";
-import SearchIcon from "@mui/icons-material/Search";
-import DirectionsIcon from "@mui/icons-material/Directions";
-import ClearOutlinedIcon from "@mui/icons-material/ClearOutlined";
-
-export default function CatalogSearch(props) {
-  const { onChange, onClear } = props;
-
-  const searchRef = useRef(null);
-
-  const handleClear = () => {
-    searchRef.current.children[0].value = null;
-    searchRef.current.children[0].focus();
-    onClear();
-  };
-
-  return (
-    <Paper component="form" sx={{ display: "flex", alignItems: "center" }}>
-      <InputBase
-        ref={searchRef}
-        sx={{ ml: 1, flex: 1 }}
-        placeholder="Search Catalog"
-        inputProps={{ "aria-label": `search catalog` }}
-        onChange={onChange}
-        fullWidth
-      />
-      <Divider sx={{ height: 26, m: 0.5 }} orientation="vertical" />
-      <IconButton
-        sx={{ p: "10px", mr: 0.5 }}
-        aria-label="clear"
-        onClick={handleClear}
-      >
-        <ClearOutlinedIcon />
-      </IconButton>
-    </Paper>
-  );
-}