i18n datetime

src/components/charts/BarChartTooltip.tsx

@@ -1,29 +1,34 @@
-import { formatDate } from 'lib/date';
 import { Flexbox, StatusLight } from 'react-basics';
 import { formatLongNumber } from 'lib/format';
-import { useLocale } from 'components/hooks';
+import { useIntl } from 'react-intl';
 
 const formats = {
-  millisecond: 'T',
-  second: 'pp',
-  minute: 'p',
-  hour: 'h:mm aaa - PP',
-  day: 'PPPP',
-  week: 'PPPP',
-  month: 'LLLL yyyy',
-  quarter: 'qqq',
-  year: 'yyyy',
+  millisecond: {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+    fractionalSecondDigits: 3,
+  },
+  second: { timeStyle: 'medium' },
+  minute: { timeStyle: 'short' },
+  hour: { dateStyle: 'medium', timeStyle: 'short' },
+  day: { dateStyle: 'full' },
+  week: { dateStyle: 'full' },
+  month: { year: 'numeric', month: 'long' },
+  quarter: { year: 'numeric', month: 'long' },
+  year: { year: 'numeric' },
 };
 
 export default function BarChartTooltip({ tooltip, unit }) {
-  const { locale } = useLocale();
+  const intl = useIntl();
   const { labelColors, dataPoints } = tooltip;
 
   return (
     <Flexbox direction="column" gap={10}>
-      <div>
-        {formatDate(new Date(dataPoints[0].raw.d || dataPoints[0].raw.x), formats[unit], locale)}
-      </div>
+      <div>{intl.formatDate(dataPoints[0].raw.d || dataPoints[0].raw.x, formats[unit])}</div>
       <div>
         <StatusLight color={labelColors?.[0]?.backgroundColor}>
           {formatLongNumber(dataPoints[0].raw.y)} {dataPoints[0].dataset.label}

src/components/input/DateFilter.tsx

@@ -2,11 +2,12 @@ import { useState } from 'react';
 import { Icon, Modal, Dropdown, Item, Text, Flexbox } from 'react-basics';
 import { endOfYear, isSameDay } from 'date-fns';
 import DatePickerForm from 'components/metrics/DatePickerForm';
-import { useLocale, useMessages } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 import Icons from 'components/icons';
-import { formatDate, parseDateValue } from 'lib/date';
+import { parseDateValue } from 'lib/date';
 import styles from './DateFilter.module.css';
 import classNames from 'classnames';
+import { useIntl } from 'react-intl';
 
 export interface DateFilterProps {
   value: string;
@@ -31,7 +32,7 @@ export function DateFilter({
 }: DateFilterProps) {
   const { formatMessage, labels } = useMessages();
   const [showPicker, setShowPicker] = useState(false);
-  const { locale } = useLocale();
+  const intl = useIntl();
 
   const options = [
     { label: formatMessage(labels.today), value: '0day' },
@@ -101,11 +102,11 @@ export function DateFilter({
     const { unit } = parseDateValue(value) || {};
 
     if (offset && unit === 'year') {
-      return formatDate(startDate, 'yyyy', locale);
+      return intl.formatDate(startDate, { year: 'numeric' });
     }
 
     if (offset && unit === 'month') {
-      return formatDate(startDate, 'MMMM yyyy', locale);
+      return intl.formatDate(startDate, { year: 'numeric', month: 'long' });
     }
 
     if (value.startsWith('range') || offset) {
@@ -156,7 +157,7 @@ export function DateFilter({
 }
 
 const CustomRange = ({ startDate, endDate, unit, onClick }) => {
-  const { locale } = useLocale();
+  const intl = useIntl();
 
   const monthFormat = unit === 'month';
 
@@ -173,11 +174,12 @@ const CustomRange = ({ startDate, endDate, unit, onClick }) => {
       </Icon>
       <Text>
         {monthFormat ? (
-          <>{formatDate(startDate, 'MMMM yyyy', locale)}</>
+          <>{intl.formatDate(startDate, { year: 'numeric', month: 'long' })}</>
         ) : (
           <>
-            {formatDate(startDate, 'd LLL y', locale)}
-            {!isSameDay(startDate, endDate) && ` — ${formatDate(endDate, 'd LLL y', locale)}`}
+            {intl.formatDate(startDate, { dateStyle: 'medium' })}
+            {!isSameDay(startDate, endDate) &&
+              ` — ${intl.formatDate(endDate, { dateStyle: 'medium' })}`}
           </>
         )}
       </Text>

src/components/input/MonthSelect.tsx

@@ -11,13 +11,14 @@ import {
 import { startOfMonth, endOfMonth } from 'date-fns';
 import Icons from 'components/icons';
 import { useLocale } from 'components/hooks';
-import { formatDate } from 'lib/date';
 import styles from './MonthSelect.module.css';
+import { useIntl } from 'react-intl';
 
 export function MonthSelect({ date = new Date(), onChange }) {
-  const { locale, dateLocale } = useLocale();
-  const month = formatDate(date, 'MMMM', locale);
-  const year = date.getFullYear();
+  const { dateLocale } = useLocale();
+  const intl = useIntl();
+  const month = intl.formatDate(date, { month: 'numeric' });
+  const year = intl.formatDate(date, { year: 'numeric' });
   const ref = useRef();
 
   const handleChange = (close: () => void, date: Date) => {

src/components/metrics/EventsChart.tsx

@@ -1,9 +1,10 @@
 import { useMemo } from 'react';
 import { colord } from 'colord';
 import BarChart from 'components/charts/BarChart';
-import { useLocale, useDateRange, useWebsiteEventsSeries } from 'components/hooks';
+import { useDateRange, useWebsiteEventsSeries } from 'components/hooks';
 import { CHART_COLORS } from 'lib/constants';
 import { renderDateLabels } from 'lib/charts';
+import { useIntl } from 'react-intl';
 
 export interface EventsChartProps {
   websiteId: string;
@@ -14,8 +15,8 @@ export function EventsChart({ websiteId, className }: EventsChartProps) {
   const {
     dateRange: { startDate, endDate, unit },
   } = useDateRange(websiteId);
-  const { locale } = useLocale();
   const { data, isLoading } = useWebsiteEventsSeries(websiteId);
+  const intl = useIntl();
 
   const chartData = useMemo(() => {
     if (!data) return [];
@@ -51,7 +52,7 @@ export function EventsChart({ websiteId, className }: EventsChartProps) {
       data={chartData}
       unit={unit}
       stacked={true}
-      renderXLabel={renderDateLabels(unit, locale)}
+      renderXLabel={renderDateLabels(intl, unit)}
       isLoading={isLoading}
     />
   );

src/components/metrics/PageviewsChart.tsx

@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 import BarChart, { BarChartProps } from 'components/charts/BarChart';
 import { useLocale, useTheme, useMessages } from 'components/hooks';
 import { renderDateLabels } from 'lib/charts';
+import { useIntl } from 'react-intl';
 
 export interface PagepageviewsChartProps extends BarChartProps {
   data: {
@@ -20,6 +21,7 @@ export function PagepageviewsChart({ data, unit, isLoading, ...props }: Pagepage
   const { formatMessage, labels } = useMessages();
   const { colors } = useTheme();
   const { locale } = useLocale();
+  const intl = useIntl();
 
   const chartData = useMemo(() => {
     if (!data) {
@@ -74,7 +76,7 @@ export function PagepageviewsChart({ data, unit, isLoading, ...props }: Pagepage
       data={chartData}
       unit={unit}
       isLoading={isLoading}
-      renderXLabel={renderDateLabels(unit, locale)}
+      renderXLabel={renderDateLabels(intl, unit)}
     />
   );
 }