From d651d0275840f16bf86d6132fd133fdb314d38f8 Mon Sep 17 00:00:00 2001
From: Myzel394 <50424412+Myzel394@users.noreply.github.com>
Date: Fri, 21 Oct 2022 23:31:25 +0200
Subject: [PATCH] improvements

---
 src/apis/refresh-token.ts                     |  2 +-
 .../AliasRoute/CreateRandomAliasButton.tsx    | 63 +++++++++++++++----
 src/routes/AuthenticatedRoute.tsx             |  4 +-
 3 files changed, 53 insertions(+), 16 deletions(-)

diff --git a/src/apis/refresh-token.ts b/src/apis/refresh-token.ts
index adfd3e5..674c129 100644
--- a/src/apis/refresh-token.ts
+++ b/src/apis/refresh-token.ts
@@ -8,7 +8,7 @@ export interface RefreshTokenResult {
 
 export const REFRESH_TOKEN_URL = `${
 	import.meta.env.VITE_SERVER_BASE_URL
-}/auth/refresh-token`
+}/auth/refresh`
 
 export default async function refreshToken(): Promise<RefreshTokenResult> {
 	const {data} = await client.post(REFRESH_TOKEN_URL)
diff --git a/src/route-widgets/AliasRoute/CreateRandomAliasButton.tsx b/src/route-widgets/AliasRoute/CreateRandomAliasButton.tsx
index f7ed00f..131b33d 100644
--- a/src/route-widgets/AliasRoute/CreateRandomAliasButton.tsx
+++ b/src/route-widgets/AliasRoute/CreateRandomAliasButton.tsx
@@ -1,8 +1,18 @@
-import {ReactElement} from "react"
+import {ReactElement, useState} from "react"
+import {MdArrowDropDown} from "react-icons/md"
 import {BsArrowClockwise} from "react-icons/bs"
+import {FaPen} from "react-icons/fa"
 import {AxiosError} from "axios"
 
-import {Button} from "@mui/material"
+import {
+	Button,
+	ButtonGroup,
+	ListItemIcon,
+	ListItemText,
+	Menu,
+	MenuItem,
+	MenuList,
+} from "@mui/material"
 import {useMutation} from "@tanstack/react-query"
 
 import {CreateAliasData, createAlias} from "~/apis"
@@ -22,17 +32,44 @@ export default function CreateRandomAliasButton({
 		},
 	)
 
+	const [anchorElement, setAnchorElement] = useState<HTMLElement | null>(null)
+	const open = Boolean(anchorElement)
+
 	return (
-		<Button
-			disabled={isLoading}
-			startIcon={<BsArrowClockwise />}
-			onClick={() =>
-				mutate({
-					type: AliasType.RANDOM,
-				})
-			}
-		>
-			Create random alias
-		</Button>
+		<>
+			<ButtonGroup>
+				<Button
+					disabled={isLoading}
+					startIcon={<BsArrowClockwise />}
+					onClick={() =>
+						mutate({
+							type: AliasType.RANDOM,
+						})
+					}
+				>
+					Create random alias
+				</Button>
+				<Button
+					size="small"
+					onClick={event => setAnchorElement(event.currentTarget)}
+				>
+					<MdArrowDropDown />
+				</Button>
+			</ButtonGroup>
+			<Menu
+				anchorEl={anchorElement}
+				open={open}
+				onClose={() => setAnchorElement(null)}
+			>
+				<MenuList>
+					<MenuItem>
+						<ListItemIcon>
+							<FaPen />
+						</ListItemIcon>
+						<ListItemText primary="Create Custom Alias" />
+					</MenuItem>
+				</MenuList>
+			</Menu>
+		</>
 	)
 }
diff --git a/src/routes/AuthenticatedRoute.tsx b/src/routes/AuthenticatedRoute.tsx
index aa9ce11..fdc8fde 100644
--- a/src/routes/AuthenticatedRoute.tsx
+++ b/src/routes/AuthenticatedRoute.tsx
@@ -45,7 +45,7 @@ export default function AuthenticatedRoute(): ReactElement {
 						justifyContent="space-between"
 						alignItems="center"
 					>
-						<Grid item xs={12} sm={4} lg={2}>
+						<Grid item xs={12} sm={4}>
 							<Box
 								bgcolor={theme.palette.background.paper}
 								component="nav"
@@ -61,7 +61,7 @@ export default function AuthenticatedRoute(): ReactElement {
 								</List>
 							</Box>
 						</Grid>
-						<Grid item xs={12} sm={8} lg={10}>
+						<Grid item xs={12} sm={8}>
 							<Paper>
 								<Box
 									padding={4}