-
-
Notifications
You must be signed in to change notification settings - Fork 181
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add tRPC, use it for group expenses, balances and information page (#246
) * Add tRPC, use it for group expense list * Use tRPC for balances * Use tRPC in group information + better loading states
- Loading branch information
Showing
24 changed files
with
672 additions
and
240 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import { createTRPCContext } from '@/trpc/init' | ||
| import { appRouter } from '@/trpc/routers/_app' | ||
| import { fetchRequestHandler } from '@trpc/server/adapters/fetch' | ||
|
|
||
| const handler = (req: Request) => | ||
| fetchRequestHandler({ | ||
| endpoint: '/api/trpc', | ||
| req, | ||
| router: appRouter, | ||
| createContext: createTRPCContext, | ||
| }) | ||
|
|
||
| export { handler as GET, handler as POST } |
138 changes: 138 additions & 0 deletions
138
src/app/groups/[groupId]/balances/balances-and-reimbursements.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,138 @@ | ||
| 'use client' | ||
|
|
||
| import { BalancesList } from '@/app/groups/[groupId]/balances-list' | ||
| import { ReimbursementList } from '@/app/groups/[groupId]/reimbursement-list' | ||
| import { | ||
| Card, | ||
| CardContent, | ||
| CardDescription, | ||
| CardHeader, | ||
| CardTitle, | ||
| } from '@/components/ui/card' | ||
| import { Skeleton } from '@/components/ui/skeleton' | ||
| import { getGroup } from '@/lib/api' | ||
| import { trpc } from '@/trpc/client' | ||
| import { useTranslations } from 'next-intl' | ||
| import { Fragment, useEffect } from 'react' | ||
|
|
||
| export default function BalancesAndReimbursements({ | ||
| group, | ||
| }: { | ||
| group: NonNullable<Awaited<ReturnType<typeof getGroup>>> | ||
| }) { | ||
| const utils = trpc.useUtils() | ||
|
|
||
| useEffect(() => { | ||
| // Until we use tRPC more widely and can invalidate the cache on expense | ||
| // update, it's easier and safer to invalidate the cache on page load. | ||
| utils.groups.balances.invalidate() | ||
| }, [utils]) | ||
|
|
||
| const t = useTranslations('Balances') | ||
|
|
||
| const { data, isLoading } = trpc.groups.balances.list.useQuery({ | ||
| groupId: group.id, | ||
| }) | ||
|
|
||
| return ( | ||
| <> | ||
| <Card className="mb-4"> | ||
| <CardHeader> | ||
| <CardTitle>{t('title')}</CardTitle> | ||
| <CardDescription>{t('description')}</CardDescription> | ||
| </CardHeader> | ||
| <CardContent> | ||
| {isLoading || !data ? ( | ||
| <BalancesLoading participantCount={group.participants.length} /> | ||
| ) : ( | ||
| <BalancesList | ||
| balances={data.balances} | ||
| participants={group.participants} | ||
| currency={group.currency} | ||
| /> | ||
| )} | ||
| </CardContent> | ||
| </Card> | ||
| <Card className="mb-4"> | ||
| <CardHeader> | ||
| <CardTitle>{t('Reimbursements.title')}</CardTitle> | ||
| <CardDescription>{t('Reimbursements.description')}</CardDescription> | ||
| </CardHeader> | ||
| <CardContent> | ||
| {isLoading || !data ? ( | ||
| <ReimbursementsLoading | ||
| participantCount={group.participants.length} | ||
| /> | ||
| ) : ( | ||
| <ReimbursementList | ||
| reimbursements={data.reimbursements} | ||
| participants={group.participants} | ||
| currency={group.currency} | ||
| groupId={group.id} | ||
| /> | ||
| )} | ||
| </CardContent> | ||
| </Card> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| const ReimbursementsLoading = ({ | ||
| participantCount, | ||
| }: { | ||
| participantCount: number | ||
| }) => { | ||
| return ( | ||
| <div className="flex flex-col"> | ||
| {Array(participantCount - 1) | ||
| .fill(undefined) | ||
| .map((_, index) => ( | ||
| <div key={index} className="flex justify-between py-5"> | ||
| <div className="flex flex-col sm:flex-row gap-3 sm:gap-4"> | ||
| <Skeleton className="h-3 w-32" /> | ||
| <Skeleton className="h-3 w-24" /> | ||
| </div> | ||
| <Skeleton className="h-3 w-16" /> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| const BalancesLoading = ({ | ||
| participantCount, | ||
| }: { | ||
| participantCount: number | ||
| }) => { | ||
| return ( | ||
| <div className="grid grid-cols-2 py-1 gap-y-2"> | ||
| {Array(participantCount) | ||
| .fill(undefined) | ||
| .map((_, index) => | ||
| index % 2 === 0 ? ( | ||
| <Fragment key={index}> | ||
| <div className="flex items-center justify-end pr-2"> | ||
| <Skeleton className="h-3 w-16" /> | ||
| </div> | ||
| <div className="self-start"> | ||
| <Skeleton | ||
| className={`h-7 w-${(index % 3) + 1}/3 rounded-l-none`} | ||
| /> | ||
| </div> | ||
| </Fragment> | ||
| ) : ( | ||
| <Fragment key={index}> | ||
| <div className="flex items-center justify-end"> | ||
| <Skeleton | ||
| className={`h-7 w-${(index % 3) + 1}/3 rounded-r-none`} | ||
| /> | ||
| </div> | ||
| <div className="flex items-center pl-2"> | ||
| <Skeleton className="h-3 w-16" /> | ||
| </div> | ||
| </Fragment> | ||
| ), | ||
| )} | ||
| </div> | ||
| ) | ||
| } |
Oops, something went wrong.