diff --git a/dashboard/src/modules/users/components/dialogs/mutation/index.tsx b/dashboard/src/modules/users/components/dialogs/mutation/index.tsx
@@ -34,6 +34,7 @@ export const UsersMutationDialog: FC<MutationDialogProps<UserMutationType>> = ({
service_ids: [],
username: "",
data_limit_reset_strategy: "no_reset",
+ data_limit: undefined,
note: "",
expire_date: "",
expire_strategy: "fixed_date",
diff --git a/dashboard/src/modules/users/components/dialogs/mutation/sections/data-limit/index.tsx b/dashboard/src/modules/users/components/dialogs/mutation/sections/data-limit/index.tsx
@@ -2,32 +2,29 @@ import { FC } from "react";
import { FormLabel, Switch } from '@marzneshin/components';
import { useTranslation } from 'react-i18next';
import { DataLimitField, DataLimitResetStrategyField } from "../../fields";
-import { useFormContext } from "react-hook-form";
import { useDataLimit } from "./use-data-limit";
export const DataLimitFields: FC = () => {
const { t } = useTranslation();
const { isDataLimitEnabled, setIsDataLimitEnabled } = useDataLimit();
- const form = useFormContext();
-
- const handleToggleChange = () => {
- setIsDataLimitEnabled(!isDataLimitEnabled);
- };
return (
<div className="my-2">
<FormLabel className="hstack justify-between items-center text-md my-2" >
{t('page.users.data_limit_method')}
- <Switch checked={isDataLimitEnabled} onCheckedChange={handleToggleChange} />
+ <Switch
+ checked={isDataLimitEnabled}
+ onCheckedChange={() => setIsDataLimitEnabled(!isDataLimitEnabled)}
+ />
</FormLabel>
- <div className="flex gap-2 items-center w-full sm:flex-row md:flex-col">
- {isDataLimitEnabled && (
+ {isDataLimitEnabled && (
+ <div className="flex gap-2 items-center w-full sm:flex-row md:flex-col">
<div className="flex gap-2 items-center w-full">
<DataLimitField />
- {form.watch().data_limit !== 0 && <DataLimitResetStrategyField />}
+ <DataLimitResetStrategyField />
</div>
- )}
- </div>
+ </div>
+ )}
</div>
);
};
diff --git a/dashboard/src/modules/users/components/dialogs/mutation/sections/data-limit/use-data-limit.ts b/dashboard/src/modules/users/components/dialogs/mutation/sections/data-limit/use-data-limit.ts
@@ -5,15 +5,11 @@ export const useDataLimit = () => {
const form = useFormContext();
const dataLimit = form.watch("data_limit");
- const [isDataLimitEnabled, setIsDataLimitEnabled] = useState(dataLimit !== 0);
-
- useEffect(() => {
- setIsDataLimitEnabled(dataLimit !== 0);
- }, [dataLimit]);
+ const [isDataLimitEnabled, setIsDataLimitEnabled] = useState<boolean>(!!dataLimit);
useEffect(() => {
if (!isDataLimitEnabled) {
- form.setValue("data_limit", 0);
+ form.setValue("data_limit", undefined);
form.setValue("data_limit_reset_strategy", "no_reset");
}
// eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/dashboard/src/modules/users/domain/schema.ts b/dashboard/src/modules/users/domain/schema.ts
@@ -7,7 +7,7 @@ export const UserSchema = z.object({
data_limit: z
.union([z.string().transform((str) => (Number(str))), z.number()])
.refine(val => val >= 0, { message: 'The minimum number is 0' })
- .transform((val) => (Math.round(val) ?? 0) * DATA_LIMIT_METRIC)
+ .transform((val) => (Math.round(val)) * DATA_LIMIT_METRIC)
.nullable()
.optional(),
data_limit_reset_strategy: z