Function WebsiteDateFilter

src/components/input/WebsiteDateFilter.tsx:17–105

({
  websiteId,
  showAllTime = true,
  showButtons = true,
  allowCompare,
}: WebsiteDateFilterProps)

}

export function WebsiteDateFilter({
  websiteId,
  showAllTime = true,
  showButtons = true,
  allowCompare,
}: WebsiteDateFilterProps) {
  const { dateRange, isAllTime, isCustomRange } = useDateRange();
  const { t, labels } = useMessages();
  const {
    router,
    updateParams,
    query: { compare = 'prev', offset = 0 },
  } = useNavigation();
  const disableForward = isAllTime || isAfter(dateRange.endDate, new Date());
  const showCompare = allowCompare && !isAllTime;

  const websiteDateRange = useDateRangeQuery(websiteId);
  const { startDate, endDate } = websiteDateRange;
  const hasData = startDate && endDate;

  const handleChange = (date: string) => {
    if (date === 'all' && hasData) {
      router.push(
        updateParams({
          date: `${getDateRangeValue(websiteDateRange.startDate, websiteDateRange.endDate)}:all`,
          offset: undefined,
          page: 1,
        }),
      );
    } else {
      router.push(updateParams({ date, offset: undefined, unit: undefined, page: 1 }));
    }
  };

  const handleIncrement = increment => {
    router.push(updateParams({ offset: Number(offset) + increment }));
  };
  const handleSelect = (compare: any) => {
    router.push(updateParams({ compare }));
  };

  const dateValue = useMemo(() => {
    return offset !== 0
      ? getDateRangeValue(dateRange.startDate, dateRange.endDate)
      : dateRange.value;
  }, [dateRange]);

  return (
    <Row wrap="wrap" gap>
      {showButtons && !isAllTime && !isCustomRange && (
        <Row gap="1">
          <Button onPress={() => handleIncrement(-1)} variant="outline">
            <Icon rotate={180}>
              <ChevronRight />
            </Icon>
          </Button>
          <Button onPress={() => handleIncrement(1)} variant="outline" isDisabled={disableForward}>
            <Icon>