Fix search functionality (#62)

* Improve README instructions for local setup

* Fix search functionality #61
- use 'includes' for expense filtering

* Ensure expense groups with no matching expenses are hidden after filtering

* Improve README instructions for local setup

README.md

@@ -43,10 +43,10 @@ If you want to contribute financially and help us keep the application free and
 ## Run locally
 
 1. Clone the repository (or fork it if you intend to contribute)
-2. `npm install`
+2. Start a PostgreSQL server. You can run `./scripts/start-local-db.sh` if you don’t have a server already.
-3. Start a PostgreSQL server. You can run `./scripts/start-local-db.sh` if you don’t have a server already.
+3. Copy the file `.env.example` as `.env`
-4. Copy the file `.env.example` as `.env`
+4. Run `npm install` to install dependencies. This will also apply database migrations and update Prisma Client.
-5. `npm run dev`
+5. Run `npm run dev` to start the development server
 
 ## Run in a container
 

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

@@ -92,8 +92,15 @@ export function ExpenseList({
     <>
       <SearchBar onChange={(e) => setSearchText(e.target.value)} />
       {Object.values(EXPENSE_GROUPS).map((expenseGroup: string) => {
-        const groupExpenses = groupedExpensesByDate[expenseGroup]
+        let groupExpenses = groupedExpensesByDate[expenseGroup]
         if (!groupExpenses) return null
+
+        groupExpenses = groupExpenses.filter(({ title }) =>
+          title.toLowerCase().includes(searchText.toLowerCase()),
+        )
+
+        if (groupExpenses.length === 0) return null
+
         return (
           <div key={expenseGroup}>
             <div
@@ -103,13 +110,7 @@ export function ExpenseList({
             >
               {expenseGroup}
             </div>
-            {groupExpenses
+            {groupExpenses.map((expense: any) => (
-              .filter(
-                (exp) =>
-                  exp.title.toLowerCase().match(searchText.toLowerCase()) !==
-                  null,
-              )
-              .map((expense: any) => (
               <div
                 key={expense.id}
                 className={cn(
@@ -117,9 +118,7 @@ export function ExpenseList({
                   expense.isReimbursement && 'italic',
                 )}
                 onClick={() => {
-                    router.push(
+                  router.push(`/groups/${groupId}/expenses/${expense.id}/edit`)
-                      `/groups/${groupId}/expenses/${expense.id}/edit`,
-                    )
                 }}
               >
                 <CategoryIcon
@@ -128,10 +127,7 @@ export function ExpenseList({
                 />
                 <div className="flex-1">
                   <div
-                      className={cn(
+                    className={cn('mb-1', expense.isReimbursement && 'italic')}
-                        'mb-1',
-                        expense.isReimbursement && 'italic',
-                      )}
                   >
                     {expense.title}
                   </div>
@@ -172,9 +168,7 @@ export function ExpenseList({
                   className="self-center hidden sm:flex"
                   asChild
                 >
-                    <Link
+                  <Link href={`/groups/${groupId}/expenses/${expense.id}/edit`}>
-                      href={`/groups/${groupId}/expenses/${expense.id}/edit`}
-                    >
                     <ChevronRight className="w-4 h-4" />
                   </Link>
                 </Button>