Implement "infinite scroll" for expenses (#95)

* Extract ExpenseCard vom ExpenseList

* Implement simple pagination of expenses (see #30)

- display only this year's entries by default
- a "Show more" button reveals all expenses

* Turn getPrisma() into constant "prisma"

- getPrisma() is not async and doesn't need to be awaited
- turn getPrisma() into exported constant "prisma"

* Select fields to be returned by getGroupExpenses()

- make JSON more concise and less redundant
- some properties were removed (i.e.instead of "expense.paidById" use "expense.paidBy.id")

* Remove "participants" from ExpenseCard

- no need to search for participant by id to get it's name
- name property is already present in expense

* Add option to fetch a slice of group expenses

- specify offset and length to get expenses for [offset, offset+length[
- add function to get total number of group expenses

* Add api route for client to fetch group expenses

* Remove "Show more" button from expense list

* Implement infinite scroll

- in server component Page
  - only load first 200 expenses max
  - pass preloaded expenses and total count

- in client component ExpenseList, if there are more expenses to show
  - test if there are more expenses
  - append preloading "skeletons" to end of list
  - fetch more expenses when last item in list comes into view
  - after each fetch increase fetch-length by factor 1.5
    - rationale: db fetch usually is not the issue here, the longer the list gets, the longer react needs to redraw

* Use server action instead of api endpoint

* Fixes

---------

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

src/app/groups/[groupId]/expenses/page.tsx

@@ -11,7 +11,11 @@ import {
   CardTitle,
 } from '@/components/ui/card'
 import { Skeleton } from '@/components/ui/skeleton'
-import { getCategories, getGroupExpenses } from '@/lib/api'
+import {
+  getCategories,
+  getGroupExpenseCount,
+  getGroupExpenses,
+} from '@/lib/api'
 import { env } from '@/lib/env'
 import { Download, Plus } from 'lucide-react'
 import { Metadata } from 'next'
@@ -91,7 +95,7 @@ export default async function GroupExpensesPage({
               </div>
             ))}
           >
-            <Expenses groupId={groupId} />
+            <Expenses group={group} />
           </Suspense>
         </CardContent>
       </Card>
@@ -101,14 +105,22 @@ export default async function GroupExpensesPage({
   )
 }
 
-async function Expenses({ groupId }: { groupId: string }) {
-  const group = await cached.getGroup(groupId)
-  if (!group) notFound()
-  const expenses = await getGroupExpenses(group.id)
+type Props = {
+  group: NonNullable<Awaited<ReturnType<typeof cached.getGroup>>>
+}
+
+async function Expenses({ group }: Props) {
+  const expenseCount = await getGroupExpenseCount(group.id)
+
+  const expenses = await getGroupExpenses(group.id, {
+    offset: 0,
+    length: 200,
+  })
 
   return (
     <ExpenseList
-      expenses={expenses}
+      expensesFirstPage={expenses}
+      expenseCount={expenseCount}
       groupId={group.id}
       currency={group.currency}
       participants={group.participants}