refactor: update Rule Snooze Add form

carere · carere · commit 4c355bf89211 · 2025-03-06T13:03:17.000+01:00
diff --git a/packages/app-builder/src/routes/ressources+/cases+/add-rule-snooze.tsx b/packages/app-builder/src/routes/ressources+/cases+/add-rule-snooze.tsx
@@ -1,27 +1,23 @@
 import { Callout } from '@app-builder/components';
 import { ExternalLink } from '@app-builder/components/ExternalLink';
-import { FormErrorOrDescription } from '@app-builder/components/Form/FormErrorOrDescription';
-import { FormField } from '@app-builder/components/Form/FormField';
-import { FormInput } from '@app-builder/components/Form/FormInput';
-import { FormLabel } from '@app-builder/components/Form/FormLabel';
-import { FormSelect } from '@app-builder/components/Form/FormSelect';
-import { FormTextArea } from '@app-builder/components/Form/FormTextArea';
+import { FormErrorOrDescription } from '@app-builder/components/Form/Tanstack/FormErrorOrDescription';
+import { FormInput } from '@app-builder/components/Form/Tanstack/FormInput';
+import { FormLabel } from '@app-builder/components/Form/Tanstack/FormLabel';
 import { setToastMessage } from '@app-builder/components/MarbleToaster';
 import { LoadingIcon } from '@app-builder/components/Spinner';
-import { adaptDateTimeFieldCodes } from '@app-builder/models/duration';
+import { adaptDateTimeFieldCodes, type DurationUnit } from '@app-builder/models/duration';
 import { isStatusConflictHttpError } from '@app-builder/models/http-errors';
 import { ruleSnoozesDocHref } from '@app-builder/services/documentation-href';
 import { serverServices } from '@app-builder/services/init.server';
 import { useFormatLanguage } from '@app-builder/utils/format';
 import { getRoute } from '@app-builder/utils/routes';
-import { FormProvider, getFormProps, getInputProps, useForm } from '@conform-to/react';
-import { getZodConstraint, parseWithZod } from '@conform-to/zod';
 import { type ActionFunctionArgs, json } from '@remix-run/node';
 import { useFetcher } from '@remix-run/react';
-import * as React from 'react';
+import { useForm } from '@tanstack/react-form';
+import { useEffect, useMemo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Temporal } from 'temporal-polyfill';
-import { Button, ModalV2 } from 'ui-design-system';
+import { Button, ModalV2, Select, TextArea } from 'ui-design-system';
 import { z } from 'zod';
 
 const durationUnitOptions = ['days', 'weeks', 'hours'] as const;
@@ -34,26 +30,37 @@ const addRuleSnoozeFormSchema = z.object({
   durationUnit: z.enum(durationUnitOptions),
 });
 
+type AddRuleSnoozeForm = z.infer<typeof addRuleSnoozeFormSchema>;
+
 export async function action({ request }: ActionFunctionArgs) {
   const {
     authService,
     i18nextService: { getFixedT },
     toastSessionService: { getSession, commitSession },
   } = serverServices;
-  const { decision } = await authService.isAuthenticated(request, {
-    failureRedirect: getRoute('/sign-in'),
-  });
 
-  const formData = await request.formData();
-  const submission = parseWithZod(formData, {
-    schema: addRuleSnoozeFormSchema,
-  });
+  const [t, session, rawData, { decision }] = await Promise.all([
+    getFixedT(request, ['common', 'cases']),
+    getSession(request),
+    request.json(),
+    authService.isAuthenticated(request, {
+      failureRedirect: getRoute('/sign-in'),
+    }),
+  ]);
 
-  if (submission.status !== 'success') {
-    return json(submission.reply());
+  const { data, success, error } = addRuleSnoozeFormSchema.safeParse(rawData);
+
+  if (!success) {
+    return json(
+      { status: 'error', errors: error.flatten() },
+      {
+        headers: { 'Set-Cookie': await commitSession(session) },
+      },
+    );
   }
 
-  const { decisionId, ruleId, comment, durationUnit, durationValue } = submission.value;
+  const { decisionId, ruleId, comment, durationUnit, durationValue } = data;
+
   const duration = Temporal.Duration.from({
     [durationUnit]: durationValue,
   });
@@ -63,13 +70,18 @@ export async function action({ request }: ActionFunctionArgs) {
       relativeTo: Temporal.Now.plainDateTime('gregory'),
     }) >= 0
   ) {
-    const t = await getFixedT(request, ['cases']);
     return json(
-      submission.reply({
-        fieldErrors: {
-          durationValue: [t('cases:case_detail.add_rule_snooze.errors.max_duration')],
-        },
-      }),
+      {
+        status: 'error',
+        errors: [
+          {
+            durationValue: [t('cases:case_detail.add_rule_snooze.errors.max_duration')],
+          },
+        ],
+      },
+      {
+        headers: { 'Set-Cookie': await commitSession(session) },
+      },
     );
   }
 
