From 85d167ed3c52f210e9ad579eaf81e65fda8e9a37 Mon Sep 17 00:00:00 2001
From: Zai Shi <zaishi00@outlook.com>
Date: Thu, 16 May 2024 16:20:07 +0200
Subject: [PATCH] added default sorting to tables

---
 .../src/components/data-table/api-key-table.tsx | 17 +++++++++++++----
 .../src/components/data-table/team-table.tsx    |  4 +++-
 .../src/components/data-table/user-table.tsx    |  2 +-
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/packages/stack-server/src/components/data-table/api-key-table.tsx b/packages/stack-server/src/components/data-table/api-key-table.tsx
index 1611b6959..ad12f7550 100644
--- a/packages/stack-server/src/components/data-table/api-key-table.tsx
+++ b/packages/stack-server/src/components/data-table/api-key-table.tsx
@@ -100,10 +100,19 @@ const columns: ColumnDef<ExtendedApiKeySet>[] =  [
 ];
 
 export function ApiKeyTable(props: { apiKeys: ApiKeySet[] }) {
-  const extendedApiKeys = useMemo(() => props.apiKeys.map((apiKey) => ({
-    ...apiKey,
-    status: ({ 'valid': 'valid', 'manually-revoked': 'revoked', 'expired': 'expired' } as const)[apiKey.whyInvalid() || 'valid'],
-  } satisfies ExtendedApiKeySet)), [props.apiKeys]);
+  const extendedApiKeys = useMemo(() => {
+    const keys = props.apiKeys.map((apiKey) => ({
+      ...apiKey,
+      status: ({ 'valid': 'valid', 'manually-revoked': 'revoked', 'expired': 'expired' } as const)[apiKey.whyInvalid() || 'valid'],
+    } satisfies ExtendedApiKeySet));
+    // first soft based on status, then by expiresAt
+    return keys.sort((a, b) => {
+      if (a.status === b.status) {
+        return a.expiresAt < b.expiresAt ? 1 : -1;
+      }
+      return a.status === 'valid' ? -1 : 1;
+    });
+  }, [props.apiKeys]);
 
   return <DataTable data={extendedApiKeys} columns={columns} toolbarRender={toolbarRender} />;
 }
\ No newline at end of file
diff --git a/packages/stack-server/src/components/data-table/team-table.tsx b/packages/stack-server/src/components/data-table/team-table.tsx
index a72220642..2d5dbae18 100644
--- a/packages/stack-server/src/components/data-table/team-table.tsx
+++ b/packages/stack-server/src/components/data-table/team-table.tsx
@@ -1,5 +1,5 @@
 'use client';;
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import * as yup from "yup";
 import { ServerTeam } from '@stackframe/stack';
 import { ColumnDef, Row, Table } from "@tanstack/react-table";
@@ -124,5 +124,7 @@ const columns: ColumnDef<ServerTeam>[] =  [
 ];
 
 export function TeamTable(props: { teams: ServerTeam[] }) {
+  const teams = useMemo(() => props.teams.sort((a, b) => b.createdAt - a.createdAt), [props.teams]);
+
   return <DataTable data={props.teams} columns={columns} toolbarRender={toolbarRender} />;
 }
\ No newline at end of file
diff --git a/packages/stack-server/src/components/data-table/user-table.tsx b/packages/stack-server/src/components/data-table/user-table.tsx
index 0a275e7e0..2e17c4d52 100644
--- a/packages/stack-server/src/components/data-table/user-table.tsx
+++ b/packages/stack-server/src/components/data-table/user-table.tsx
@@ -187,7 +187,7 @@ export function extendUsers(users: ServerUser[]): ExtendedServerUser[] {
     ...user,
     authType: (user.authWithEmail ? "email" : user.oauthProviders[0]) || "",
     emailVerified: user.primaryEmailVerified ? "verified" : "unverified",
-  }));
+  })).sort((a, b) => b.signedUpAt - a.signedUpAt);
 }
 
 export function UserTable(props: { users: ServerUser[] }) {