From 4cef4f75ace6a38ba19c1d2f93d81389ec2b7cb8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julian=20T=C3=B6lle?= <julian.toelle97@gmail.com>
Date: Sun, 15 Oct 2023 15:19:26 +0200
Subject: [PATCH] feat(frontend): hide revoked api tokens (#307)

---
 frontend/src/components/AuthApiTokens.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/AuthApiTokens.tsx b/frontend/src/components/AuthApiTokens.tsx
index c1b94fd..0e50589 100644
--- a/frontend/src/components/AuthApiTokens.tsx
+++ b/frontend/src/components/AuthApiTokens.tsx
@@ -9,7 +9,10 @@ import { Spinner } from "./ui/Spinner";
 export const AuthApiTokens: React.FC = () => {
   const { apiTokens, isLoading, createToken, revokeToken } = useApiTokens();
   const sortedTokens = useMemo(
-    () => apiTokens.sort((a, b) => (a.createdAt > b.createdAt ? -1 : 1)),
+    () =>
+      apiTokens
+        .filter((token) => !token.revokedAt)
+        .sort((a, b) => (a.createdAt > b.createdAt ? -1 : 1)),
     [apiTokens],
   );
 
@@ -22,7 +25,7 @@ export const AuthApiTokens: React.FC = () => {
         <p className="mb-4">
           You can use API Tokens to access the Listory API directly. You can
           find the API docs{" "}
-          <a href="/api/docs" target="_blank">
+          <a href="/api/docs" target="_blank" className={"underline"}>
             here
           </a>
           .