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 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 | import {
FormControl,
FormControlLabel,
Radio,
RadioGroup,
Typography,
} from "@mui/material";
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 { useMutation, useQueryClient } from "react-query";
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, isLoading, mutate } = useMutation<
Empty,
RpcError,
ProfilePublicVisibility
>(service.account.setProfilePublicVisibility, {
onSuccess: () => {
queryClient.invalidateQueries(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}
components={{ "1": <strong /> }}
/>
}
/>
))}
</RadioGroup>
</FormControl>
)}
/>
<Button
type="submit"
variant="contained"
color="primary"
loading={isLoading}
>
{t("global:save")}
</Button>
</form>
</div>
);
}
|