IITM-16 - show recent groups activity in groups overview page

src/app/groups/[groupId]/expenses/new/group-expense.client.tsx

@@ -224,7 +224,7 @@ export default function GroupExpenseForm({ group, user, expense }: GroupExpenseF
             }}
           />
         </div>
-        <div className={cn('grid grid-rows-1 gap-2', expense ? 'grid-cols-2' : 'grid-cols-1')}>
+        <div className={cn('mt-auto grid grid-rows-1 gap-2', expense ? 'grid-cols-2' : 'grid-cols-1')}>
           {expense ? (
             <ButtonWithDialog
               onConfirm={async () => {

src/app/groups/[groupId]/group-activity.tsx

@@ -3,7 +3,14 @@ import currencySymbolMap from 'currency-symbol-map/map';
 import { MoveRight } from 'lucide-react';
 import Link from 'next/link';
 import DateDisplay from '~/app/_components/date-display';
-import { GroupList, GroupListBody, GroupListItem, GroupListTitle } from '~/app/groups/[groupId]/group-list';
+import {
+  GroupList,
+  GroupListBody,
+  GroupListItem,
+  GroupListItemBody,
+  GroupListItemTitle,
+  GroupListTitle,
+} from '~/app/groups/[groupId]/group-list';
 import RegisterSettlement from '~/app/groups/[groupId]/register-settlement.client';
 import { Avatar, AvatarFallback, AvatarImage } from '~/components/ui/avatar';
 import type { RouterOutputs } from '~/trpc/shared';
@@ -39,12 +46,14 @@ export default function RecentGroupActivity({
   );
 }
 
-function SharedTransactionView({
+export function SharedTransactionView({
   sharedTransaction,
   user,
+  title,
 }: {
   user: RouterOutputs['users']['get'];
   sharedTransaction: RouterOutputs['groups']['expenses']['recent'][number];
+  title?: string;
 }) {
   const userPaid = sharedTransaction.TransactionSplit.some((s) => s.user.id === user.id && s.paid > 0);
   const payers = sharedTransaction.TransactionSplit.filter((s) => s.paid > 0)
@@ -59,40 +68,45 @@ function SharedTransactionView({
   return (
     <Link href={`/groups/${sharedTransaction.groupId}/expenses/${sharedTransaction.id}`}>
       <GroupListItem>
-        <div className="flex flex-col-reverse items-center lg:flex-row-reverse">
-          {payers.reverse().map((p) => (
-            <Avatar key={p.id} className="-mb-6 first:mb-0 hover:z-10 lg:-mr-6 lg:mb-0 lg:first:mr-0">
-              <AvatarImage src={p.imageUrl ?? ''} alt={`@${p.username}`} />
-              <AvatarFallback>
-                <AvatarIcon />
-              </AvatarFallback>
-            </Avatar>
-          ))}
-        </div>
-        <div className="flex flex-col">
-          <p>
-            <span className="inline-block first-letter:uppercase">{formatter.format(payersNames)}</span> paid{' '}
-            {sharedTransaction.transaction.amount / 100}
-            {currencySymbolMap[user.currency ?? 'EUR']} for{' '}
-            <span className="inline-block first-letter:lowercase">{sharedTransaction.transaction.description}</span>
-          </p>
-          <div className="text-xs text-gray-500">
-            <DateDisplay timezone={user.timezone} date={sharedTransaction.transaction.date} />
+        {title ? <GroupListItemTitle>{title}</GroupListItemTitle> : null}
+        <GroupListItemBody>
+          <div className="flex flex-col-reverse items-center lg:flex-row-reverse">
+            {payers.reverse().map((p) => (
+              <Avatar key={p.id} className="-mb-6 first:mb-0 hover:z-10 lg:-mr-6 lg:mb-0 lg:first:mr-0">
+                <AvatarImage src={p.imageUrl ?? ''} alt={`@${p.username}`} />
+                <AvatarFallback>
+                  <AvatarIcon />
+                </AvatarFallback>
+              </Avatar>
+            ))}
           </div>
-        </div>
+          <div className="flex flex-col">
+            <p>
+              <span className="inline-block first-letter:uppercase">{formatter.format(payersNames)}</span> paid{' '}
+              {sharedTransaction.transaction.amount / 100}
+              {currencySymbolMap[user.currency ?? 'EUR']} for{' '}
+              <span className="inline-block first-letter:lowercase">{sharedTransaction.transaction.description}</span>
+            </p>
+            <div className="text-xs text-gray-500">
+              <DateDisplay timezone={user.timezone} date={sharedTransaction.transaction.date} />
+            </div>
+          </div>
+        </GroupListItemBody>
       </GroupListItem>
     </Link>
   );
 }
 
-function RegisteredSettlementView({
+export function RegisteredSettlementView({
   settlement,
   user,
   group,
+  title,
 }: {
   group: Exclude<RouterOutputs['groups']['get'], null>;
   user: RouterOutputs['users']['get'];
   settlement: RouterOutputs['groups']['settlements']['recent'][number];
+  title?: string;
 }) {
   const parts: string[] = [];
   if (settlement.from.id === user.id) {
@@ -112,33 +126,36 @@ function RegisteredSettlementView({
   return (
     <RegisterSettlement {...{ group, user, settlement }}>
       <GroupListItem>
-        <div className="flex gap-2">
-          <Avatar>
-            <AvatarImage src={settlement.from.imageUrl ?? ''} alt={`@${settlement.from.username}`} />
-            <AvatarFallback>
-              <AvatarIcon />
-            </AvatarFallback>
-          </Avatar>
-          <div className="flex flex-col items-center">
-            <p className="whitespace-nowrap text-nowrap text-sm">
-              {settlement.amount / 100} {currencySymbolMap[user.currency ?? 'EUR']}
-            </p>
-            <MoveRight className="text-primary-900 -mt-2" />
+        {title ? <GroupListItemTitle>{title}</GroupListItemTitle> : null}
+        <GroupListItemBody>
+          <div className="flex gap-2">
+            <Avatar>
+              <AvatarImage src={settlement.from.imageUrl ?? ''} alt={`@${settlement.from.username}`} />
+              <AvatarFallback>
+                <AvatarIcon />
+              </AvatarFallback>
+            </Avatar>
+            <div className="flex flex-col items-center">
+              <p className="whitespace-nowrap text-nowrap text-sm">
+                {settlement.amount / 100} {currencySymbolMap[user.currency ?? 'EUR']}
+              </p>
+              <MoveRight className="text-primary-900 -mt-2" />
+            </div>
+            <Avatar>
+              <AvatarImage src={settlement.to.imageUrl ?? ''} alt={`@${settlement.to.username}`} />
+              <AvatarFallback>
+                <AvatarIcon />
+              </AvatarFallback>
+            </Avatar>
           </div>
-          <Avatar>
-            <AvatarImage src={settlement.to.imageUrl ?? ''} alt={`@${settlement.to.username}`} />
-            <AvatarFallback>
-              <AvatarIcon />
-            </AvatarFallback>
-          </Avatar>
-        </div>
 
-        <div className="flex flex-col">
-          <p>{parts.join(' ')}</p>
-          <div className="text-xs text-gray-500">
-            <DateDisplay timezone={user.timezone} date={settlement.date} />
+          <div className="flex flex-col">
+            <p>{parts.join(' ')}</p>
+            <div className="text-xs text-gray-500">
+              <DateDisplay timezone={user.timezone} date={settlement.date} />
+            </div>
           </div>
-        </div>
+        </GroupListItemBody>
       </GroupListItem>
     </RegisterSettlement>
   );

src/app/groups/[groupId]/group-list.tsx

@@ -32,5 +32,13 @@ export function GroupListBody({ children }: { children: React.ReactNode }) {
 }
 
 export function GroupListItem({ children }: { children: React.ReactNode }) {
-  return <div className="lg:hover:bg-primary-900/20 flex items-center gap-2 rounded-md p-2">{children}</div>;
+  return <div className="lg:hover:bg-primary-900/20 rounded-md p-2">{children}</div>;
+}
+
+export function GroupListItemTitle({ children }: { children: React.ReactNode }) {
+  return <h3 className="mb-1 font-bold">{children}</h3>;
+}
+
+export function GroupListItemBody({ children }: { children: React.ReactNode }) {
+  return <div className="flex items-center gap-2">{children}</div>;
 }

src/app/groups/my-groups.tsx

@@ -2,11 +2,13 @@ import { UsersRound } from 'lucide-react';
 import Link from 'next/link';
 import { Avatar, AvatarFallback, AvatarImage } from '~/components/ui/avatar';
 import { cn } from '~/lib/utils';
-import { api } from '~/trpc/server';
+import type { RouterOutputs } from '~/trpc/shared';
 
-export default async function MyGroups() {
-  const groups = await api.groups.all.query();
+export type MyGroupsProps = {
+  groups: RouterOutputs['groups']['all']['get'];
+};
 
+export default async function MyGroups({ groups }: MyGroupsProps) {
   return (
     <section className="border-primary-200 rounded-md border bg-white p-2">
       <header className="bg-primary-900 my-0.5 mb-1.5 flex h-12 items-center justify-center rounded-md">

src/app/groups/page.tsx

@@ -1,9 +1,17 @@
 import Link from 'next/link';
 import MyGroups from '~/app/groups/my-groups';
-import RecentGroupActivity from '~/app/groups/recent-group-activity';
+import RecentGroupsActivity from '~/app/groups/recent-groups-activity';
 import { Button } from '~/components/ui/button';
+import { api } from '~/trpc/server';
 
 export default async function GroupsPage() {
+  const [user, groups, expenses, settlements] = await Promise.all([
+    api.users.get.query(),
+    api.groups.all.get.query(),
+    api.groups.all.expenses.recent.query(),
+    api.groups.all.settlements.recent.query(),
+  ]);
+
   return (
     <>
       <div className="mb-2 grid">
@@ -12,8 +20,8 @@ export default async function GroupsPage() {
         </Button>
       </div>
       <div className="mt-2 grid grow gap-2 md:grid-cols-2">
-        <MyGroups />
-        <RecentGroupActivity />
+        <MyGroups groups={groups} />
+        <RecentGroupsActivity {...{ user, groups, expenses, settlements }} />
       </div>
     </>
   );

src/app/groups/recent-groups-activity.tsx

@@ -0,0 +1,46 @@
+import { RegisteredSettlementView, SharedTransactionView } from '~/app/groups/[groupId]/group-activity';
+import { GroupList, GroupListBody, GroupListTitle } from '~/app/groups/[groupId]/group-list';
+import type { RouterOutputs } from '~/trpc/shared';
+
+export type RecentGroupsActivityProps = {
+  groups: RouterOutputs['groups']['all']['get'];
+  user: RouterOutputs['users']['get'];
+  expenses: RouterOutputs['groups']['all']['expenses']['recent'];
+  settlements: RouterOutputs['groups']['all']['settlements']['recent'];
+};
+
+export default function RecentGroupsActivity({ user, groups, expenses, settlements }: RecentGroupsActivityProps) {
+  const settlementsListItems = settlements.map((s) => ({
+    date: s.date,
+    id: `settlement-${s.id}`,
+    component: (
+      <RegisteredSettlementView
+        key={s.id}
+        title={groups.find((g) => g.id === s.groupId)?.name}
+        {...{ settlement: s, user, group: groups.find((g) => g.id === s.group.id)! }}
+      />
+    ),
+  }));
+  const sharedTransactionsListItems = expenses.map((e) => ({
+    date: e.transaction.date,
+    id: `expense-${e.id}`,
+    component: (
+      <SharedTransactionView
+        title={groups.find((g) => g.id === e.groupId)?.name}
+        key={e.id}
+        {...{ sharedTransaction: e, user }}
+      />
+    ),
+  }));
+
+  const allItems = [...settlementsListItems, ...sharedTransactionsListItems].sort(
+    (a, b) => b.date.getTime() - a.date.getTime(),
+  );
+
+  return (
+    <GroupList>
+      <GroupListTitle>Recent activity</GroupListTitle>
+      <GroupListBody>{allItems.slice(0, 8).map((item) => item.component)}</GroupListBody>
+    </GroupList>
+  );
+}