Refactored useDateRange to always use query string. Fixed all time filter.

src/components/hooks/index.ts

@@ -77,7 +77,6 @@ export * from './useModified';
 export * from './useNavigation';
 export * from './usePagedQuery';
 export * from './usePageParameters';
-export * from './useQueryStringDate';
 export * from './useRegionNames';
 export * from './useSlug';
 export * from './useSticky';

src/components/hooks/queries/useDateRangeQuery.ts

@@ -1,12 +1,23 @@
 import { useApi } from '../useApi';
 import { ReactQueryOptions } from '@/lib/types';
 
+type DateRange = {
+  startDate?: string;
+  endDate?: string;
+};
+
 export function useDateRangeQuery(websiteId: string, options?: ReactQueryOptions) {
   const { get, useQuery } = useApi();
-  return useQuery<any>({
+
+  const { data } = useQuery<DateRange>({
     queryKey: ['date-range', websiteId],
     queryFn: () => get(`/websites/${websiteId}/daterange`),
     enabled: !!websiteId,
     ...options,
   });
+
+  return {
+    startDate: data?.startDate ? new Date(data.startDate) : null,
+    endDate: data?.endDate ? new Date(data.endDate) : null,
+  };
 }

src/components/hooks/useDateParameters.ts

@@ -1,10 +1,10 @@
 import { useDateRange } from './useDateRange';
 import { useTimezone } from './useTimezone';
 
-export function useDateParameters(websiteId: string) {
+export function useDateParameters() {
   const {
     dateRange: { startDate, endDate, unit },
-  } = useDateRange(websiteId);
+  } = useDateRange();
   const { timezone, toUtc } = useTimezone();
 
   return {

src/components/hooks/useDateRange.ts

@@ -1,35 +1,32 @@
-import { getMinimumUnit, parseDateRange } from '@/lib/date';
+import { useNavigation } from '@/components/hooks/useNavigation';
+import { useMemo } from 'react';
+import { getCompareDate, getOffsetDateRange, parseDateRange } from '@/lib/date';
 import { useLocale } from '@/components/hooks/useLocale';
-import { useApi } from '@/components/hooks//useApi';
-import { useQueryStringDate } from '@/components/hooks/useQueryStringDate';
-import { useGlobalState } from '@/components/hooks/useGlobalState';
+import { DEFAULT_DATE_RANGE_VALUE } from '@/lib/constants';
 
-export function useDateRange(websiteId: string) {
-  const { get } = useApi();
+export function useDateRange(options: { ignoreOffset?: boolean } = {}) {
+  const {
+    query: { date = DEFAULT_DATE_RANGE_VALUE, offset = 0, compare = 'prev', all },
+  } = useNavigation();
   const { locale } = useLocale();
-  const { dateRange: defaultDateRange, dateCompare } = useQueryStringDate();
 
-  const [dateRange, setDateRange] = useGlobalState(`date-range:${websiteId}`, defaultDateRange);
+  const dateRange = useMemo(() => {
+    const dateRangeObject = parseDateRange(date, locale);
 
-  const setDateRangeValue = async (value: string) => {
-    if (value === 'all') {
-      const result = await get(`/websites/${websiteId}/daterange`);
-      const { mindate, maxdate } = result;
+    return !options.ignoreOffset && offset
+      ? getOffsetDateRange(dateRangeObject, +offset)
+      : dateRangeObject;
+  }, [date, offset, options]);
 
-      const startDate = new Date(mindate);
-      const endDate = new Date(maxdate);
-      const unit = getMinimumUnit(startDate, endDate);
+  const dateCompare = getCompareDate(compare, dateRange.startDate, dateRange.endDate);
 
-      setDateRange({
-        startDate,
-        endDate,
-        unit,
-        value,
-      });
-    } else {
-      setDateRange(parseDateRange(value, locale));
-    }
+  return {
+    date,
+    offset,
+    compare,
+    isAllTime: !!all,
+    isCustomRange: date.startsWith('range:'),
+    dateRange,
+    dateCompare,
   };
-
-  return { dateRange, dateCompare, setDateRange, setDateRangeValue };
 }

src/components/hooks/useQueryStringDate.ts

@@ -1,24 +0,0 @@
-import { useNavigation } from '@/components/hooks/useNavigation';
-import { useMemo } from 'react';
-import { getCompareDate, getOffsetDateRange, parseDateRange } from '@/lib/date';
-import { useLocale } from '@/components/hooks/useLocale';
-import { DEFAULT_DATE_RANGE_VALUE } from '@/lib/constants';
-
-export function useQueryStringDate(options: { ignoreOffset?: boolean } = {}) {
-  const {
-    query: { date = DEFAULT_DATE_RANGE_VALUE, offset = 0, compare = 'prev' },
-  } = useNavigation();
-  const { locale } = useLocale();
-
-  const dateRange = useMemo(() => {
-    const dateRangeObject = parseDateRange(date, locale);
-
-    return !options.ignoreOffset && offset
-      ? getOffsetDateRange(dateRangeObject, +offset)
-      : dateRangeObject;
-  }, [date, offset, options]);
-
-  const dateCompare = getCompareDate(compare, dateRange.startDate, dateRange.endDate);
-
-  return { date, offset, dateRange, dateCompare };
-}

src/components/input/RefreshButton.tsx

@@ -12,7 +12,7 @@ export function RefreshButton({
   isLoading?: boolean;
 }) {
   const { formatMessage, labels } = useMessages();
-  const { dateRange } = useDateRange(websiteId);
+  const { dateRange } = useDateRange();
 
   function handleClick() {
     if (!isLoading && dateRange) {

src/components/input/SegmentFilters.tsx

@@ -1,7 +1,8 @@
-import { List, ListItem } from '@umami/react-zen';
+import { IconLabel, List, ListItem } from '@umami/react-zen';
 import { useWebsiteSegmentsQuery } from '@/components/hooks';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { Empty } from '@/components/common/Empty';
+import { ChartPie, UserPlus } from '@/components/icons';
 
 export interface SegmentFiltersProps {
   websiteId: string;
@@ -29,7 +30,9 @@ export function SegmentFilters({
         {data?.data?.map(item => {
           return (
             <ListItem key={item.id} id={item.id}>
-              {item.name}
+              <IconLabel icon={type === 'segment' ? <ChartPie /> : <UserPlus />}>
+                {item.name}
+              </IconLabel>
             </ListItem>
           );
         })}

src/components/input/WebsiteDateFilter.tsx

@@ -1,10 +1,10 @@
+import { useCallback, useMemo } from 'react';
 import { Button, Icon, Row, Text, Select, ListItem } from '@umami/react-zen';
 import { isAfter } from 'date-fns';
 import { ChevronRight } from '@/components/icons';
-import { useDateRange, useMessages, useNavigation } from '@/components/hooks';
+import { useDateRange, useDateRangeQuery, useMessages, useNavigation } from '@/components/hooks';
+import { getDateRangeValue } from '@/lib/date';
 import { DateFilter } from './DateFilter';
-import { getOffsetDateRange } from '@/lib/date';
-import { useCallback } from 'react';
 
 export interface WebsiteDateFilterProps {
   websiteId: string;
@@ -20,30 +20,33 @@ export function WebsiteDateFilter({
   showButtons = true,
   allowCompare,
 }: WebsiteDateFilterProps) {
-  const { dateRange, setDateRange, setDateRangeValue } = useDateRange(websiteId);
-  const { value, endDate } = dateRange;
+  const { dateRange, isAllTime, isCustomRange } = useDateRange();
   const { formatMessage, labels } = useMessages();
   const {
     router,
     updateParams,
     query: { compare = 'prev', offset = 0 },
   } = useNavigation();
-  const isAllTime = value === 'all';
+  const disableForward = isAllTime || isAfter(dateRange.endDate, new Date());
 
-  const isCustomRange = value.startsWith('range');
-
-  const disableForward = value === 'all' || isAfter(endDate, new Date());
+  const websiteDateRange = useDateRangeQuery(websiteId);
 
   const handleChange = (date: string) => {
-    setDateRangeValue(date);
-    router.push(updateParams({ date, offset: undefined }));
+    if (date === 'all') {
+      router.push(
+        updateParams({
+          date: getDateRangeValue(websiteDateRange.startDate, websiteDateRange.endDate),
+          offset: undefined,
+          all: 1,
+        }),
+      );
+    } else {
+      router.push(updateParams({ date, offset: undefined }));
+    }
   };
 
   const handleIncrement = useCallback(
     (increment: number) => {
-      const offsetDate = getOffsetDateRange(dateRange, +offset + increment);
-
-      setDateRange(offsetDate);
       router.push(updateParams({ offset: +offset + increment }));
     },
     [offset],
@@ -53,6 +56,12 @@ export function WebsiteDateFilter({
     router.push(updateParams({ compare }));
   };
 
+  const dateValue = useMemo(() => {
+    return offset !== 0
+      ? getDateRangeValue(dateRange.startDate, dateRange.endDate)
+      : dateRange.value;
+  }, [dateRange]);
+
   return (
     <Row gap>
       {showButtons && !isAllTime && !isCustomRange && (
@@ -71,7 +80,7 @@ export function WebsiteDateFilter({
       )}
       <Row minWidth="200px">
         <DateFilter
-          value={value}
+          value={dateValue}
           onChange={handleChange}
           showAllTime={showAllTime}
           renderDate={+offset !== 0}

src/components/input/WebsiteFilterButton.tsx

@@ -0,0 +1,44 @@
+import { Button, Icon, DialogTrigger, Dialog, Modal, Text } from '@umami/react-zen';
+import { ListFilter } from '@/components/icons';
+import { FilterEditForm } from '@/components/input/FilterEditForm';
+import { useMessages, useNavigation } from '@/components/hooks';
+import { filtersArrayToObject } from '@/lib/params';
+
+export function WebsiteFilterButton({
+  websiteId,
+  showText = true,
+}: {
+  websiteId: string;
+  position?: 'bottom' | 'top' | 'left' | 'right';
+  alignment?: 'end' | 'center' | 'start';
+  showText?: boolean;
+}) {
+  const { formatMessage, labels } = useMessages();
+  const { updateParams, router } = useNavigation();
+
+  const handleChange = ({ filters, segment, cohort }: any) => {
+    const params = filtersArrayToObject(filters);
+
+    const url = updateParams({ ...params, segment, cohort });
+
+    router.push(url);
+  };
+
+  return (
+    <DialogTrigger>
+      <Button variant="outline">
+        <Icon>
+          <ListFilter />
+        </Icon>
+        {showText && <Text>{formatMessage(labels.filter)}</Text>}
+      </Button>
+      <Modal>
+        <Dialog title={formatMessage(labels.filters)} style={{ width: 800, minHeight: 600 }}>
+          {({ close }) => {
+            return <FilterEditForm websiteId={websiteId} onChange={handleChange} onClose={close} />;
+          }}
+        </Dialog>
+      </Modal>
+    </DialogTrigger>
+  );
+}

src/components/input/WebsiteMonthSelect.tsx

@@ -1,16 +1,17 @@
-import { useDateRange } from '@/components/hooks';
-import { dateToRangeValue } from '@/lib/date';
+import { useDateRange, useNavigation } from '@/components/hooks';
+import { getMonthDateRangeValue } from '@/lib/date';
 import { MonthSelect } from './MonthSelect';
 
-export function WebsiteMonthSelect({ websiteId }: { websiteId: string }) {
+export function WebsiteMonthSelect() {
+  const { router, updateParams } = useNavigation();
   const {
     dateRange: { startDate },
-    saveDateRange,
-  } = useDateRange(websiteId);
+  } = useDateRange();
 
   const handleMonthSelect = (date: Date) => {
-    const range = dateToRangeValue(date);
-    saveDateRange(range);
+    const range = getMonthDateRangeValue(date);
+
+    router.push(updateParams({ date: range, offset: undefined }));
   };
 
   return <MonthSelect date={startDate} onChange={handleMonthSelect} />;

src/components/metrics/EventsChart.tsx

@@ -14,7 +14,7 @@ export interface EventsChartProps extends BarChartProps {
 export function EventsChart({ websiteId, focusLabel }: EventsChartProps) {
   const {
     dateRange: { startDate, endDate, unit },
-  } = useDateRange(websiteId);
+  } = useDateRange();
   const { locale } = useLocale();
   const { data, isLoading, error } = useWebsiteEventsSeriesQuery(websiteId);
   const [label, setLabel] = useState<string>(focusLabel);