@@ -80,26 +92,21 @@ export async function action({ request }: ActionFunctionArgs) {
       comment,
     });
 
-    return json(submission.reply());
+    return { status: 'success', errors: [] };
   } catch (error) {
-    const session = await getSession(request);
-    const t = await getFixedT(request, ['common', 'cases']);
-
-    let message: string;
-    if (isStatusConflictHttpError(error)) {
-      message = t('cases:case_detail.add_rule_snooze.errors.duplicate_rule_snooze');
-    } else {
-      message = t('common:errors.unknown');
-    }
-
     setToastMessage(session, {
       type: 'error',
-      message,
+      message: isStatusConflictHttpError(error)
+        ? t('cases:case_detail.add_rule_snooze.errors.duplicate_rule_snooze')
+        : t('common:errors.unknown'),
     });
 
-    return json(submission.reply({ formErrors: [message] }), {
-      headers: { 'Set-Cookie': await commitSession(session) },
-    });
+    return json(
+      { status: 'error', errors: [] },
+      {
+        headers: { 'Set-Cookie': await commitSession(session) },
+      },
+    );
   }
 }
 
@@ -112,7 +119,7 @@ export function AddRuleSnooze({
   decisionId: string;
   ruleId: string;
 }) {
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = useState(false);
 
   return (
     <ModalV2.Root open={open} setOpen={setOpen}>
@@ -135,121 +142,147 @@ function AddRuleSnoozeContent({
 }) {
   const { t } = useTranslation(['common', 'cases']);
   const language = useFormatLanguage();
-  const dateTimeFieldNames = React.useMemo(
+  const fetcher = useFetcher<typeof action>();
+  const dateTimeFieldNames = useMemo(
     () =>
       new Intl.DisplayNames(language, {
         type: 'dateTimeField',
       }),
     [language],
   );
 
-  const fetcher = useFetcher<typeof action>();
-  React.useEffect(() => {
+  useEffect(() => {
     if (fetcher?.data?.status === 'success') {
       setOpen(false);
     }
   }, [setOpen, fetcher?.data?.status]);
 
-  const [form, fields] = useForm({
-    shouldRevalidate: 'onInput',
-    defaultValue: {
+  const form = useForm<AddRuleSnoozeForm>({
+    defaultValues: {
       decisionId,
       ruleId,
       durationValue: 1,
       durationUnit: 'days',
     },
-    lastResult: fetcher.data,
-    constraint: getZodConstraint(addRuleSnoozeFormSchema),
-    onValidate({ formData }) {
-      return parseWithZod(formData, {
-        schema: addRuleSnoozeFormSchema,
-      });
+    onSubmit: ({ value, formApi }) => {
+      if (formApi.state.isValid) {
+        fetcher.submit(value, {
+          method: 'POST',
+          action: getRoute('/ressources/cases/add-rule-snooze'),
+          encType: 'application/json',
+        });
+      }
+    },
+    validators: {
+      onChangeAsync: addRuleSnoozeFormSchema,
+      onBlurAsync: addRuleSnoozeFormSchema,
+      onSubmitAsync: addRuleSnoozeFormSchema,
     },
   });
 
   return (
-    <FormProvider context={form.context}>
-      <fetcher.Form
-        method="post"
-        action={getRoute('/ressources/cases/add-rule-snooze')}
-        {...getFormProps(form)}
-      >
-        <ModalV2.Title>{t('cases:case_detail.add_rule_snooze.title')}</ModalV2.Title>
-        <div className="flex flex-col gap-6 p-6">
-          <ModalV2.Description render={<Callout variant="outlined" />}>
-            <p className="whitespace-pre text-wrap">
-              <Trans
-                t={t}
-                i18nKey="cases:case_detail.add_rule_snooze.callout"
-                components={{
-                  DocLink: <ExternalLink href={ruleSnoozesDocHref} />,
-                }}
-              />
-            </p>
-          </ModalV2.Description>
-          <input
-            {...getInputProps(fields.decisionId, {
-              type: 'hidden',
-            })}
-          />
-          <input
-            {...getInputProps(fields.ruleId, {
-              type: 'hidden',
-            })}
-          />
-
-          <FormField
-            name={fields.comment.name}
-            className="row-span-full grid grid-rows-subgrid gap-2"
-          >
-            <FormLabel>{t('cases:case_detail.add_rule_snooze.comment.label')}</FormLabel>
-            <FormTextArea
-              className="w-full"
-              placeholder={t('cases:case_detail.add_rule_snooze.comment.placeholder')}
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        form.handleSubmit();
+      }}
+    >
+      <ModalV2.Title>{t('cases:case_detail.add_rule_snooze.title')}</ModalV2.Title>
+      <div className="flex flex-col gap-6 p-6">
+        <ModalV2.Description render={<Callout variant="outlined" />}>
+          <p className="whitespace-pre text-wrap">
+            <Trans
+              t={t}
+              i18nKey="cases:case_detail.add_rule_snooze.callout"
+              components={{
+                DocLink: <ExternalLink href={ruleSnoozesDocHref} />,
+              }}
             />
-          </FormField>
-
-          <div className="grid w-full grid-cols-2 grid-rows-[repeat(3,_max-content)] gap-2">
-            <FormField
-              name={fields.durationValue.name}
-              className="row-span-full grid grid-rows-subgrid gap-2"
-            >
-              <FormLabel>{t('cases:case_detail.add_rule_snooze.duration_value')}</FormLabel>
-              <FormInput type="number" className="w-full" />
-              <FormErrorOrDescription />
-            </FormField>
-
-            <FormField
-              name={fields.durationUnit.name}
-              className="row-span-full grid grid-rows-subgrid gap-2"
-            >
-              <FormLabel>{t('cases:case_detail.add_rule_snooze.duration_unit')}</FormLabel>
-              <FormSelect.Default className="h-10 w-full" options={durationUnitOptions}>
-                {durationUnitOptions.map((unit) => (
-                  <FormSelect.DefaultItem key={unit} value={unit}>
-                    {dateTimeFieldNames.of(adaptDateTimeFieldCodes(unit))}
-                  </FormSelect.DefaultItem>
-                ))}
-              </FormSelect.Default>
-              <FormErrorOrDescription />
-            </FormField>
-          </div>
-
-          <div className="flex flex-1 flex-row gap-2">
-            <ModalV2.Close render={<Button className="flex-1" variant="secondary" />}>
-              {t('common:cancel')}
-            </ModalV2.Close>
-            <Button className="flex-1" variant="primary" type="submit" name="update">
-              <LoadingIcon
-                icon="snooze"
-                className="size-5"
-                loading={fetcher.state === 'submitting'}
+          </p>
+        </ModalV2.Description>
+
+        <form.Field name="comment">
+          {(field) => (
+            <div className="row-span-full grid grid-rows-subgrid gap-2">
+              <FormLabel name={field.name}>
+                {t('cases:case_detail.add_rule_snooze.comment.label')}
+              </FormLabel>
+              <TextArea
+                className="w-full"
+                defaultValue={field.state.value}
+                onChange={(e) => field.handleChange(e.currentTarget.value)}
+                name={field.name}
+                onBlur={field.handleBlur}
+                borderColor={field.state.meta.errors.length === 0 ? 'greyfigma-90' : 'redfigma-47'}
+                placeholder={t('cases:case_detail.add_rule_snooze.comment.placeholder')}
               />
-              {t('cases:case_detail.add_rule_snooze.snooze_this_value')}
-            </Button>
-          </div>
+            </div>
+          )}
+        </form.Field>
+
+        <div className="grid w-full grid-cols-2 grid-rows-[repeat(3,_max-content)] gap-2">
+          <form.Field name="durationValue">
+            {(field) => (
+              <div className="row-span-full grid grid-rows-subgrid gap-2">
+                <FormLabel name={field.name}>
+                  {t('cases:case_detail.add_rule_snooze.duration_value')}
+                </FormLabel>
+                <FormInput
+                  type="number"
+                  name={field.name}
+                  value={field.state.value}
+                  onChange={(e) => field.handleChange(+e.currentTarget.value)}
+                  onBlur={field.handleBlur}
+                  valid={field.state.meta.errors.length === 0}
+                  className="w-full"
+                />
+                <FormErrorOrDescription errors={field.state.meta.errors} />
+              </div>
+            )}
+          </form.Field>
+
+          <form.Field name="durationUnit">
+            {(field) => (
+              <div className="row-span-full grid grid-rows-subgrid gap-2">
+                <FormLabel name={field.name}>
+                  {t('cases:case_detail.add_rule_snooze.duration_unit')}
+                </FormLabel>
+                <Select.Default
+                  className="h-10 w-full"
+                  defaultValue={field.state.value}
+                  onValueChange={(unit) =>
+                    field.handleChange(
+                      unit as Exclude<DurationUnit, 'seconds' | 'years' | 'minutes' | 'months'>,
+                    )
+                  }
+                >
+                  {durationUnitOptions.map((unit) => (
+                    <Select.DefaultItem key={unit} value={unit}>
+                      {dateTimeFieldNames.of(adaptDateTimeFieldCodes(unit))}
+                    </Select.DefaultItem>
+                  ))}
+                </Select.Default>
+                <FormErrorOrDescription />
+              </div>
+            )}
+          </form.Field>
+        </div>
+
+        <div className="flex flex-1 flex-row gap-2">
+          <ModalV2.Close render={<Button className="flex-1" variant="secondary" />}>
+            {t('common:cancel')}
+          </ModalV2.Close>
+          <Button className="flex-1" variant="primary" type="submit" name="update">
+            <LoadingIcon
+              icon="snooze"
+              className="size-5"
+              loading={fetcher.state === 'submitting'}
+            />
+            {t('cases:case_detail.add_rule_snooze.snooze_this_value')}
+          </Button>
         </div>
-      </fetcher.Form>
-    </FormProvider>
+      </div>
+    </form>
   );
 }
