Added search bar for expense list page (#52)

* Added search bar for expense list page

* Change search input styling

---------

Co-authored-by: Sebastien Castiel <sebastien@castiel.me>

src/app/groups/[groupId]/expenses/expense-list.tsx

@@ -1,6 +1,7 @@
 'use client'
 import { CategoryIcon } from '@/app/groups/[groupId]/expenses/category-icon'
 import { Button } from '@/components/ui/button'
+import { SearchBar } from '@/components/ui/search-bar'
 import { getGroupExpenses } from '@/lib/api'
 import { cn } from '@/lib/utils'
 import { Expense, Participant } from '@prisma/client'
@@ -8,7 +9,7 @@ import dayjs, { type Dayjs } from 'dayjs'
 import { ChevronRight } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
-import { Fragment, useEffect } from 'react'
+import { Fragment, useEffect, useState } from 'react'
 
 type Props = {
   expenses: Awaited<ReturnType<typeof getGroupExpenses>>
@@ -63,6 +64,7 @@ export function ExpenseList({
   participants,
   groupId,
 }: Props) {
+  const [searchText, setSearchText] = useState('')
   useEffect(() => {
     const activeUser = localStorage.getItem('newGroup-activeUser')
     const newUser = localStorage.getItem(`${groupId}-newUser`)
@@ -86,9 +88,10 @@ export function ExpenseList({
   const router = useRouter()
 
   const groupedExpensesByDate = getGroupedExpensesByDate(expenses)
-
   return expenses.length > 0 ? (
-    Object.values(EXPENSE_GROUPS).map((expenseGroup: string) => {
+    <>
+      <SearchBar onChange={(e) => setSearchText(e.target.value)} />
+      {Object.values(EXPENSE_GROUPS).map((expenseGroup: string) => {
         const groupExpenses = groupedExpensesByDate[expenseGroup]
         if (!groupExpenses) return null
         return (
@@ -100,7 +103,13 @@ export function ExpenseList({
             >
               {expenseGroup}
             </div>
-          {groupExpenses.map((expense: any) => (
+            {groupExpenses
+              .filter(
+                (exp) =>
+                  exp.title.toLowerCase().match(searchText.toLowerCase()) !==
+                  null,
+              )
+              .map((expense: any) => (
                 <div
                   key={expense.id}
                   className={cn(
@@ -108,7 +117,9 @@ export function ExpenseList({
                     expense.isReimbursement && 'italic',
                   )}
                   onClick={() => {
-                router.push(`/groups/${groupId}/expenses/${expense.id}/edit`)
+                    router.push(
+                      `/groups/${groupId}/expenses/${expense.id}/edit`,
+                    )
                   }}
                 >
                   <CategoryIcon
@@ -117,13 +128,17 @@ export function ExpenseList({
                   />
                   <div className="flex-1">
                     <div
-                  className={cn('mb-1', expense.isReimbursement && 'italic')}
+                      className={cn(
+                        'mb-1',
+                        expense.isReimbursement && 'italic',
+                      )}
                     >
                       {expense.title}
                     </div>
                     <div className="text-xs text-muted-foreground">
                       Paid by{' '}
-                  <strong>{getParticipant(expense.paidById)?.name}</strong> for{' '}
+                      <strong>{getParticipant(expense.paidById)?.name}</strong>{' '}
+                      for{' '}
                       {expense.paidFor.map((paidFor: any, index: number) => (
                         <Fragment key={index}>
                           {index !== 0 && <>, </>}
@@ -157,7 +172,9 @@ export function ExpenseList({
                     className="self-center hidden sm:flex"
                     asChild
                   >
-                <Link href={`/groups/${groupId}/expenses/${expense.id}/edit`}>
+                    <Link
+                      href={`/groups/${groupId}/expenses/${expense.id}/edit`}
+                    >
                       <ChevronRight className="w-4 h-4" />
                     </Link>
                   </Button>
@@ -165,7 +182,8 @@ export function ExpenseList({
               ))}
           </div>
         )
-    })
+      })}
+    </>
   ) : (
     <p className="px-6 text-sm py-6">
       Your group doesn’t contain any expense yet.{' '}

src/components/ui/search-bar.tsx

@@ -0,0 +1,33 @@
+import * as React from "react"
+
+import {Input} from "@/components/ui/input";
+import {cn} from "@/lib/utils";
+import {
+  Search
+} from 'lucide-react'
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const SearchBar = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    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
+          )}
+          ref={ref}
+          placeholder="Search for an expense…"
+          {...props}
+        />
+      </div>
+    )
+  }
+)
+SearchBar.displayName = "SearchBar"
+
+export { SearchBar }