DateSelectors.tsx

import { Group } from '@mantine/core';
import { DateInput } from '@mantine/dates';
import { IconCalendar } from '@tabler/icons-react';
import { useEffect, useState } from 'react';
import { useRecoilState } from 'recoil';
import { measurementPeriodEndState, measurementPeriodStartState } from '../../state/atoms/measurementPeriod';

interface DateSelectorsProps {
  setDatesValid: (val: boolean) => void;
}

export default function DateSelectors({ setDatesValid }: DateSelectorsProps) {
  const [periodStart, setPeriodStart] = useRecoilState(measurementPeriodStartState);
  const [periodEnd, setPeriodEnd] = useRecoilState(measurementPeriodEndState);
  const [dateInputError, setDateInputError] = useState<string | null>(null);

  useEffect(() => {
    if (periodStart && periodEnd) {
      if (periodStart.valueOf() > periodEnd.valueOf()) {
        setDateInputError('Period start must come before period end');
        setDatesValid(false);
      } else {
        setDatesValid(true);
        setDateInputError(null);
      }
    } else {
      setDatesValid(false);
    }
  }, [periodStart, periodEnd, setDatesValid]);

  return (
    <Group grow>
      <DateInput
        required
        label="Start"
        value={periodStart}
        onChange={setPeriodStart}
        icon={<IconCalendar size={25} />}
        defaultLevel="decade"
        placeholder="yyyy-mm-dd"
        error={dateInputError}
      />
      <DateInput
        required
        label="End"
        value={periodEnd}
        onChange={setPeriodEnd}
        icon={<IconCalendar size={25} />}
        defaultLevel="decade"
        placeholder="yyyy-mm-dd"
        error={dateInputError}
      />
    </Group>
  );
}