improvements

src/components/ErrorSnack.tsx

@@ -10,6 +10,7 @@ export default function ErrorSnack({message}: ErrorSnackProps): ReactElement {
 	const [open, setOpen] = useState<boolean>(true)
 
 	useEffect(() => {
+		setOpen(false)
 		setOpen(Boolean(message))
 	}, [message])
 

src/components/SuccessSnack.tsx

@@ -12,13 +12,14 @@ export default function SuccessSnack({
 	const [open, setOpen] = useState<boolean>(true)
 
 	useEffect(() => {
+		setOpen(false)
 		setOpen(Boolean(message))
 	}, [message])
 
 	return (
 		<Snackbar
 			open={open}
-			autoHideDuration={5000}
+			autoHideDuration={2000}
 			onClose={() => setOpen(false)}
 		>
 			<Alert severity="success" variant="filled">

src/route-widgets/AliasDetailRoute/AliasNotesForm.tsx

@@ -240,11 +240,12 @@ export default function AliasNotesForm({
 														<IconButton
 															edge="end"
 															aria-label="delete"
-															onClick={() =>
+															onClick={async () => {
 																arrayHelpers.remove(
 																	index,
 																)
-															}
+																await formik.submitForm()
+															}}
 														>
 															<TiDelete />
 														</IconButton>
@@ -260,7 +261,9 @@ export default function AliasNotesForm({
 				</Grid>
 			</form>
 			<ErrorSnack message={formik.errors.detail} />
-			<SuccessSnack message={isSuccess && "Update Alias notes!"} />
+			<SuccessSnack
+				message={isSuccess && "Updated notes successfully!"}
+			/>
 		</>
 	)
 }

src/route-widgets/AliasDetailRoute/ChangeAliasActivationStatusSwitch.tsx

@@ -0,0 +1,68 @@
+import {ReactElement, useEffect, useState} from "react"
+import {AxiosError} from "axios"
+
+import {Switch} from "@mui/material"
+import {useMutation} from "@tanstack/react-query"
+
+import {Alias} from "~/server-types"
+import {UpdateAliasData, updateAlias} from "~/apis"
+import {parseFastAPIError} from "~/utils"
+import {ErrorSnack, SuccessSnack} from "~/components"
+
+export interface ChangeAliasActivationStatusSwitchProps {
+	id: string
+	isActive: boolean
+
+	onChanged: () => void
+}
+
+export default function ChangeAliasActivationStatusSwitch({
+	id,
+	isActive,
+	onChanged,
+}: ChangeAliasActivationStatusSwitchProps): ReactElement {
+	const [isActiveUIState, setIsActiveUIState] = useState<boolean>(true)
+
+	const [successMessage, setSuccessMessage] = useState<string>("")
+	const [errorMessage, setErrorMessage] = useState<string>("")
+
+	const {mutateAsync, isLoading} = useMutation<
+		Alias,
+		AxiosError,
+		UpdateAliasData
+	>(values => updateAlias(id, values), {
+		onSuccess: onChanged,
+		onError: error =>
+			setErrorMessage(parseFastAPIError(error).detail as string),
+	})
+
+	useEffect(() => {
+		setIsActiveUIState(isActive)
+	}, [isActive])
+
+	return (
+		<>
+			<Switch
+				checked={isActiveUIState}
+				disabled={isActiveUIState === null || isLoading}
+				onChange={async () => {
+					setIsActiveUIState(!isActiveUIState)
+
+					try {
+						await mutateAsync({
+							isActive: !isActiveUIState,
+						})
+
+						if (!isActiveUIState) {
+							setSuccessMessage("Alias activated successfully!")
+						} else {
+							setSuccessMessage("Alias deactivated successfully!")
+						}
+					} catch {}
+				}}
+			/>
+			<SuccessSnack message={successMessage} />
+			<ErrorSnack message={errorMessage} />
+		</>
+	)
+}

src/routes/AliasDetailRoute.tsx

@@ -1,23 +1,18 @@
-import {ReactElement, useContext, useState} from "react"
+import {ReactElement, useContext} from "react"
 import {useParams} from "react-router-dom"
 import {AxiosError} from "axios"
 
-import {useMutation, useQuery} from "@tanstack/react-query"
-import {Grid, Switch, Typography} from "@mui/material"
+import {useQuery} from "@tanstack/react-query"
+import {Grid, Typography} from "@mui/material"
 
-import {UpdateAliasData, getAlias, updateAlias} from "~/apis"
+import {getAlias} from "~/apis"
 import {Alias, DecryptedAlias} from "~/server-types"
-import {
-	AliasTypeIndicator,
-	ErrorSnack,
-	QueryResult,
-	SimplePage,
-	SuccessSnack,
-} from "~/components"
-import {decryptAliasNotes, parseFastAPIError} from "~/utils"
+import {AliasTypeIndicator, QueryResult, SimplePage} from "~/components"
+import {decryptAliasNotes} from "~/utils"
 import AliasNotesForm from "~/route-widgets/AliasDetailRoute/AliasNotesForm"
 import AliasPreferencesForm from "~/route-widgets/AliasDetailRoute/AliasPreferencesForm"
 import AuthContext from "~/AuthContext/AuthContext"
+import ChangeAliasActivationStatusSwitch from "~/route-widgets/AliasDetailRoute/ChangeAliasActivationStatusSwitch"
 import DecryptionPasswordMissingAlert from "~/components/DecryptionPasswordMissingAlert"
 
 export default function AliasDetailRoute(): ReactElement {
@@ -25,10 +20,6 @@ export default function AliasDetailRoute(): ReactElement {
 	const {user, _decryptUsingMasterPassword} = useContext(AuthContext)
 	const address = atob(params.addressInBase64 as string)
 
-	const [successMessage, setSuccessMessage] = useState<string>("")
-	const [errorMessage, setErrorMessage] = useState<string>("")
-
-	const [isActive, setIsActive] = useState<boolean>(true)
 	const query = useQuery<Alias | DecryptedAlias, AxiosError>(
 		["get_alias", params.addressInBase64],
 		async () => {
@@ -41,21 +32,9 @@ export default function AliasDetailRoute(): ReactElement {
 				return getAlias(address)
 			}
 		},
-		{
-			onSuccess: alias => setIsActive(alias.isActive),
-		},
-	)
-	const {mutateAsync} = useMutation<Alias, AxiosError, UpdateAliasData>(
-		values => updateAlias(query.data!.id, values),
-		{
-			onSuccess: () => query.refetch(),
-			onError: error =>
-				setErrorMessage(parseFastAPIError(error).detail as string),
-		},
 	)
 
 	return (
-		<>
 		<SimplePage title="Alias Details">
 			<QueryResult<Alias | DecryptedAlias> query={query}>
 				{alias => (
@@ -76,27 +55,10 @@ export default function AliasDetailRoute(): ReactElement {
 									</Typography>
 								</Grid>
 								<Grid item>
-										<Switch
-											checked={isActive}
-											onChange={async () => {
-												setIsActive(!isActive)
-
-												try {
-													await mutateAsync({
-														isActive,
-													})
-
-													if (isActive) {
-														setSuccessMessage(
-															"Alias activated successfully!",
-														)
-													} else {
-														setSuccessMessage(
-															"Alias deactivated successfully!",
-														)
-													}
-												} catch {}
-											}}
+									<ChangeAliasActivationStatusSwitch
+										id={alias.id}
+										isActive={alias.isActive}
+										onChanged={query.refetch}
 									/>
 								</Grid>
 							</Grid>
@@ -114,8 +76,7 @@ export default function AliasDetailRoute(): ReactElement {
 										<AliasNotesForm
 											id={alias.id}
 											notes={
-													(alias as DecryptedAlias)
-														.notes
+												(alias as DecryptedAlias).notes
 											}
 										/>
 									) : (
@@ -133,14 +94,13 @@ export default function AliasDetailRoute(): ReactElement {
 								</Grid>
 								<Grid item>
 									<Typography variant="body1">
-											These settings apply to this alias
-											only. You can either set a value
-											manually or refer to your defaults
-											settings. Note that this does change
-											in behavior. When you set a value to
-											refer to your default setting, the
-											alias will always use the latest
-											value. So when you change your
+										These settings apply to this alias only.
+										You can either set a value manually or
+										refer to your defaults settings. Note
+										that this does change in behavior. When
+										you set a value to refer to your default
+										setting, the alias will always use the
+										latest value. So when you change your
 										default setting, the alias will
 										automatically use the new value.
 									</Typography>
@@ -154,8 +114,5 @@ export default function AliasDetailRoute(): ReactElement {
 				)}
 			</QueryResult>
 		</SimplePage>
-			<SuccessSnack message={successMessage} />
-			<ErrorSnack message={errorMessage} />
-		</>
 	)
 }