Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | import { FormControl, FormControlLabel, Radio, RadioGroup, Typography } from "@mui/material";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import Alert from "components/Alert";
import Button from "components/Button";
import { accountInfoQueryKey } from "features/queryKeys";
import { Empty } from "google-protobuf/google/protobuf/empty_pb";
import { RpcError } from "grpc-web";
import { Trans, useTranslation } from "i18n";
import { AUTH, GLOBAL } from "i18n/namespaces";
import { GetAccountInfoRes, ProfilePublicVisibility } from "proto/account_pb";
import { useEffect } from "react";
import { Controller, useForm } from "react-hook-form";
import { service } from "service";
type ProfileVisibilityProps = {
accountInfo: GetAccountInfoRes.AsObject;
className?: string;
};
export default function ProfileVisibility({ className, accountInfo }: ProfileVisibilityProps) {
const { t } = useTranslation([GLOBAL, AUTH]);
const { handleSubmit, reset, control } = useForm<{
choice: ProfilePublicVisibility;
}>();
const onSubmit = handleSubmit(({ choice }) => {
mutate(choice);
});
const queryClient = useQueryClient();
const { error, isPending, mutate } = useMutation<Empty, RpcError, ProfilePublicVisibility>({
mutationFn: (choice) => service.account.setProfilePublicVisibility(choice),
onSuccess: () => {
queryClient.invalidateQueries({
queryKey: [accountInfoQueryKey],
});
},
});
const choices: [number, string][] = [
[ProfilePublicVisibility.PROFILE_PUBLIC_VISIBILITY_NOTHING, "auth:profile_visibility.visiblility_options.nothing"],
[
ProfilePublicVisibility.PROFILE_PUBLIC_VISIBILITY_MAP_ONLY,
"auth:profile_visibility.visiblility_options.map_only",
],
// [
// ProfilePublicVisibility.PROFILE_PUBLIC_VISIBILITY_LIMITED,
// "auth:profile_visibility.visiblility_options.limited",
// ],
// [
// ProfilePublicVisibility.PROFILE_PUBLIC_VISIBILITY_MOST,
// "auth:profile_visibility.visiblility_options.most",
// ],
// [
// ProfilePublicVisibility.PROFILE_PUBLIC_VISIBILITY_FULL,
// "auth:profile_visibility.visiblility_options.full_profile",
// ],
];
useEffect(() => {
reset({ choice: accountInfo.profilePublicVisibility });
}, [accountInfo, reset]);
return (
<div className={className}>
<Typography variant="h2">{t("auth:profile_visibility.title")}</Typography>
<Typography variant="body1">{t("auth:profile_visibility.choose")}</Typography>
{error && <Alert severity="error">{error.message}</Alert>}
<form onSubmit={onSubmit}>
<Controller
control={control}
name="choice"
defaultValue={accountInfo.profilePublicVisibility}
render={({ field }) => (
<FormControl component="fieldset" sx={{ mb: 2, display: "block" }}>
<RadioGroup
{...field}
row
onChange={(event, newValue) => field.onChange(Number(newValue))}
sx={{ marginBlockStart: 1 }}
>
{choices.map(([setting, translationKey]) => (
<FormControlLabel
key={setting}
value={setting}
control={<Radio />}
label={<Trans t={t} i18nKey={translationKey} />}
/>
))}
</RadioGroup>
</FormControl>
)}
/>
<Button type="submit" variant="contained" color="primary" loading={isPending}>
{t("global:save")}
</Button>
</form>
</div>
);
}
|