Microsave

src/views/Catalog.jsx

@@ -1,4 +1,4 @@
-import { useContext } from "react";
+import { useEffect, useContext } from "react";
 import StoreContext from "../ctx/StoreContext.jsx";
 import JobContext from "../ctx/JobContext.jsx";
 
@@ -16,14 +16,25 @@ export default function Catalog() {
 
   const { state: store, updateStore } = useContext(StoreContext);
 
+  const handleSearchChange = (e) =>
+    updateStore({ catalogSearch: e.target.value });
+
+  const handleSearchClear = () => updateStore({ catalogSearch: "" });
+
+  useEffect(() => {
+    return function unmount() {
+      handleSearchClear();
+    };
+  }, []);
+
   return (
     <div className="catalog">
-      <CatalogSearch />
-      <TextField
-          label="Search Catalog"
-          type="search"
-          variant="filled"
-        />
+      <CatalogSearch
+        onChange={handleSearchChange}
+        onClear={handleSearchClear}
+        clearOnUnmount
+      />
+      <h6>{store.catalogSearch}</h6>
     </div>
   );
 }