Add reset button to SearchBar (#269)

* feat: Add cancel button to search bar for resetting search query * Format * Replaced icon * Update icon --------- Co-authored-by: Jason Zheng <jasonz4200@gmail.com>
cornellh4i · Jun 20, 2024 · f82633a · f82633a
1 parent 744d717
commit f82633a
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 0 deletions.
diff --git a/frontend/src/components/atoms/SearchBar.tsx b/frontend/src/components/atoms/SearchBar.tsx
@@ -1,6 +1,7 @@
 import React, { ChangeEvent, FormEvent } from "react";
 import { Box, TextField, InputAdornment, IconButton } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
+import ClearIcon from "@mui/icons-material/Clear";
 
 interface SearchBarProps {
   onSubmit: any;
@@ -25,6 +26,21 @@ const SearchBar = ({ onSubmit, ...props }: SearchBarProps) => {
         InputProps={{
           endAdornment: (
             <InputAdornment position="end">
+              {props.showCancelButton && (
+                <div className="flex flex-row items-center">
+                  <IconButton
+                    type="button"
+                    aria-label="cancel"
+                    edge="end"
+                    onClick={() => {
+                      props.resetSearch();
+                    }}
+                  >
+                    <ClearIcon />
+                  </IconButton>
+                  <div className="ml-3 text-gray-400">|</div>
+                </div>
+              )}
               <IconButton type="submit" aria-label="search" edge="end">
                 <SearchIcon />
               </IconButton>

diff --git a/frontend/src/components/organisms/ManageAttendees.tsx b/frontend/src/components/organisms/ManageAttendees.tsx
@@ -209,6 +209,11 @@ const AttendeesTable = ({
     handleSearchQuery(value);
   };
 
+  const handleResetSearch = () => {
+    setValue("");
+    handleSearchQuery("");
+  };
+
   return (
     <div>
       {attendeesStatus === "PENDING" ? (
@@ -248,6 +253,8 @@ const AttendeesTable = ({
           value={value}
           onChange={handleChange}
           onSubmit={handleSubmit}
+          resetSearch={handleResetSearch}
+          showCancelButton={value !== ""}
         />
       </div>
       <Card size="table">

diff --git a/frontend/src/components/organisms/ManageUsers.tsx b/frontend/src/components/organisms/ManageUsers.tsx
@@ -128,6 +128,11 @@ const Active = ({
     handleNewSearchQuery(value);
   };
 
+  const handleResetSearch = () => {
+    setValue("");
+    handleNewSearchQuery("");
+  };
+
   return (
     <div>
       <div className="pb-5 w-full sm:w-[600px]">
@@ -136,6 +141,8 @@ const Active = ({
           value={value}
           onChange={handleChange}
           onSubmit={handleSubmitSearch}
+          resetSearch={handleResetSearch}
+          showCancelButton={value !== ""}
         />
       </div>
       <Card size="table">
@@ -247,6 +254,11 @@ const Blacklisted = ({
     handleNewSearchQuery(value);
   };
 
+  const handleResetSearch = () => {
+    setValue("");
+    handleNewSearchQuery("");
+  };
+
   return (
     <div>
       <div className="pb-5 w-full sm:w-[600px]">
@@ -255,6 +267,8 @@ const Blacklisted = ({
           value={value}
           onChange={handleChange}
           onSubmit={handleSubmitSearch}
+          resetSearch={handleResetSearch}
+          showCancelButton={value !== ""}
         />
       </div>
       <Card size="table">