fix(web): improved timed digest form behaviour #3405
Conversation
NV-2299 Fix the timed digest form
Reproduction StepsFound a few problems with the form:
Expected Behaviour |
| @@ -13,6 +13,7 @@ export function useTemplateFetcher( | |||
| () => getTemplateById(templateId as string), | |||
| { | |||
| enabled: !!templateId, | |||
| refetchOnWindowFocus: false, | |||
There was a problem hiding this comment.
do not refetch template on window focus
| @@ -17,6 +17,7 @@ export const StepNameInput = ({ index, defaultValue }: { index: number; defaultV | |||
| <Controller | |||
| control={control} | |||
| name={`steps.${index}.name`} | |||
| defaultValue="" | |||
There was a problem hiding this comment.
missed default value, it's required by the react-hook-form... there are few more fields like this
| digestMetadata: { | ||
| digestKey: '', | ||
| type: DigestTypeEnum.REGULAR, | ||
| regular: { | ||
| unit: DigestUnitEnum.MINUTES, | ||
| amount: '5', | ||
| backoff: false, | ||
| }, | ||
| }, | ||
| }), | ||
| ...(channelType === StepTypeEnum.DELAY && { | ||
| metadata: { | ||
| type: DigestTypeEnum.REGULAR, | ||
| delayMetadata: { | ||
| type: DelayTypeEnum.REGULAR, | ||
| regular: { | ||
| unit: DigestUnitEnum.MINUTES, | ||
| amount: '5', | ||
| }, | ||
| }, |
There was a problem hiding this comment.
the default values for the digest/delay step metadata... I'll explain about these more later
| const { template, isLoading, isCreating, isUpdating, isDeleting, updateNotificationTemplate } = useTemplateController( | ||
| templateId, | ||
| { | ||
| onFetchSuccess: (fetchedTemplate) => { | ||
| setTrigger(fetchedTemplate.triggers[0]); | ||
| const form = mapNotificationTemplateToForm(fetchedTemplate); | ||
| reset(form); | ||
| }, |
There was a problem hiding this comment.
only reset the form after we've fetched it... like update it with BE values
| @@ -183,7 +194,7 @@ const TemplateEditorFormProvider = ({ children }) => { | |||
| }, | |||
| }); | |||
| setTrigger(response.triggers[0]); | |||
| reset(payloadToCreate); | |||
| reset(form); | |||
There was a problem hiding this comment.
reset with the current form state, this removed dirty flags from the fields and "disables" the "update" button
| onBlur={(e) => { | ||
| if (e.target.value === '') { | ||
| setValue(amountFieldName, amountDefaultValue); | ||
| } | ||
| field.onBlur(); |
There was a problem hiding this comment.
set default values on blur
| <span>Every</span> | ||
| <Controller | ||
| control={control} | ||
| key={amountFieldName} |
There was a problem hiding this comment.
key is a trick to have a one "amount (every)" field and re-mount it when amountFieldName changes, and it changes when switching between the tabs: min, hours, days, weeks, months
| </> | ||
| ); | ||
| if (type === DigestTypeEnum.TIMED) { | ||
| return <TimedDigestWillBeSentHeader index={index} />; |
There was a problem hiding this comment.
exported the timed digest logic to separate component...
| } | ||
| setValue(`steps.${index}.metadata.backoff`, false); | ||
| }, [backoff, type, index]); | ||
| export const WillBeSentHeader = ({ index }: { index: number }) => { |
There was a problem hiding this comment.
"Will be sent" field accordion header, there are a lot of different logic to show different labels depending on what user has selected
What change does this PR introduce?
Improved the timed digest form:
digestMetadataanddelayMetadata;Why was this change needed?
This is a part of the Timed Digest PRD.
Other information (Screenshots)
Screen.Recording.2023-05-14.at.00.59.00.mov
Screen.Recording.2023-05-14.at.01.00.46.mov
Screen.Recording.2023-05-14.at.01.01.50.mov