Skip to content

Commit

Permalink
fix(zimbra): required form field has error on init
Browse files Browse the repository at this point in the history 
ref: MANAGER-16496

Signed-off-by: Tristan WAGNER <[email protected]>
  • Loading branch information
@tristanwagner @ghyenne
tristanwagner authored and ghyenne committed Jan 2, 2025
1 parent 2a46bbb commit f2e127f
Show file tree
Hide file tree
Showing 11 changed files with 227 additions and 382 deletions.
82 changes: 82 additions & 0 deletions packages/manager/apps/zimbra/src/hooks/useForm.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import { useState } from 'react';

export type FieldType = {
value: string;
touched?: boolean;
defaultValue?: string;
hasError?: boolean;
required?: boolean;
validate?: ((value: string) => boolean) | RegExp;
};

export interface FormTypeInterface {
[key: string]: FieldType;
}

export const validateField = (
name: string,
value: string,
form: FormTypeInterface,
) => {
const field = form[name];

if (!field) {
throw new Error(`validateField field is not defined for name "${name}"`);
}

if (!field.required && !value) {
return true;
}

if (typeof field.validate === 'function') {
return field.validate(value);
}

if (field.validate instanceof RegExp) {
return field.validate.test(String(value));
}

return !field.required || !!value;
};

export const validateForm = (form: FormTypeInterface) => {
const touched = Object.values(form).find((field) => field.touched);
const error = Object.values(form).find(
(field) => field.hasError || (field.required && field.value === ''),
);
return touched && !error;
};

type FormTypeOptions = {
onValueChange?: (
state: FormTypeInterface,
name: string,
value: string,
) => FormTypeInterface;
};

