Function DateRange

app/src/components/Filters/LogsDateFilter.tsx:62–145

({ filter, close }: { filter?: FilterData; close: () => void })

};

const DateRange = ({ filter, close }: { filter?: FilterData; close: () => void }) => {
  const updateFilter = useDateFilter().updateFilter;

  const [firstDate, setFirstDate] = useState<number>(
    filter && Array.isArray(filter.value) ? filter.value[0] : Date.now(),
  );
  const [secondDate, setSecondDate] = useState<number>(
    filter && Array.isArray(filter.value) ? filter?.value[1] : Date.now(),
  );

  const debouncedUpdateFilter = useCallback(
    debounce((filter: FilterData) => updateFilter(filter), 500, {
      leading: true,
    }),
    [updateFilter],
  );

  const updateDate = useCallback(
    (dateStr: string, isSecondDate?: boolean) => {
      const date = dateStr ? new Date(dateStr).getTime() : Date.now();
      if (isSecondDate) {
        if (date < firstDate) {
          setFirstDate(date);
          setSecondDate(firstDate);
        } else {
          setSecondDate(date);
        }
      } else {
        if (date > secondDate) {
          setFirstDate(secondDate);
          setSecondDate(date);
        } else {
          setFirstDate(date);
        }
      }
    },
    [firstDate, secondDate],
  );

  const handleSave = useCallback(() => {
    debouncedUpdateFilter({ ...getDefaultDateFilter("RANGE"), value: [firstDate, secondDate] });
  }, [firstDate, secondDate, filter, debouncedUpdateFilter]);

  return (
    <Portal>
      <PopoverContent w="fit-content" shadow={"md"} p={4}>
        <PopoverBody>
          <Flex flexDir={{ base: "column", md: "row" }} alignItems="center">
            <Input
              type="datetime-local"
              w={240}
              aria-label="first date"
              onChange={(e) => updateDate(e.target.value)}
              value={formatDateForPicker(firstDate)}
            />

            <Icon as={BsDash} />
            <Input