refactor: remove ternary operators for better readability
Replace ternary operators with if-statements and helper functions in: - DisableUserButton component - user list disabled status column - EditUserPage disable item configuration
This commit is contained in:
1 parent
26c83d8853
commit
fbac0c8752
3 files changed
+53
-29
No files matched your search
+34
-17
@@ -16,22 +16,29 @@ export const DisableUserButton = ({ user }: DisableUserButtonProps) => {
|
||||
const t = useI18n();
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const changeDisabledMutation = clientApi.user.changeDisabled.useMutation();
|
||||
const isDisabled = user.disabled;
|
||||
|
||||
const getSuccessMessage = () => {
|
||||
if (isDisabled) {
|
||||
return {
|
||||
title: t("user.action.enable.success", { defaultValue: "User enabled" }),
|
||||
message: t("user.action.enable.successDescription", { defaultValue: "User has been enabled" }),
|
||||
};
|
||||
}
|
||||
return {
|
||||
title: t("user.action.disable.success", { defaultValue: "User disabled" }),
|
||||
message: t("user.action.disable.successDescription", { defaultValue: "User has been disabled" }),
|
||||
};
|
||||
};
|
||||
|
||||
const handleToggle = () => {
|
||||
startTransition(async () => {
|
||||
try {
|
||||
await changeDisabledMutation.mutateAsync({
|
||||
userId: user.id,
|
||||
disabled: !user.disabled,
|
||||
});
|
||||
showSuccessNotification({
|
||||
title: user.disabled
|
||||
? t("user.action.enable.success", { defaultValue: "User enabled" })
|
||||
: t("user.action.disable.success", { defaultValue: "User disabled" }),
|
||||
message: user.disabled
|
||||
? t("user.action.enable.successDescription", { defaultValue: "User has been enabled" })
|
||||
: t("user.action.disable.successDescription", { defaultValue: "User has been disabled" }),
|
||||
disabled: !isDisabled,
|
||||
});
|
||||
showSuccessNotification(getSuccessMessage());
|
||||
} catch {
|
||||
showErrorNotification({
|
||||
title: t("common.notification.update.error"),
|
||||
@@ -41,21 +48,31 @@ export const DisableUserButton = ({ user }: DisableUserButtonProps) => {
|
||||
});
|
||||
};
|
||||
|
||||
const tooltipLabel = user.disabled
|
||||
? t("user.action.enable.description", { defaultValue: "Enable this user" })
|
||||
: t("user.action.disable.description", { defaultValue: "Disable this user" });
|
||||
const getTooltipLabel = () => {
|
||||
if (isDisabled) {
|
||||
return t("user.action.enable.description", { defaultValue: "Enable this user" });
|
||||
}
|
||||
return t("user.action.disable.description", { defaultValue: "Disable this user" });
|
||||
};
|
||||
|
||||
const getButtonLabel = () => {
|
||||
if (isDisabled) {
|
||||
return t("user.action.enable.label", { defaultValue: "Enable user" });
|
||||
}
|
||||
return t("user.action.disable.label", { defaultValue: "Disable user" });
|
||||
};
|
||||
|
||||
const getButtonColor = () => (isDisabled ? "green" : "yellow");
|
||||
|
||||
return (
|
||||
<Tooltip label={tooltipLabel} position="top">
|
||||
<Tooltip label={getTooltipLabel()} position="top">
|
||||
<Button
|
||||
onClick={handleToggle}
|
||||
loading={isPending || changeDisabledMutation.isPending}
|
||||
color={user.disabled ? "green" : "yellow"}
|
||||
color={getButtonColor()}
|
||||
variant="light"
|
||||
>
|
||||
{user.disabled
|
||||
? t("user.action.enable.label", { defaultValue: "Enable user" })
|
||||
: t("user.action.disable.label", { defaultValue: "Disable user" })}
|
||||
{getButtonLabel()}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
);
|
||||
|
||||
@@ -62,6 +62,19 @@ export default async function EditUserPage(props: Props) {
|
||||
const searchEngines = await api.searchEngine.getSelectable();
|
||||
const isSelf = session?.user.id === user.id;
|
||||
const isCredentialsUser = user.provider === "credentials";
|
||||
const isDisabled = user.disabled;
|
||||
|
||||
const getDisableItemLabel = () => {
|
||||
if (isDisabled) return t("user.action.enable.label");
|
||||
return t("user.action.disable.label");
|
||||
};
|
||||
|
||||
const getDisableItemDescription = () => {
|
||||
if (isDisabled) {
|
||||
return t("management.page.user.action.enable.description", { defaultValue: "Re-enable access for this user" });
|
||||
}
|
||||
return t("management.page.user.action.disable.description", { defaultValue: "Prevent this user from logging in" });
|
||||
};
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
@@ -98,14 +111,8 @@ export default async function EditUserPage(props: Props) {
|
||||
|
||||
<DangerZoneRoot>
|
||||
<DangerZoneItem
|
||||
label={user.disabled ? t("user.action.enable.label") : t("user.action.disable.label")}
|
||||
description={
|
||||
user.disabled
|
||||
? t("management.page.user.action.enable.description", { defaultValue: "Re-enable access for this user" })
|
||||
: t("management.page.user.action.disable.description", {
|
||||
defaultValue: "Prevent this user from logging in",
|
||||
})
|
||||
}
|
||||
label={getDisableItemLabel()}
|
||||
description={getDisableItemDescription()}
|
||||
action={<DisableUserButton user={user} />}
|
||||
/>
|
||||
<DangerZoneItem
|
||||
|
||||
@@ -56,10 +56,10 @@ export const UserListComponent = ({ initialUserList }: UserListComponentProps) =
|
||||
accessorKey: "disabled",
|
||||
header: t("user.field.status.label", { defaultValue: "Status" }),
|
||||
size: 100,
|
||||
Cell: ({ row }) =>
|
||||
row.original.disabled ? (
|
||||
<Badge color="red">{t("user.field.status.disabled", { defaultValue: "Disabled" })}</Badge>
|
||||
) : null,
|
||||
Cell: ({ row }) => {
|
||||
if (!row.original.disabled) return null;
|
||||
return <Badge color="red">{t("user.field.status.disabled", { defaultValue: "Disabled" })}</Badge>;
|
||||
},
|
||||
},
|
||||
],
|
||||
[t],
|
||||
|
||||
Reference in new issue
Block a user