From 9645e18b6afa0828f9917e92e50de1427e0ebb95 Mon Sep 17 00:00:00 2001
From: Myzel394 <50424412+Myzel394@users.noreply.github.com>
Date: Thu, 20 Oct 2022 19:02:57 +0200
Subject: [PATCH] improved aliases page

---
 .../AliasRoute/CreateRandomAliasButton.tsx    |  3 +-
 src/routes/AliasesRoute.tsx                   | 31 ++++++++++++-------
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/route-widgets/AliasRoute/CreateRandomAliasButton.tsx b/src/route-widgets/AliasRoute/CreateRandomAliasButton.tsx
index d5a05b8..f7ed00f 100644
--- a/src/route-widgets/AliasRoute/CreateRandomAliasButton.tsx
+++ b/src/route-widgets/AliasRoute/CreateRandomAliasButton.tsx
@@ -15,7 +15,7 @@ export interface CreateRandomAliasButtonProps {
 export default function CreateRandomAliasButton({
 	onCreated,
 }: CreateRandomAliasButtonProps): ReactElement {
-	const {mutate} = useMutation<Alias, AxiosError, CreateAliasData>(
+	const {mutate, isLoading} = useMutation<Alias, AxiosError, CreateAliasData>(
 		createAlias,
 		{
 			onSuccess: onCreated,
@@ -24,6 +24,7 @@ export default function CreateRandomAliasButton({
 
 	return (
 		<Button
+			disabled={isLoading}
 			startIcon={<BsArrowClockwise />}
 			onClick={() =>
 				mutate({
diff --git a/src/routes/AliasesRoute.tsx b/src/routes/AliasesRoute.tsx
index 44ce1de..3ed4ea2 100644
--- a/src/routes/AliasesRoute.tsx
+++ b/src/routes/AliasesRoute.tsx
@@ -1,7 +1,7 @@
 import {ReactElement} from "react"
 import {AxiosError} from "axios"
 
-import {List} from "@mui/material"
+import {Grid, List, Typography} from "@mui/material"
 import {useQuery} from "@tanstack/react-query"
 
 import {Alias} from "~/server-types"
@@ -18,15 +18,24 @@ export default function AliasesRoute(): ReactElement {
 	} = useQuery<Array<Alias>, AxiosError>(["get_aliases"], getAliases)
 
 	return (
-		<List>
-			{isLoading ? (
-				<LoadingData />
-			) : (
-				aliases?.map?.(alias => (
-					<AliasListItem key={alias.id} alias={alias} />
-				))
-			)}
-			<CreateRandomAliasButton onCreated={() => refetch()} />
-		</List>
+		<Grid direction="column" container spacing={4}>
+			<Grid item>
+				<Typography variant="h6" component="h2">
+					Random Aliases
+				</Typography>
+				<List>
+					{isLoading ? (
+						<LoadingData />
+					) : (
+						aliases?.map?.(alias => (
+							<AliasListItem key={alias.id} alias={alias} />
+						))
+					)}
+				</List>
+			</Grid>
+			<Grid item>
+				<CreateRandomAliasButton onCreated={() => refetch()} />
+			</Grid>
+		</Grid>
 	)
 }