Function LogsDateFilter

app/src/components/Filters/LogsDateFilter.tsx:21–60

()

import { getDefaultDateFilter, useDateFilter } from "./useDateFilter";

const LogsDateFilter = () => {
  const { filters, updateFilter, addFilter, deleteFilter } = useDateFilter();
  const filter = filters[0];

  const updateOrAddFilter = useCallback(
    (comparator: FilterData["comparator"]) => {
      filter ? updateFilter({ ...filter, comparator: comparator }) : addFilter(comparator);
    },
    [filter, updateFilter, addFilter],
  );

  return (
    <ButtonGroup size="sm" isAttached variant="outline">
      {["LAST 15M", "LAST 24H", "LAST 7D"].map((timeFrame) => (
        <Button
          key={timeFrame}
          backgroundColor={"white"}
          isActive={filter?.comparator === timeFrame}
          onClick={() => updateOrAddFilter(timeFrame as FilterData["comparator"])}
        >
          {timeFrame.split(" ")[1]?.toLowerCase()}
        </Button>
      ))}
      <Button backgroundColor={"white"} isActive={!filter} onClick={deleteFilter}>
        All
      </Button>

      <Popover>
        {({ onClose }) => (
          <>
            <PopoverTrigger>
              <Button isActive={filter?.comparator === "RANGE"}>Custom</Button>
            </PopoverTrigger>
            <DateRange filter={filter} close={onClose} />
          </>
        )}
      </Popover>
    </ButtonGroup>
  );
};

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