Group expenses my date

spliit-app · Jan 16, 2024 · fa006e9 · fa006e9
1 parent 6b6d58e
commit fa006e9
Showing 1 changed file with 86 additions and 58 deletions.
diff --git a/src/app/groups/[groupId]/expenses/expense-list.tsx b/src/app/groups/[groupId]/expenses/expense-list.tsx
@@ -16,6 +16,21 @@ type Props = {
   groupId: string
 }
 
+function getGroupedExpensesByDate(expenses) {
+  return expenses.reduce((result, expense) => {
+    const dateString = formatDate(expense.expenseDate)
+    result[dateString] = result[dateString] ?? []
+    result[dateString].push(expense)
+    return result
+  }, {})
+}
+
+function getOrderedDates(dates) {
+  return dates.sort(function (a, b) {
+    return new Date(b) - new Date(a);
+  });
+}
+
 export function ExpenseList({
   expenses,
   currency,
@@ -44,68 +59,81 @@ export function ExpenseList({
   const getParticipant = (id: string) => participants.find((p) => p.id === id)
   const router = useRouter()
 
+  const groupedExpensesByDate = getGroupedExpensesByDate(expenses)
+
   return expenses.length > 0 ? (
-    expenses.map((expense) => (
-      <div
-        key={expense.id}
-        className={cn(
-          'border-t flex justify-between px-4 sm:pr-2 sm:pl-6 py-4 text-sm cursor-pointer hover:bg-accent gap-1 items-stretch',
-          expense.isReimbursement && 'italic',
-        )}
-        onClick={() => {
-          router.push(`/groups/${groupId}/expenses/${expense.id}/edit`)
-        }}
-      >
-        <CategoryIcon
-          category={expense.category}
-          className="w-4 h-4 mr-2 mt-0.5 text-muted-foreground"
-        />
-        <div className="flex-1">
-          <div className={cn('mb-1', expense.isReimbursement && 'italic')}>
-            {expense.title}
-          </div>
-          <div className="text-xs text-muted-foreground">
-            Paid by <strong>{getParticipant(expense.paidById)?.name}</strong>{' '}
-            for{' '}
-            {expense.paidFor.map((paidFor, index) => (
-              <Fragment key={index}>
-                {index !== 0 && <>, </>}
-                <strong>
-                  {
-                    participants.find((p) => p.id === paidFor.participantId)
-                      ?.name
-                  }
-                </strong>
-              </Fragment>
-            ))}
-          </div>
-        </div>
-        <div className="flex flex-col justify-between items-end">
+    getOrderedDates(Object.keys(groupedExpensesByDate)).map(dateString => {
+      const dateExpenses = groupedExpensesByDate[dateString];
+      return (
+        <Fragment key={dateString}>
           <div
-            className={cn(
-              'tabular-nums whitespace-nowrap',
-              expense.isReimbursement ? 'italic' : 'font-bold',
-            )}
+            className={'border-t text-md pl-3 py-2 font-semibold'}
           >
-            {currency} {(expense.amount / 100).toFixed(2)}
-          </div>
-          <div className="text-xs text-muted-foreground">
-            {formatDate(expense.expenseDate)}
+            {dateString}
           </div>
-        </div>
-        <Button
-          size="icon"
-          variant="link"
-          className="self-center hidden sm:flex"
-          asChild
-        >
-          <Link href={`/groups/${groupId}/expenses/${expense.id}/edit`}>
-            <ChevronRight className="w-4 h-4" />
-          </Link>
-        </Button>
-      </div>
-    ))
-  ) : (
+          {dateExpenses.map((expense) => (
+            <div
+              key={expense.id}
+              className={cn(
+                'border-t flex justify-between px-4 sm:pr-2 sm:pl-6 py-4 text-sm cursor-pointer hover:bg-accent gap-1 items-stretch',
+                expense.isReimbursement && 'italic',
+              )}
+              onClick={() => {
+                router.push(`/groups/${groupId}/expenses/${expense.id}/edit`)
+              }}
+            >
+              <CategoryIcon
+                category={expense.category}
+                className="w-4 h-4 mr-2 mt-0.5 text-muted-foreground"
+              />
+              <div className="flex-1">
+                <div className={cn('mb-1', expense.isReimbursement && 'italic')}>
+                  {expense.title}
+                </div>
+                <div className="text-xs text-muted-foreground">
+                  Paid by <strong>{getParticipant(expense.paidById)?.name}</strong>{' '}
+                  for{' '}
+                  {expense.paidFor.map((paidFor, index) => (
+                    <Fragment key={index}>
+                      {index !== 0 && <>, </>}
+                      <strong>
+                        {
+                          participants.find((p) => p.id === paidFor.participantId)
+                            ?.name
+                        }
+                      </strong>
+                    </Fragment>
+                  ))}
+                </div>
+              </div>
+              <div className="flex flex-col justify-between items-end">
+                <div
+                  className={cn(
+                    'tabular-nums whitespace-nowrap',
+                    expense.isReimbursement ? 'italic' : 'font-bold',
+                  )}
+                >
+                  {currency} {(expense.amount / 100).toFixed(2)}
+                </div>
+                <div className="text-xs text-muted-foreground">
+                  {formatDate(expense.expenseDate)}
+                </div>
+              </div>
+              <Button
+                size="icon"
+                variant="link"
+                className="self-center hidden sm:flex"
+                asChild
+              >
+                <Link href={`/groups/${groupId}/expenses/${expense.id}/edit`}>
+                  <ChevronRight className="w-4 h-4" />
+                </Link>
+              </Button>
+            </div>
+          ))}
+        </Fragment>
+      )
+    })) : (
     <p className="px-6 text-sm py-6">
       Your group doesn’t contain any expense yet.{' '}
       <Button variant="link" asChild className="-m-4">