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-your-share.tsx

@@ -1,30 +1,16 @@
 'use client'
-import { getGroup, getGroupExpenses } from '@/lib/api'
-import { getTotalActiveUserShare } from '@/lib/totals'
 import { cn, formatCurrency } from '@/lib/utils'
 import { useLocale, useTranslations } from 'next-intl'
-import { useEffect, useState } from 'react'
 
-type Props = {
-  group: NonNullable<Awaited<ReturnType<typeof getGroup>>>
-  expenses: NonNullable<Awaited<ReturnType<typeof getGroupExpenses>>>
-}
-
-export function TotalsYourShare({ group, expenses }: Props) {
+export function TotalsYourShare({
+  totalParticipantShare = 0,
+  currency,
+}: {
+  totalParticipantShare?: number
+  currency: string
+}) {
   const locale = useLocale()
   const t = useTranslations('Stats.Totals')
-  const [activeUser, setActiveUser] = useState('')
-
-  useEffect(() => {
-    const activeUser = localStorage.getItem(`${group.id}-activeUser`)
-    if (activeUser) setActiveUser(activeUser)
-  }, [group, expenses])
-
-  const totalActiveUserShare =
-    activeUser === '' || activeUser === 'None'
-      ? 0
-      : getTotalActiveUserShare(activeUser, expenses)
-  const currency = group.currency
 
   return (
     <div>
@@ -32,10 +18,10 @@ export function TotalsYourShare({ group, expenses }: Props) {
       <div
         className={cn(
           'text-lg',
-          totalActiveUserShare < 0 ? 'text-green-600' : 'text-red-600',
+          totalParticipantShare < 0 ? 'text-green-600' : 'text-red-600',
         )}
       >
-        {formatCurrency(currency, Math.abs(totalActiveUserShare), locale)}
+        {formatCurrency(currency, Math.abs(totalParticipantShare), locale)}
       </div>
     </div>
   )