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/lib/prisma.ts

@@ -1,20 +1,21 @@
 import { PrismaClient } from '@prisma/client'
 
-let prisma: PrismaClient
+declare const global: Global & { prisma?: PrismaClient }
 
-export async function getPrisma() {
+export let p: PrismaClient = undefined as any as PrismaClient
+
+if (typeof window === 'undefined') {
   // await delay(1000)
-  if (!prisma) {
-    if (process.env.NODE_ENV === 'production') {
-      prisma = new PrismaClient()
-    } else {
-      if (!(global as any).prisma) {
-        ;(global as any).prisma = new PrismaClient({
-          // log: [{ emit: 'stdout', level: 'query' }],
-        })
-      }
-      prisma = (global as any).prisma
+  if (process.env['NODE_ENV'] === 'production') {
+    p = new PrismaClient()
+  } else {
+    if (!global.prisma) {
+      global.prisma = new PrismaClient({
+        // log: [{ emit: 'stdout', level: 'query' }],
+      })
     }
+    p = global.prisma
   }
-  return prisma
 }
+
+export const prisma = p