diff --git a/src/routes/AliasDetailRoute.tsx b/src/routes/AliasDetailRoute.tsx index b20097c..bf766e1 100644 --- a/src/routes/AliasDetailRoute.tsx +++ b/src/routes/AliasDetailRoute.tsx @@ -1,13 +1,16 @@ -import {ReactElement} from "react" +import {ReactElement, useState} from "react" import {useParams} from "react-router-dom" import {AxiosError} from "axios" -import {useQuery} from "@tanstack/react-query" -import {Grid, Typography} from "@mui/material" +import {useMutation, useQuery} from "@tanstack/react-query" +import {Grid, Switch, Typography} from "@mui/material" -import {getAlias} from "~/apis" +import {UpdateAliasData, getAlias, updateAlias} from "~/apis" import {Alias} from "~/server-types" +import {ErrorSnack, SuccessSnack} from "~/components" +import {parseFastAPIError} from "~/utils" import AliasPreferencesForm from "~/route-widgets/AliasDetailRoute/AliasPreferencesForm" +import AliasTypeIndicator from "~/components/AliasTypeIndicator" import QueryResult from "~/components/QueryResult" import SimplePage from "~/components/SimplePage" @@ -15,49 +18,106 @@ export default function AliasDetailRoute(): ReactElement { const params = useParams() const address = atob(params.addressInBase64 as string) + const [successMessage, setSuccessMessage] = useState("") + const [errorMessage, setErrorMessage] = useState("") + + const [isActive, setIsActive] = useState(true) const query = useQuery( ["get_alias", params.addressInBase64], () => getAlias(address), + { + onSuccess: alias => setIsActive(alias.isActive), + }, + ) + const {mutateAsync} = useMutation( + values => updateAlias(query.data!.id, values), + { + onSuccess: () => query.refetch(), + onError: error => { + setErrorMessage(parseFastAPIError(error).detail as string) + }, + }, ) return ( - - query={query}> - {alias => ( - - - - {address} - - - - - - - Settings - + <> + + query={query}> + {alias => ( + + + + + + + + + {address} + + + + { + setIsActive(!isActive) + + try { + await mutateAsync({ + isActive, + }) + + if (isActive) { + setSuccessMessage( + "Alias activated successfully!", + ) + } else { + setSuccessMessage( + "Alias deactivated successfully!", + ) + } + } catch {} + }} + /> + - - - 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. - - - - + + + + + + Settings + + + + + 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. + + + + + - - )} - - + )} + + + + + ) } diff --git a/src/server-types.ts b/src/server-types.ts index 9e5a095..dd95ca6 100644 --- a/src/server-types.ts +++ b/src/server-types.ts @@ -83,6 +83,7 @@ export interface Alias { local: string isActive: boolean encryptedNotes: string + type: AliasType prefRemoveTrackers: boolean | null prefCreateMailReport: boolean | null