From e156a9eba71dfad564064ba373f59b9e72e21ea8 Mon Sep 17 00:00:00 2001
From: Guanjie <user.name>
Date: Sun, 1 Dec 2024 09:54:39 -0500
Subject: [PATCH] refactored Access Token List

---
 admin/src/Settings/AccessTokenList.jsx | 72 ++++++++++++--------------
 1 file changed, 33 insertions(+), 39 deletions(-)

diff --git a/admin/src/Settings/AccessTokenList.jsx b/admin/src/Settings/AccessTokenList.jsx
index 86a5a2b2a..a520d2b35 100644
--- a/admin/src/Settings/AccessTokenList.jsx
+++ b/admin/src/Settings/AccessTokenList.jsx
@@ -1,44 +1,38 @@
-import React from "react";
-import Collection from "../Models/Collection";
-import AccessToken from "../Models/AccessToken";
-import CollectionTable from "../Components/CollectionTable";
+import React, { useRef } from "react";
 import auth from "../auth";
+import CollectionTable from "../Components/CollectionTable";
 import DateTimeShow from "../Components/DateTimeShow";
+import AccessToken from "../Models/AccessToken";
+import Collection from "../Models/Collection";
 
-export default class AccessTokenList extends React.Component {
-    constructor(props) {
-        super(props);
-        this.collection = new Collection({ type: AccessToken });
-        this.state = {};
-    }
+export default function AccessTokenList() {
+    const collection = useRef(new Collection({ type: AccessToken }));
 
-    render() {
-        return (
-            <CollectionTable
-                collection={this.collection}
-                columns={[
-                    { title: "" },
-                    { title: "Access token" },
-                    { title: "Browser" },
-                    { title: "IP" },
-                    { title: "Giltig till" },
-                ]}
-                rowComponent={({ item }) => (
-                    <tr key={item.access_token}>
-                        <td>
-                            {auth.getAccessToken() === item.access_token ? (
-                                <i className="uk-icon-check" />
-                            ) : null}
-                        </td>
-                        <td>{item.access_token}</td>
-                        <td>{item.browser}</td>
-                        <td>{item.ip}</td>
-                        <td>
-                            <DateTimeShow date={item.expires} />
-                        </td>
-                    </tr>
-                )}
-            />
-        );
-    }
+    return (
+        <CollectionTable
+            collection={collection.current}
+            columns={[
+                { title: "" },
+                { title: "Access token" },
+                { title: "Browser" },
+                { title: "IP" },
+                { title: "Giltig till" },
+            ]}
+            rowComponent={({ item }) => (
+                <tr key={item.access_token}>
+                    <td>
+                        {auth.getAccessToken() === item.access_token ? (
+                            <i className="uk-icon-check" />
+                        ) : null}
+                    </td>
+                    <td>{item.access_token}</td>
+                    <td>{item.browser}</td>
+                    <td>{item.ip}</td>
+                    <td>
+                        <DateTimeShow date={item.expires} />
+                    </td>
+                </tr>
+            )}
+        />
+    );
 }