new.tsx

import {
  Button,
  ChakraProvider,
  FormControl,
  FormErrorMessage,
  FormLabel,
  Input
} from '@chakra-ui/react';
import { ActionFunction, Form, json, useActionData } from 'remix';

import { createTimelineWithTimelineVersion } from '../../../../domain/timeline/use-cases/create-timeline-with-timeline-version/create-timeline-with-timeline-version';
import { castFormDataEntryValuesToString } from '../../../../helpers/castFormDataEntryValueToString';
import { errorHnadledRoute } from '../../../../helpers/errors';
import { isString } from '../../../../helpers/validators';
import { useTranslation } from '../../hooks/use-translation';

export const action: ActionFunction = errorHnadledRoute(async ({ request }) => {
  const formDataEntries = Array.from(await request.formData());

  const formData = Object.fromEntries(formDataEntries);

  const validationErrors = validateFormData(formData);

  if (validationErrors) {
    return json({ validationErrors }, { status: 400 });
  }

  const { name, startDate } = Object.fromEntries(
    castFormDataEntryValuesToString(formDataEntries)
  );

  const timelineProps = {};

  const timelineVersionProps = {
    name,
    startDate: new Date(startDate)
  };

  const { timeline, timelineVersion } = await createTimelineWithTimelineVersion(
    timelineProps,
    timelineVersionProps
  );

  return { timeline, timelineVersion };
});

const validateFormData = (data: Record<string, FormDataEntryValue>) => {
  const errors: Record<string, string> = {};

  if (!isString(data.name)) {
    errors.name = 'validationErrors.timeline.name.invalid';
  }

  const hasErrors = !!Object.keys(errors).length;

  if (hasErrors) {
    return errors;
  }

  return;
};

const NewTimelineRoute = () => {
  const { t } = useTranslation();

  const actionData =
    useActionData<{ validationErrors: Record<string, string> }>();

  console.log(actionData);

  const errors = actionData?.validationErrors;

  return (
    <ChakraProvider>
      <Form method="post">
        <FormControl>
          <FormLabel htmlFor="name">{t('timelineForm.name')}</FormLabel>
          <Input autoFocus id="name" name="name" />
        </FormControl>

        <FormControl mb="4" isInvalid={!!errors?.startDate}>
          <FormLabel htmlFor="date">{t('timelineForm.startDate')}</FormLabel>
          <Input id="startDate" name="startDate" type="date" />

          <FormErrorMessage>
            {typeof errors?.startDate === 'string' && t(errors.startDate)}
          </FormErrorMessage>
        </FormControl>

        <div>
          <Button colorScheme="blue" type="submit">
            Save
          </Button>
        </div>
      </Form>
    </ChakraProvider>
  );
};

export default NewTimelineRoute;