fix(groups): limit amount of group activity elements

nikensss · Mar 31, 2024 · 9a1c615 · 9a1c615
1 parent 17fe71e
commit 9a1c615
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 10 deletions.
diff --git a/src/app/groups/[groupId]/group-activity.tsx b/src/app/groups/[groupId]/group-activity.tsx
@@ -13,11 +13,13 @@ export default function RecentGroupActivity({
   settlements,
   user,
   group,
+  amountToShow,
 }: {
   user: RouterOutputs['users']['get'];
   expenses: RouterOutputs['groups']['expenses']['recent'];
   settlements: RouterOutputs['groups']['settlements']['recent'];
   group: Exclude<RouterOutputs['groups']['get'], null>;
+  amountToShow: number;
 }) {
   const settlementListItems = settlements.map((s) => ({
     date: s.date,
@@ -34,7 +36,7 @@ export default function RecentGroupActivity({
   return (
     <GroupList>
       <GroupListTitle>Recent activity</GroupListTitle>
-      <GroupListBody>{allItems.slice(0, 5).map((item) => item.component)}</GroupListBody>
+      <GroupListBody>{allItems.slice(0, amountToShow).map((item) => item.component)}</GroupListBody>
     </GroupList>
   );
 }

diff --git a/src/app/groups/[groupId]/page.tsx b/src/app/groups/[groupId]/page.tsx
@@ -16,8 +16,8 @@ export default async function GroupPage({ params: { groupId } }: { params: { gro
   if (!user) return notFound();
 
   const balance = await api.groups.balance.query({ groupId });
-  const expenses = await api.groups.expenses.recent.query({ groupId });
-  const settlements = await api.groups.settlements.recent.query({ groupId });
+  const expenses = await api.groups.expenses.recent.query({ groupId, take: Math.max(5, balance.length) });
+  const settlements = await api.groups.settlements.recent.query({ groupId, take: Math.max(5, balance.length) });
 
   return (
     <>
@@ -44,7 +44,7 @@ export default async function GroupPage({ params: { groupId } }: { params: { gro
         </Button>
       </div>
       <div className="flex grow flex-col gap-2 lg:grid lg:grid-cols-2 lg:grid-rows-1">
-        <RecentGroupActivity {...{ expenses, settlements, user, group }} />
+        <RecentGroupActivity {...{ expenses, settlements, user, group, amountToShow: Math.max(5, balance.length) }} />
         <GroupBalance {...{ group, balance, user }} />
       </div>
     </>

diff --git a/src/server/api/routers/groups/expenses.ts b/src/server/api/routers/groups/expenses.ts
@@ -148,8 +148,8 @@ export const groupExpensesRouter = createTRPCRouter({
     }),
 
   recent: privateProcedure
-    .input(z.object({ groupId: z.string().cuid() }))
-    .query(async ({ ctx: { db, user }, input: { groupId } }) => {
+    .input(z.object({ groupId: z.string().cuid(), take: z.number().default(5) }))
+    .query(async ({ ctx: { db, user }, input: { groupId, take } }) => {
       await assertUserInGroup({ groupId, userId: user.id });
 
       return db.sharedTransaction.findMany({
@@ -177,7 +177,7 @@ export const groupExpensesRouter = createTRPCRouter({
             date: 'desc',
           },
         },
-        take: 5,
+        take,
       });
     }),
 });
diff --git a/src/server/api/routers/groups/settlements.ts b/src/server/api/routers/groups/settlements.ts
@@ -97,8 +97,8 @@ export const groupSettlementsRouter = createTRPCRouter({
     }),
 
   recent: privateProcedure
-    .input(z.object({ groupId: z.string().cuid() }))
-    .query(async ({ ctx: { db, user }, input: { groupId } }) => {
+    .input(z.object({ groupId: z.string().cuid(), take: z.number().default(5) }))
+    .query(async ({ ctx: { db, user }, input: { groupId, take } }) => {
       await assertUserInGroup({ groupId, userId: user.id });
 
       return db.settlement.findMany({
@@ -128,7 +128,7 @@ export const groupSettlementsRouter = createTRPCRouter({
         orderBy: {
           date: 'desc',
         },
-        take: 5,
+        take,
       });
     }),
 });