Use tRPC in other group pages (#249)

* Use tRPC in group edition + group layout

* Use tRPC in group modals

* Use tRPC in group stats

* Use tRPC in group activity

src/app/groups/[groupId]/stats/totals.tsx

@@ -2,19 +2,36 @@
 import { TotalsGroupSpending } from '@/app/groups/[groupId]/stats/totals-group-spending'
 import { TotalsYourShare } from '@/app/groups/[groupId]/stats/totals-your-share'
 import { TotalsYourSpendings } from '@/app/groups/[groupId]/stats/totals-your-spending'
-import { getGroup, getGroupExpenses } from '@/lib/api'
+import { Skeleton } from '@/components/ui/skeleton'
 import { useActiveUser } from '@/lib/hooks'
+import { trpc } from '@/trpc/client'
 
-export function Totals({
-  group,
-  expenses,
-  totalGroupSpendings,
-}: {
-  group: NonNullable<Awaited<ReturnType<typeof getGroup>>>
-  expenses: NonNullable<Awaited<ReturnType<typeof getGroupExpenses>>>
-  totalGroupSpendings: number
-}) {
-  const activeUser = useActiveUser(group.id)
+export function Totals({ groupId }: { groupId: string }) {
+  const activeUser = useActiveUser(groupId)
+
+  const participantId =
+    activeUser && activeUser !== 'None' ? activeUser : undefined
+  const { data } = trpc.groups.stats.get.useQuery({ groupId, participantId })
+  const { data: groupData } = trpc.groups.get.useQuery({ groupId })
+
+  if (!data || !groupData)
+    return (
+      <div className="flex flex-col gap-7">
+        {[0, 1, 2].map((index) => (
+          <div key={index}>
+            <Skeleton className="mt-1 h-3 w-48" />
+            <Skeleton className="mt-3 h-4 w-20" />
+          </div>
+        ))}
+      </div>
+    )
+
+  const {
+    totalGroupSpendings,
+    totalParticipantShare,
+    totalParticipantSpendings,
+  } = data
+  const { group } = groupData
 
   return (
     <>
@@ -22,10 +39,16 @@ export function Totals({
         totalGroupSpendings={totalGroupSpendings}
         currency={group.currency}
       />
-      {activeUser && activeUser !== 'None' && (
+      {participantId && (
         <>
-          <TotalsYourSpendings group={group} expenses={expenses} />
-          <TotalsYourShare group={group} expenses={expenses} />
+          <TotalsYourSpendings
+            totalParticipantSpendings={totalParticipantSpendings}
+            currency={group.currency}
+          />
+          <TotalsYourShare
+            totalParticipantShare={totalParticipantShare}
+            currency={group.currency}
+          />
         </>
       )}
     </>