Search and clear button

src/components/SchemaSearch.tsx

@@ -1,49 +1,59 @@
-import React, { useState } from "react";
-import { Autocomplete, Button } from "@mantine/core";
+import React, { useState, useEffect } from "react";
+import { MultiSelect } from "@mantine/core";
 import "@/css/SchemaSearch.css";
 
 interface SchemaSearch {
   schemas: string[];
+  clear: boolean;
 }
 
-const SchemaSearch: React.FC<SchemaSearch> = ({ schemas }) => {
+const SchemaSearch: React.FC<SchemaSearch> = ({ schemas, clear }) => {
   const [value, setValue] = useState<string>("");
-  const [selectedSchema, setSelected] = useState<string[]>([]);
+  //const [selectedSchema, setSelected] = useState<string[]>([]);
 
   const filteredSchemas = schemas.filter((schema) =>
     schema.toLowerCase().includes(value.toLowerCase()),
   );
-
+  {
+    /*
   const addSchema = (newSchema: string) => {
     if (!selectedSchema.includes(newSchema)) {
       setSelected([...selectedSchema, newSchema]);
     } else {
       alert("Schema already selected!");
     }
   };
+  */
+  }
 
   const clearSchema = () => {
-    setSelected([]);
+    //setSelected([]);
+    setValue("");
   };
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === "Enter" && filteredSchemas.length > 0) {
       setValue(filteredSchemas[0]);
-      addSchema(filteredSchemas[0]);
+      //addSchema(filteredSchemas[0]);
     }
   };
 
+  useEffect(() => {
+    clearSchema();
+  }, [clear]);
+
   return (
     <div>
-      <Autocomplete
-        label="Search by Schema"
-        placeholder="Start typing a schema name"
+      <MultiSelect
+        label="Schema"
+        placeholder="Schema name"
         data={filteredSchemas}
-        value={value}
-        onChange={setValue}
         onKeyDown={handleKeyDown}
+        searchable
+        size="xs"
       />
       <br />
+      {/*
       {selectedSchema.length > 0 && (
         <div>
           <label>Selected Schema</label>
@@ -52,11 +62,10 @@ const SchemaSearch: React.FC<SchemaSearch> = ({ schemas }) => {
               <li key={index}>{str}</li>
             ))}
           </ul>
-          <Button className="cancel-button" onClick={clearSchema}>
-            Cancel
-          </Button>
+
         </div>
       )}
+      */}
     </div>
   );
 };

src/components/SearchBar.tsx

@@ -2,16 +2,23 @@ import React, { useState } from "react";
 import { eventType, location } from "@/data/dataFilters";
 import "@/css/SearchBar.css";
 import SchemaSearch from "@/components/SchemaSearch";
+import { Button } from "@mantine/core";
 
 interface SearchBarWithFilterProps {
-  setFilteredData: React.Dispatch<
-    React.SetStateAction<MCAPFileInformation[] | undefined>
-  >;
   setSearchFilters: React.Dispatch<React.SetStateAction<SearchFilter>>;
+  setSearch: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-function SearchBarWithFilter({ setSearchFilters }: SearchBarWithFilterProps) {
+function SearchBarWithFilter({
+  setSearchFilters,
+  setSearch,
+}: SearchBarWithFilterProps) {
   const [searchTerm, setSearchTerm] = useState("");
+  const [selectedLocation, setSelectedLocation] = useState("");
+  const [selectedEventType, setSelectedEventType] = useState("");
+  const [beforeDate, setBeforeDate] = useState("");
+  const [afterDate, setAfterDate] = useState("");
+  const [clearSchemas, setClearSchemas] = useState(false);
   // const [filters] = useState({
   //   location: "",
   //   eventType: "",
@@ -98,8 +105,49 @@ function SearchBarWithFilter({ setSearchFilters }: SearchBarWithFilterProps) {
       filename: filt.filename,
       [name]: value,
     }));
+
+    // Update local state based on input
+    switch (name) {
+      case "location":
+        setSelectedLocation(value);
+        break;
+      case "eventType":
+        setSelectedEventType(value);
+        break;
+      case "beforeDate":
+        setBeforeDate(value);
+        break;
+      case "afterDate":
+        setAfterDate(value);
+        break;
+      default:
+        break;
+    }
   }
 
+  // Clear all filters and search term
+  const handleClear = () => {
+    setSearchTerm("");
+    setSearchFilters({
+      notes: "",
+      filename: "",
+      location: "",
+      eventType: "",
+      beforeDate: "",
+      afterDate: "",
+    });
+    setSearchTerm("");
+    setSelectedLocation("");
+    setSelectedEventType("");
+    setBeforeDate("");
+    setAfterDate("");
+    setClearSchemas((prev) => !prev);
+  };
+
+  const handleSearch = () => {
+    setSearch((prev) => !prev);
+  };
+
   return (
     <div className="Search">
       {/* Display Filtered Data */}
@@ -125,6 +173,7 @@ function SearchBarWithFilter({ setSearchFilters }: SearchBarWithFilterProps) {
             Location:
             <select
               name="location"
+              value={selectedLocation}
               onChange={handleFilterChange}
               className="filter-select"
             >
@@ -141,6 +190,7 @@ function SearchBarWithFilter({ setSearchFilters }: SearchBarWithFilterProps) {
             Event Type:
             <select
               name="eventType"
+              value={selectedEventType}
               onChange={handleFilterChange}
               className="filter-select"
             >
@@ -158,9 +208,9 @@ function SearchBarWithFilter({ setSearchFilters }: SearchBarWithFilterProps) {
             <input
               type="date"
               name="beforeDate"
+              value={beforeDate}
               onChange={handleFilterChange}
               className="date-picker"
-              placeholder="Filter by date"
             />
           </label>
 
@@ -169,13 +219,28 @@ function SearchBarWithFilter({ setSearchFilters }: SearchBarWithFilterProps) {
             <input
               type="date"
               name="afterDate"
+              value={afterDate}
               onChange={handleFilterChange}
               className="date-picker"
-              placeholder="Filter by date"
             />
           </label>
 
-          <SchemaSearch schemas={schemas} />
+          <SchemaSearch schemas={schemas} clear={clearSchemas} />
+        </div>
+        <div
+          style={{
+            display: "flex",
+            gap: "10px",
+          }}
+        >
+          {/* Clear Button */}
+          <Button onClick={handleClear} size="xs" variant="light">
+            Clear
+          </Button>
+          {/* Clear Button */}
+          <Button onClick={handleSearch} size="xs">
+            Search
+          </Button>
         </div>
       </div>
     </div>

src/routes/root.tsx

@@ -15,6 +15,7 @@ export default function Root() {
     beforeDate: "",
     afterDate: "",
   });
+  const [search, setSearch] = useState<boolean>(false);
 
   // const fetchData = async (filters: SearchFilter) => {
   //   const { location, date, notes, eventType, filename } = filters;
@@ -157,7 +158,7 @@ export default function Root() {
       setFilteredData(sortedData);
     };
     getData();
-  }, [searchFilters]);
+  }, [search]);
 
   return (
     <>
@@ -171,10 +172,7 @@ export default function Root() {
           />
         </div>
 
-        <SearchBar
-          setFilteredData={setFilteredData}
-          setSearchFilters={setSearchFilters}
-        />
+        <SearchBar setSearchFilters={setSearchFilters} setSearch={setSearch} />
       </div>
       <div className="preview-contain-result">
         <PreviewCard selectedRow={selectedRow} selectedData={selectedData} />