From 7c8675ce1712eb8e892687aaeb04debeddfe6946 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sat, 2 Oct 2021 22:39:37 -0400
Subject: [PATCH] fix: Creating API token reloads app fix: API keys
 unselectable in list closes #2604

---
 app/components/List/Item.js |  1 -
 app/scenes/APITokenNew.js   | 28 ++++++++++++++++------------
 server/presenters/apiKey.js |  1 +
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/app/components/List/Item.js b/app/components/List/Item.js
index 0dfc5f0b6..440267b76 100644
--- a/app/components/List/Item.js
+++ b/app/components/List/Item.js
@@ -56,7 +56,6 @@ const ListItem = (
 
 const Wrapper = styled.div`
   display: flex;
-  user-select: none;
   padding: ${(props) => (props.$border === false ? 0 : "8px 0")};
   margin: ${(props) => (props.$border === false ? "8px 0" : 0)};
   border-bottom: 1px solid
diff --git a/app/scenes/APITokenNew.js b/app/scenes/APITokenNew.js
index aea0a7eb8..1e5ff6c2d 100644
--- a/app/scenes/APITokenNew.js
+++ b/app/scenes/APITokenNew.js
@@ -19,19 +19,23 @@ function APITokenNew({ onSubmit }: Props) {
   const { showToast } = useToasts();
   const { t } = useTranslation();
 
-  const handleSubmit = React.useCallback(async () => {
-    setIsSaving(true);
+  const handleSubmit = React.useCallback(
+    async (ev: SyntheticEvent<>) => {
+      ev.preventDefault();
+      setIsSaving(true);
 
-    try {
-      await apiKeys.create({ name });
-      showToast(t("API token created", { type: "success" }));
-      onSubmit();
-    } catch (err) {
-      showToast(err.message, { type: "error" });
-    } finally {
-      setIsSaving(false);
-    }
-  }, [t, showToast, name, onSubmit, apiKeys]);
+      try {
+        await apiKeys.create({ name });
+        showToast(t("API token created", { type: "success" }));
+        onSubmit();
+      } catch (err) {
+        showToast(err.message, { type: "error" });
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [t, showToast, name, onSubmit, apiKeys]
+  );
 
   const handleNameChange = React.useCallback((event) => {
     setName(event.target.value);
diff --git a/server/presenters/apiKey.js b/server/presenters/apiKey.js
index 8ef7dfc20..456573909 100644
--- a/server/presenters/apiKey.js
+++ b/server/presenters/apiKey.js
@@ -6,5 +6,6 @@ export default function present(key: ApiKey) {
     id: key.id,
     name: key.name,
     secret: key.secret,
+    createdAt: key.createdAt,
   };
 }