Refactored date navigation.

src/components/input/DateFilter.tsx

@@ -5,12 +5,13 @@ import DatePickerForm from 'components/metrics/DatePickerForm';
 import { useLocale } from 'components/hooks';
 import { useMessages } from 'components/hooks';
 import Icons from 'components/icons';
-import { formatDate } from 'lib/date';
+import { formatDate, parseDateValue } from 'lib/date';
 
 export interface DateFilterProps {
   value: string;
   startDate: Date;
   endDate: Date;
+  offset: number;
   className?: string;
   onChange?: (value: string) => void;
   selectedUnit?: string;
@@ -19,17 +20,18 @@ export interface DateFilterProps {
 }
 
 export function DateFilter({
-  value,
   startDate,
   endDate,
+  value,
+  offset,
   className,
   onChange,
-  selectedUnit,
   showAllTime = false,
   alignment = 'end',
 }: DateFilterProps) {
   const { formatMessage, labels } = useMessages();
   const [showPicker, setShowPicker] = useState(false);
+  const { locale } = useLocale();
 
   const options = [
     { label: formatMessage(labels.today), value: '1day' },
@@ -76,19 +78,6 @@ export function DateFilter({
     },
   ].filter(n => n);
 
-  const renderValue = (value: string) => {
-    return value.startsWith('range') ? (
-      <CustomRange
-        startDate={startDate}
-        endDate={endDate}
-        selectedUnit={selectedUnit}
-        onClick={() => handleChange('custom')}
-      />
-    ) : (
-      options.find(e => e.value === value).label
-    );
-  };
-
   const handleChange = (value: string) => {
     if (value === 'custom') {
       setShowPicker(true);
@@ -104,6 +93,31 @@ export function DateFilter({
 
   const handleClose = () => setShowPicker(false);
 
+  const renderValue = (value: string) => {
+    const { unit } = parseDateValue(value);
+
+    if (offset && unit === 'year') {
+      return formatDate(startDate, 'yyyy', locale);
+    }
+
+    if (offset && unit === 'month') {
+      return formatDate(startDate, 'MMMM yyyy', locale);
+    }
+
+    if (value.startsWith('range') || offset) {
+      return (
+        <CustomRange
+          startDate={startDate}
+          endDate={endDate}
+          unit={unit}
+          onClick={() => handleChange('custom')}
+        />
+      );
+    }
+
+    return options.find(e => e.value === value).label;
+  };
+
   return (
     <>
       <Dropdown
@@ -137,10 +151,10 @@ export function DateFilter({
   );
 }
 
-const CustomRange = ({ startDate, endDate, selectedUnit, onClick }) => {
+const CustomRange = ({ startDate, endDate, unit, onClick }) => {
   const { locale } = useLocale();
 
-  const monthFormat = +selectedUnit?.num === 1 && selectedUnit?.unit === 'month';
+  const monthFormat = unit === 'month';
 
   function handleClick(e) {
     e.stopPropagation();

src/components/input/WebsiteDateFilter.tsx

@@ -1,36 +1,35 @@
 import { useDateRange } from 'components/hooks';
 import { isAfter } from 'date-fns';
-import { incrementDateRange } from 'lib/date';
+import { getOffsetDateRange } from 'lib/date';
 import { Button, Icon, Icons } from 'react-basics';
 import DateFilter from './DateFilter';
 import styles from './WebsiteDateFilter.module.css';
+import { DateRange } from 'lib/types';
 
 export function WebsiteDateFilter({ websiteId }: { websiteId: string }) {
   const [dateRange, setDateRange] = useDateRange(websiteId);
-  const { value, startDate, endDate, selectedUnit } = dateRange;
-  const isFutureDate =
-    value !== 'all' &&
-    selectedUnit &&
-    isAfter(incrementDateRange(dateRange, -1).startDate, new Date());
+  const { value, startDate, endDate, offset } = dateRange;
+  const disableForward =
+    value === 'all' || isAfter(getOffsetDateRange(dateRange, 1).startDate, new Date());
 
-  const handleChange = value => {
+  const handleChange = (value: string | DateRange) => {
     setDateRange(value);
   };
 
-  const handleIncrement = value => {
-    setDateRange(incrementDateRange(dateRange, value));
+  const handleIncrement = (increment: number) => {
+    setDateRange(getOffsetDateRange(dateRange, increment));
   };
 
   return (
     <div className={styles.container}>
-      {value !== 'all' && selectedUnit && (
+      {value !== 'all' && (
         <div className={styles.buttons}>
-          <Button onClick={() => handleIncrement(1)}>
+          <Button onClick={() => handleIncrement(-1)}>
             <Icon rotate={90}>
               <Icons.ChevronDown />
             </Icon>
           </Button>
-          <Button onClick={() => handleIncrement(-1)} disabled={isFutureDate}>
+          <Button onClick={() => handleIncrement(1)} disabled={disableForward}>
             <Icon rotate={270}>
               <Icons.ChevronDown />
             </Icon>
@@ -42,7 +41,7 @@ export function WebsiteDateFilter({ websiteId }: { websiteId: string }) {
         value={value}
         startDate={startDate}
         endDate={endDate}
-        selectedUnit={selectedUnit}
+        offset={offset}
         onChange={handleChange}
         showAllTime={true}
       />