From 833237b6133112a07592e8b9a045d2a6687d27b1 Mon Sep 17 00:00:00 2001
From: Stefan Hynst <stefan@hynst.at>
Date: Thu, 30 May 2024 03:26:04 +0200
Subject: [PATCH] Add "x" button to cancel search in search bar (#107)

---
 .../[groupId]/expenses/expense-list.tsx       |  2 +-
 src/components/ui/search-bar.tsx              | 40 +++++++++++++------
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/src/app/groups/[groupId]/expenses/expense-list.tsx b/src/app/groups/[groupId]/expenses/expense-list.tsx
index 1c61c47..63f7abe 100644
--- a/src/app/groups/[groupId]/expenses/expense-list.tsx
+++ b/src/app/groups/[groupId]/expenses/expense-list.tsx
@@ -94,7 +94,7 @@ export function ExpenseList({
   const groupedExpensesByDate = getGroupedExpensesByDate(expenses)
   return expenses.length > 0 ? (
     <>
-      <SearchBar onChange={(e) => setSearchText(e.target.value)} />
+      <SearchBar onValueChange={(value) => setSearchText(value)} />
       {Object.values(EXPENSE_GROUPS).map((expenseGroup: string) => {
         let groupExpenses = groupedExpensesByDate[expenseGroup]
         if (!groupExpenses) return null
diff --git a/src/components/ui/search-bar.tsx b/src/components/ui/search-bar.tsx
index 6369c55..b86e730 100644
--- a/src/components/ui/search-bar.tsx
+++ b/src/components/ui/search-bar.tsx
@@ -1,33 +1,49 @@
-import * as React from "react"
+import * as React from 'react'
 
-import {Input} from "@/components/ui/input";
-import {cn} from "@/lib/utils";
-import {
-  Search
-} from 'lucide-react'
+import { Input } from '@/components/ui/input'
+import { cn } from '@/lib/utils'
+import { Search, XCircle } from 'lucide-react'
 
 export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  onValueChange?: (value: string) => void
+}
 
 const SearchBar = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
+  ({ className, type, onValueChange, ...props }, ref) => {
+    const [value, _setValue] = React.useState('')
+
+    const setValue = (v: string) => {
+      _setValue(v)
+      onValueChange && onValueChange(v)
+    }
+
     return (
       <div className="mx-4 sm:mx-6 flex relative">
         <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
         <Input
           type={type}
           className={cn(
-            "pl-10 text-sm focus:text-base bg-muted border-none text-muted-foreground",
-            className
+            'pl-10 text-sm focus:text-base bg-muted border-none text-muted-foreground',
+            className,
           )}
           ref={ref}
           placeholder="Search for an expense…"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
           {...props}
         />
+        <XCircle
+          className={cn(
+            'absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 cursor-pointer',
+            !value && 'hidden',
+          )}
+          onClick={() => setValue('')}
+        />
       </div>
     )
-  }
+  },
 )
-SearchBar.displayName = "SearchBar"
+SearchBar.displayName = 'SearchBar'
 
 export { SearchBar }