added search functionality

src/apis/get-aliases.ts

@@ -1,13 +1,24 @@
-import {AliasList, PaginationResult} from "~/server-types"
+import {AliasList, GetPageData, PaginationResult} from "~/server-types"
 import {client} from "~/constants/axios-client"
 
-export default async function getAliases(): Promise<
+export interface GetAliasesData extends GetPageData {
-	PaginationResult<AliasList>
+	query?: string
-> {
+}
+
+export default async function getAliases({
+	query,
+	size,
+	page,
+}: GetAliasesData): Promise<PaginationResult<AliasList>> {
 	const {data} = await client.get(
 		`${import.meta.env.VITE_SERVER_BASE_URL}/alias`,
 		{
 			withCredentials: true,
+			params: {
+				query,
+				size,
+				page,
+			},
 		},
 	)
 

src/routes/AliasesRoute.tsx

@@ -1,26 +1,55 @@
-import {ReactElement, useState} from "react"
+import {ReactElement, useState, useTransition} from "react"
 import {AxiosError} from "axios"
+import {MdSearch} from "react-icons/md"
 
 import {useQuery} from "@tanstack/react-query"
+import {InputAdornment, TextField} from "@mui/material"
 
 import {AliasList, PaginationResult} from "~/server-types"
+import {QueryResult, SimplePage} from "~/components"
 import AliasesDetails from "~/route-widgets/AliasesRoute/AliasesDetails"
-import QueryResult from "~/components/QueryResult"
-import SimplePage from "~/components/SimplePage"
 import getAliases from "~/apis/get-aliases"
 
 export default function AliasesRoute(): ReactElement {
-	const query = useQuery<PaginationResult<AliasList>, AxiosError>(
+	const [searchValue, setSearchValue] = useState<string>("")
-		["get_aliases"],
+	const [queryValue, setQueryValue] = useState<string>("")
-		getAliases,
+	const [, startTransition] = useTransition()
+
+	const query = useQuery<PaginationResult<AliasList>, AxiosError, void>(
+		["get_aliases", queryValue],
+		() =>
+			getAliases({
+				query: queryValue,
+			}),
 	)
 
-	const [showCustomCreateDialog, setShowCustomCreateDialog] =
-		useState<boolean>(false)
-
 	return (
-		<SimplePage title="Aliases">
+		<SimplePage
-			<QueryResult<PaginationResult<AliasList>> query={query}>
+			title="Aliases"
+			pageOptionsActions={
+				<TextField
+					value={searchValue}
+					onChange={event => {
+						setSearchValue(event.target.value)
+						startTransition(() => {
+							setQueryValue(event.target.value)
+						})
+					}}
+					label="Search"
+					id="search"
+					InputProps={{
+						startAdornment: (
+							<InputAdornment position="start">
+								<MdSearch />
+							</InputAdornment>
+						),
+					}}
+				/>
+			}
+		>
+			<QueryResult<PaginationResult<AliasList>, AxiosError, void>
+				query={query}
+			>
 				{result => <AliasesDetails aliases={result.items} />}
 			</QueryResult>
 		</SimplePage>

src/server-types.ts

@@ -164,3 +164,8 @@ export interface User
 	notes: UserNote
 	isDecrypted: true
 }
+
+export interface GetPageData {
+	page?: number
+	size?: number
+}