export const useForm = (
initialForm: FormTypeInterface = {},
options: FormTypeOptions = {},
) => {
const [isFormValid, setIsFormValid] = useState(false);
const [form, setForm] = useState<FormTypeInterface>(initialForm);

const setValue = (name: string, value: string, isBlur = false) => {
let newForm = form;
if (value !== form[name].value || isBlur) {
newForm[name] = {
...form[name],
value,
touched: true,
hasError: !validateField(name, value, form),
};
if (typeof options?.onValueChange === 'function') {
newForm = options.onValueChange(newForm, name, value);
}
setForm((oldForm) => ({ ...oldForm, ...newForm }));
setIsFormValid(validateForm(form));
}
};
return { isFormValid, form, setValue, setForm };
};
162 changes: 65 additions & 97 deletions packages/manager/apps/zimbra/src/pages/dashboard/AutoReplies/AddAutoReply.page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,13 +48,7 @@ import {
useDomains,
useGenerateUrl,
} from '@/hooks';
import {
ACCOUNT_REGEX,
checkValidityField,
checkValidityForm,
FormTypeInterface,
makeDateFromDDMMYYYY,
} from '@/utils';
import { ACCOUNT_REGEX, makeDateFromDDMMYYYY } from '@/utils';
import Loading from '@/components/Loading/Loading';
import {
ADD_AUTO_REPLY,
Expand All @@ -63,6 +57,7 @@ import {
CONFIRM,
EMAIL_ACCOUNT_ADD_AUTO_REPLY,
} from '@/tracking.constant';
import { FormTypeInterface, useForm } from '@/hooks/useForm';

export enum AutoReplyTypes {
LINKED = 'linked',
Expand Down Expand Up @@ -99,7 +94,6 @@ export default function AddAutoReply() {
const trackingName = editEmailAccountId
? EMAIL_ACCOUNT_ADD_AUTO_REPLY
: ADD_AUTO_REPLY;
const [isFormValid, setIsFormValid] = useState(false);
const [selectedOrganizationId, setSelectedOrganizationId] = useState(
organizationId,
);
Expand All @@ -108,53 +102,61 @@ export default function AddAutoReply() {

const onClose = () => navigate(goBackUrl);

const [form, setForm] = useState<FormTypeInterface>({
...{
account: {
value: '',
defaultValue: '',
touched: false,
required: true,
validate: ACCOUNT_REGEX,
},
domain: {
value: '',
touched: false,
required: true,
},
duration: {
value: AutoReplyDurations.TEMPORARY,
touched: false,
required: true,
},
from: {
value: '',
touched: false,
required: true,
},
until: {
value: '',
touched: false,
required: true,
},
sendCopy: {
value: '',
touched: false,
required: false,
},
sendCopyTo: {
value: '',
touched: false,
required: false,
const { form, isFormValid, setValue } = useForm(
{
...{
account: {
value: '',
defaultValue: '',
required: true,
validate: ACCOUNT_REGEX,
},
domain: {
value: '',
required: true,
},
duration: {
value: AutoReplyDurations.TEMPORARY,
required: true,
},
from: {
value: '',
required: true,
},
until: {
value: '',
required: true,
},
sendCopy: {
value: '',
},
sendCopyTo: {
value: '',
},
message: {
value: '',
defaultValue: '',
required: true,
},
},
message: {
value: '',
defaultValue: '',
touched: false,
required: true,
},
{
onValueChange: (currentForm, name) => {
const newForm = currentForm;
if (name === 'sendCopy') {
newForm.sendCopyTo.required = !!newForm.sendCopy.value;
newForm.sendCopyTo.hasError = false;
}
if (name === 'duration') {
newForm.from.required =
newForm.duration.value === AutoReplyDurations.TEMPORARY;
newForm.until.required =
newForm.duration.value === AutoReplyDurations.TEMPORARY;
}
return newForm;
},
},
});
);

const fromDate = useMemo(() => {
return form.from.value ? makeDateFromDDMMYYYY(form.from.value) : undefined;
Expand Down Expand Up @@ -222,33 +224,11 @@ export default function AddAutoReply() {
enabled: !!editEmailAccountId,
});

const handleFormChange = (name: string, value: string) => {
const newForm: FormTypeInterface = form;
newForm[name] = {
...form[name],
value,
touched: true,
hasError: !checkValidityField(name, value, form),
};
if (name === 'sendCopy') {
newForm.sendCopyTo.required = !!newForm.sendCopy.value;
newForm.sendCopyTo.hasError = false;
}
if (name === 'duration') {
newForm.from.required =
newForm.duration.value === AutoReplyDurations.TEMPORARY;
newForm.until.required =
newForm.duration.value === AutoReplyDurations.TEMPORARY;
}
setForm((oldForm) => ({ ...oldForm, ...newForm }));
setIsFormValid(checkValidityForm(form));
};

useEffect(() => {
if (account) {
const [head, tail] = (account.currentState?.email || '@').split('@');
handleFormChange('account', head);
handleFormChange('domain', tail);
setValue('account', head);
setValue('domain', tail);
setSelectedOrganizationId(account.currentState?.organizationId);
}
}, [account]);
Expand Down Expand Up @@ -369,16 +349,10 @@ export default function AddAutoReply() {
data-testid="input-account"
isDisabled={editEmailAccountId ? true : null}
onOdsBlur={(event) =>
handleFormChange(
event.target.name,
event.target.value.toString(),
)
setValue(event.target.name, event.target.value.toString(), true)
}
onOdsChange={(event) => {
handleFormChange(
event.detail.name,
event.detail.value.toString(),
);
setValue(event.detail.name, event.detail.value.toString());
}}
>
{domainAccounts && (
Expand Down Expand Up @@ -406,7 +380,7 @@ export default function AddAutoReply() {
hasError={form.from.hasError}
isDisabled={isLoading || editEmailAccountId ? true : null}
onOdsChange={(event) =>
handleFormChange('domain', event.detail.value as string)
setValue('domain', event.detail.value as string)
}
data-testid="select-domain"
placeholder={t(
Expand Down Expand Up @@ -434,9 +408,7 @@ export default function AddAutoReply() {
name={value}
value={value}
isChecked={form.duration.value === value}
onOdsChange={(event) =>
handleFormChange('duration', event.detail.value)
}
onOdsChange={(event) => setValue('duration', event.detail.value)}
data-testid={value}
className="cursor-pointer"
></OdsRadio>
Expand All @@ -461,7 +433,7 @@ export default function AddAutoReply() {
value={fromDate}
min={now}
onOdsChange={(event) => {
handleFormChange('from', event.detail.formattedValue);
setValue('from', event.detail.formattedValue);
}}
></OdsDatepicker>
</OdsFormField>
Expand All @@ -480,7 +452,7 @@ export default function AddAutoReply() {
value={untilDate}
min={fromDate || now}
onOdsChange={(event) =>
handleFormChange('until', event.detail.formattedValue)
setValue('until', event.detail.formattedValue)
}
></OdsDatepicker>
</OdsFormField>
Expand All @@ -495,7 +467,7 @@ export default function AddAutoReply() {
data-testid="sendCopy"
isChecked={form.sendCopy.value === 'checked'}
onClick={() =>
handleFormChange(
setValue(
'sendCopy',
form.sendCopy.value === 'checked' ? '' : 'checked',
)
Expand Down Expand Up @@ -523,9 +495,7 @@ export default function AddAutoReply() {
? true
: null
}
onOdsChange={(event) =>
handleFormChange('sendCopyTo', event.detail.value)
}
onOdsChange={(event) => setValue('sendCopyTo', event.detail.value)}
>
{orgAccounts?.map(({ currentState: acc }) => (
<option key={acc.email} value={acc.email}>
Expand All @@ -547,9 +517,7 @@ export default function AddAutoReply() {
defaultValue={form.message.defaultValue}
placeholder={t('zimbra_auto_replies_add_message_placeholder')}
hasError={form.message.hasError}
onOdsChange={(event) =>
handleFormChange('message', event.target.value)
}
onOdsChange={(event) => setValue('message', event.target.value)}
></OdsTextarea>
<OdsText preset={ODS_TEXT_PRESET.caption}>
{t('zimbra_auto_replies_add_message_helper')}
Expand Down
Loading

0 comments on commit f2e127f

Please sign in to comment.