Do not list to many personal balances

oss-apps · Feb 17, 2025 · 1c11bba · 1c11bba
1 parent a8d0fe0
commit 1c11bba
Showing 1 changed file with 22 additions and 13 deletions.
diff --git a/src/components/group/GroupMyBalance.tsx b/src/components/group/GroupMyBalance.tsx
@@ -83,19 +83,28 @@ const GroupMyBalance: React.FC<GroupMyBalanceProps> = ({ userId, groupBalances,
           <div className="text-gray-500">You are all settled up</div>
         ) : null}
 
-        {Object.entries(friendBalances).map(([friendId, balances]) => {
-          const friend = userMap[+friendId];
-          return (
-            <div key={friendId} className="text-sm text-gray-500">
-              {Object.entries(balances).map(([currency, amount]) => (
-                <div key={currency}>
-                  {amount > 0 ? `${friend?.name} owes you` : `You owe ${friend?.name}`}{' '}
-                  {toUIString(Math.abs(amount))} {currency}
-                </div>
-              ))}
-            </div>
-          );
-        })}
+        {Object.entries(friendBalances)
+          .slice(0, 2)
+          .map(([friendId, balances]) => {
+            const friend = userMap[+friendId];
+            return (
+              <div key={friendId} className="text-sm text-gray-500">
+                {Object.entries(balances).map(([currency, amount]) => (
+                  <div key={currency}>
+                    {amount > 0 ? `${friend?.name} owes you` : `You owe ${friend?.name}`}{' '}
+                    {toUIString(Math.abs(amount))} {currency}
+                  </div>
+                ))}
+              </div>
+            );
+          })}
+
+        {Object.keys(friendBalances).length > 2 ? (
+          <div className="text-sm text-gray-500">
+            +{Object.keys(friendBalances).length - 2} balance
+            {Object.keys(friendBalances).length > 3 ? 's' : ''}...
+          </div>
+        ) : null}
       </div>
     </div>
   );