feat(trading): refactor ledger export form validation (#5379)

apps/trading/components/ledger-container/ledger-container.tsx

@@ -15,15 +15,12 @@ export const LedgerContainer = () => {
   });
 
   const assets = (data?.party?.accountsConnection?.edges ?? [])
-    .map<PartyAssetFieldsFragment>(
-      (item) => item?.node?.asset ?? ({} as PartyAssetFieldsFragment)
-    )
-    .reduce((aggr, item) => {
-      if ('id' in item && 'symbol' in item) {
-        aggr[item.id as string] = item.symbol as string;
-      }
-      return aggr;
-    }, {} as Record<string, string>);
+    .map((item) => item?.node?.asset)
+    .filter((asset): asset is PartyAssetFieldsFragment => !!asset?.id)
+    .reduce(
+      (aggr, item) => Object.assign(aggr, { [item.id]: item.symbol }),
+      {} as Record<string, string>
+    );
 
   if (!pubKey) {
     return (

libs/ledger/src/lib/ledger-export-form.spec.tsx

@@ -278,18 +278,4 @@ describe('createDownloadUrl', () => {
       )}&dateRange.endTimestamp=${toNanoSeconds(dateTo)}`
     );
   });
-
-  it('should throw if invalid args are provided', () => {
-    // invalid url
-    expect(() => {
-      // @ts-ignore override z.infer type
-      createDownloadUrl({ ...args, protohost: 'foo' });
-    }).toThrow();
-
-    // invalid partyId
-    expect(() => {
-      // @ts-ignore override z.infer type
-      createDownloadUrl({ ...args, partyId: 'z'.repeat(64) });
-    }).toThrow();
-  });
 });

libs/ledger/src/lib/ledger-export-form.tsx

@@ -1,18 +1,18 @@
-import { useRef, useState } from 'react';
-import { format, subDays } from 'date-fns';
+import { useRef, useCallback } from 'react';
+import { subDays } from 'date-fns';
+import { Controller, useForm } from 'react-hook-form';
 import {
+  InputError,
   Intent,
-  Loader,
   TradingButton,
   TradingFormGroup,
   TradingInput,
   TradingSelect,
 } from '@vegaprotocol/ui-toolkit';
-import { z } from 'zod';
 import {
   formatForInput,
+  getDateTimeFormat,
   toNanoSeconds,
-  VEGA_ID_REGEX,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import { localLoggerFactory } from '@vegaprotocol/logger';
@@ -35,18 +35,18 @@ const getProtoHost = (vegaurl: string) => {
   return `${loc.protocol}//${loc.host}`;
 };
 
-const downloadSchema = z.object({
-  protohost: z.string().url().nonempty(),
-  partyId: z.string().regex(VEGA_ID_REGEX).nonempty(),
-  assetId: z.string().regex(VEGA_ID_REGEX).nonempty(),
-  dateFrom: z.string().nonempty(),
-  dateTo: z.string().optional(),
-});
-
-export const createDownloadUrl = (args: z.infer<typeof downloadSchema>) => {
-  // check args from form inputs
-  downloadSchema.parse(args);
+type LedgerFormValues = {
+  assetId: string;
+  dateFrom: string;
+  dateTo?: string;
+};
 
+export const createDownloadUrl = (
+  args: LedgerFormValues & {
+    partyId: string;
+    protohost: string;
+  }
+) => {
   const params = new URLSearchParams();
   params.append('partyId', args.partyId);
   params.append('assetId', args.assetId);
@@ -71,55 +71,36 @@ interface Props {
 
 export const LedgerExportForm = ({ partyId, vegaUrl, assets }: Props) => {
   const now = useRef(new Date());
-  const [dateFrom, setDateFrom] = useState(() => {
-    return formatForInput(subDays(now.current, 7));
+  const { control, handleSubmit, watch } = useForm<LedgerFormValues>({
+    defaultValues: {
+      dateFrom: formatForInput(subDays(now.current, 7)),
+      dateTo: '',
+      assetId: Object.keys(assets)[0],
+    },
   });
-  const [dateTo, setDateTo] = useState('');
+  const dateTo = watch('dateTo');
   const maxFromDate = formatForInput(new Date(dateTo || now.current));
   const maxToDate = formatForInput(now.current);
-
-  const [assetId, setAssetId] = useState(Object.keys(assets)[0]);
   const protohost = getProtoHost(vegaUrl);
-  const disabled = Boolean(!assetId);
 
   const hasItem = useLedgerDownloadFile((store) => store.hasItem);
   const updateDownloadQueue = useLedgerDownloadFile(
     (store) => store.updateQueue
   );
 
-  const assetDropDown = (
-    <TradingSelect
-      id="select-ledger-asset"
-      value={assetId}
-      onChange={(e) => {
-        setAssetId(e.target.value);
-      }}
-      className="w-full"
-      data-testid="select-ledger-asset"
-    >
-      {Object.keys(assets).map((assetKey) => (
-        <option key={assetKey} value={assetKey}>
-          {assets[assetKey]}
-        </option>
-      ))}
-    </TradingSelect>
-  );
-
+  const startDownload = useCallback(
+    async (formValues: LedgerFormValues) => {
       const link = createDownloadUrl({
         protohost,
         partyId,
-    assetId,
-    dateFrom,
-    dateTo,
+        ...formValues,
       });
 
-  const startDownload = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
+      const dateTimeFormatter = getDateTimeFormat();
       const title = t('Downloading for %s from %s till %s', [
-      assets[assetId],
-      format(new Date(dateFrom), 'dd MMMM yyyy HH:mm'),
-      format(new Date(dateTo || Date.now()), 'dd MMMM yyyy HH:mm'),
+        assets[formValues.assetId],
+        dateTimeFormatter.format(new Date(formValues.dateFrom)),
+        dateTimeFormatter.format(new Date(formValues.dateTo || Date.now())),
       ]);
 
       const downloadStoreItem = {
@@ -151,7 +132,8 @@ export const LedgerExportForm = ({ partyId, vegaUrl, assets }: Props) => {
         }
         const { headers } = resp;
         const nameHeader = headers.get('content-disposition');
-      const filename = nameHeader?.split('=').pop() ?? DEFAULT_EXPORT_FILE_NAME;
+        const filename =
+          nameHeader?.split('=').pop() ?? DEFAULT_EXPORT_FILE_NAME;
         updateDownloadQueue({
           ...downloadStoreItem,
           filename,
@@ -167,7 +149,10 @@ export const LedgerExportForm = ({ partyId, vegaUrl, assets }: Props) => {
           });
         }
       } catch (err) {
-      localLoggerFactory({ application: 'ledger' }).error('Download file', err);
+        localLoggerFactory({ application: 'ledger' }).error(
+          'Download file',
+          err
+        );
         updateDownloadQueue({
           ...downloadStoreItem,
           intent: Intent.Danger,
@@ -178,7 +163,9 @@ export const LedgerExportForm = ({ partyId, vegaUrl, assets }: Props) => {
       } finally {
         clearTimeout(ts);
       }
-  };
+    },
+    [assets, hasItem, partyId, protohost, updateDownloadQueue]
+  );
 
   if (!protohost || Object.keys(assets).length === 0) {
     return null;
@@ -187,49 +174,117 @@ export const LedgerExportForm = ({ partyId, vegaUrl, assets }: Props) => {
   const offset = new Date().getTimezoneOffset();
 
   return (
-    <form onSubmit={startDownload} className="p-4 w-[350px]">
+    <form
+      onSubmit={handleSubmit(startDownload)}
+      className="p-4 w-[350px]"
+      noValidate
+    >
       <h2 className="mb-4">{t('Export ledger entries')}</h2>
-      <TradingFormGroup label={t('Select asset')} labelFor="asset">
-        {assetDropDown}
+      <Controller
+        name="assetId"
+        control={control}
+        rules={{
+          required: t('You need to select an asset'),
+        }}
+        render={({ field, fieldState }) => (
+          <div className="mb-2">
+            <TradingFormGroup
+              label={t('Select asset')}
+              labelFor="asset"
+              compact
+            >
+              <TradingSelect
+                {...field}
+                id="select-ledger-asset"
+                className="w-full"
+                data-testid="select-ledger-asset"
+              >
+                {Object.keys(assets).map((assetKey) => (
+                  <option key={assetKey} value={assetKey}>
+                    {assets[assetKey]}
+                  </option>
+                ))}
+              </TradingSelect>
             </TradingFormGroup>
-      <TradingFormGroup label={t('Date from')} labelFor="date-from">
+            {fieldState.error && (
+              <InputError>{fieldState.error.message}</InputError>
+            )}
+          </div>
+        )}
+      />
+      <Controller
+        name="dateFrom"
+        control={control}
+        rules={{
+          required: t('You need to provide a date from'),
+          max: {
+            value: maxFromDate,
+            message: dateTo
+              ? t('Date from cannot be greater than date to')
+              : t('Date from cannot be in the future'),
+          },
+          deps: ['dateTo'],
+        }}
+        render={({ field, fieldState }) => (
+          <div className="mb-2">
+            <TradingFormGroup
+              label={t('Date from')}
+              labelFor="date-from"
+              compact
+            >
               <TradingInput
+                {...field}
                 type="datetime-local"
                 data-testid="date-from"
                 id="date-from"
-          value={dateFrom}
-          onChange={(e) => setDateFrom(e.target.value)}
                 max={maxFromDate}
               />
             </TradingFormGroup>
-      <TradingFormGroup label={t('Date to')} labelFor="date-to">
+            {fieldState.error && (
+              <InputError>{fieldState.error.message}</InputError>
+            )}
+          </div>
+        )}
+      />
+      <Controller
+        name="dateTo"
+        control={control}
+        rules={{
+          max: {
+            value: maxToDate,
+            message: t('Date to cannot be in the future'),
+          },
+        }}
+        render={({ field, fieldState }) => (
+          <div className="mb-2">
+            <TradingFormGroup label={t('Date to')} labelFor="date-to" compact>
               <TradingInput
+                {...field}
                 type="datetime-local"
                 data-testid="date-to"
                 id="date-to"
-          value={dateTo}
-          onChange={(e) => setDateTo(e.target.value)}
                 max={maxToDate}
               />
             </TradingFormGroup>
+            {fieldState.error && (
+              <InputError>{fieldState.error.message}</InputError>
+            )}
+          </div>
+        )}
+      />
       <div className="relative text-sm" title={t('Download all to .csv file')}>
-        <TradingButton
-          fill
-          disabled={disabled}
-          type="submit"
-          data-testid="ledger-download-button"
-        >
+        <TradingButton fill type="submit" data-testid="ledger-download-button">
           {t('Download')}
         </TradingButton>
       </div>
-      {offset && (
+      {offset ? (
         <p className="text-xs text-neutral-400 mt-1">
           {t(
             'The downloaded file uses the UTC time zone for all listed times. Your time zone is UTC%s.',
             [toHoursAndMinutes(offset)]
           )}
         </p>
-      )}
+      ) : null}
     </form>
   );
 };