Add counters

Author: scastiel

src/app/page.tsx

@@ -1,3 +1,4 @@
+import { StatsDisplay } from '@/app/stats-display'
 import { Button } from '@/components/ui/button'
 import {
   BarChartHorizontalBig,
@@ -41,6 +42,9 @@ export default function HomePage() {
               </Link>
             </Button>
           </div>
+          <p className="mt-12 max-w-[42rem] leading-normal text-muted-foreground text-xl sm:text-2xl sm:leading-8">
+            <StatsDisplay />
+          </p>
         </div>
       </section>
 

src/app/stats-display-actions.ts

@@ -0,0 +1,16 @@
+'use server'
+
+import { getPrisma } from '@/lib/prisma'
+
+export type Stats = {
+  groupsCount: number
+  expensesCount: number
+}
+
+export async function getStatsAction(): Promise<Stats> {
+  'use server'
+  const prisma = await getPrisma()
+  const groupsCount = await prisma.group.count()
+  const expensesCount = await prisma.expense.count()
+  return { groupsCount, expensesCount }
+}

src/app/stats-display.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import { Stats, getStatsAction } from '@/app/stats-display-actions'
+import { useEffect, useState } from 'react'
+
+export function StatsDisplay() {
+  const stats = useStats()
+
+  return (
+    <>
+      Already{' '}
+      <strong>
+        {stats ? <AnimatedCounter count={stats?.groupsCount} /> : '…'}
+      </strong>{' '}
+      groups and <br className="sm:hidden" />
+      <strong>
+        {stats ? <AnimatedCounter count={stats?.expensesCount} /> : '…'}
+      </strong>{' '}
+      expenses created.
+    </>
+  )
+}
+
+function useStats() {
+  const [stats, setStats] = useState<null | Stats>(null)
+
+  useEffect(() => {
+    getStatsAction().then(setStats).catch(console.error)
+  }, [])
+
+  return stats
+}
+
+export function AnimatedCounter({ count }: { count: number }) {
+  const start = count - 10
+  const [current, setCurrent] = useState(start)
+
+  useEffect(() => {
+    if (current < count) {
+      const delay = 200 * (2 - 2 / ((current - start) / (count - start) + 1))
+      setTimeout(() => setCurrent((c) => c + 1), delay)
+    }
+  }, [start, current, count])
+
+  return (
+    <span className="tabular-nums">
+      {current.toLocaleString('en-US', { useGrouping: true })}
+    </span>
+  )
+}