Merge pull request #534 from gnarlex/fix-start-of-week

Use locale to determine start of week

components/common/Calendar.js

@@ -20,6 +20,7 @@ import Button from './Button';
 import useLocale from 'hooks/useLocale';
 import { dateFormat } from 'lib/date';
 import { chunk } from 'lib/array';
+import { dateLocales } from 'lib/lang';
 import Chevron from 'assets/chevron-down.svg';
 import Cross from 'assets/times.svg';
 import styles from './Calendar.module.css';
@@ -105,8 +106,8 @@ export default function Calendar({ date, minDate, maxDate, onChange }) {
 }
 
 const DaySelector = ({ date, minDate, maxDate, locale, onSelect }) => {
-  const startWeek = startOfWeek(date);
-  const startMonth = startOfMonth(date);
+  const startWeek = startOfWeek(date, { locale: dateLocales[locale] });
+  const startMonth = startOfMonth(date, { locale: dateLocales[locale] });
   const startDay = subDays(startMonth, startMonth.getDay());
   const month = date.getMonth();
   const year = date.getFullYear();

components/common/DateFilter.js

@@ -55,6 +55,7 @@ const filterOptions = [
 ];
 
 function DateFilter({ value, startDate, endDate, onChange, className }) {
+  const [locale] = useLocale();
   const [showPicker, setShowPicker] = useState(false);
   const displayValue =
     value === 'custom' ? (
@@ -68,7 +69,7 @@ function DateFilter({ value, startDate, endDate, onChange, className }) {
       setShowPicker(true);
       return;
     }
-    onChange(getDateRange(value));
+    onChange(getDateRange(value, locale));
   }
 
   function handlePickerChange(value) {

components/common/RefreshButton.js

@@ -8,9 +8,11 @@ import Refresh from 'assets/redo.svg';
 import Dots from 'assets/ellipsis-h.svg';
 import useDateRange from 'hooks/useDateRange';
 import { getDateRange } from '../../lib/date';
+import useLocale from 'hooks/useLocale';
 
 function RefreshButton({ websiteId }) {
   const dispatch = useDispatch();
+  const [locale] = useLocale();
   const [dateRange] = useDateRange(websiteId);
   const [loading, setLoading] = useState(false);
   const completed = useSelector(state => state.queries[`/api/website/${websiteId}/stats`]);
@@ -18,7 +20,7 @@ function RefreshButton({ websiteId }) {
   function handleClick() {
     if (dateRange) {
       setLoading(true);
-      dispatch(setDateRange(websiteId, getDateRange(dateRange.value)));
+      dispatch(setDateRange(websiteId, getDateRange(dateRange.value, locale)));
     }
   }
 

components/settings/DateRangeSetting.js

@@ -6,13 +6,15 @@ import useDateRange from 'hooks/useDateRange';
 import { DEFAULT_DATE_RANGE } from 'lib/constants';
 import { getDateRange } from 'lib/date';
 import styles from './DateRangeSetting.module.css';
+import useLocale from 'hooks/useLocale';
 
 export default function DateRangeSetting() {
+  const [locale] = useLocale();
   const [dateRange, setDateRange] = useDateRange();
   const { startDate, endDate, value } = dateRange;
 
   function handleReset() {
-    setDateRange(getDateRange(DEFAULT_DATE_RANGE));
+    setDateRange(getDateRange(DEFAULT_DATE_RANGE, locale));
   }
 
   return (

hooks/useDateRange.js

@@ -5,9 +5,11 @@ import { getItem, setItem } from 'lib/web';
 import { setDateRange } from '../redux/actions/websites';
 import { DATE_RANGE_CONFIG, DEFAULT_DATE_RANGE } from 'lib/constants';
 import useForceUpdate from './useForceUpdate';
+import useLocale from './useLocale';
 
 export default function useDateRange(websiteId, defaultDateRange = DEFAULT_DATE_RANGE) {
   const dispatch = useDispatch();
+  const [locale] = useLocale();
   const dateRange = useSelector(state => state.websites[websiteId]?.dateRange);
   const forceUpdate = useForceUpdate();
 
@@ -16,7 +18,7 @@ export default function useDateRange(websiteId, defaultDateRange = DEFAULT_DATE_
 
   if (globalDefault) {
     if (typeof globalDefault === 'string') {
-      globalDateRange = getDateRange(globalDefault);
+      globalDateRange = getDateRange(globalDefault, locale);
     } else if (typeof globalDefault === 'object') {
       globalDateRange = {
         ...globalDefault,
@@ -37,5 +39,5 @@ export default function useDateRange(websiteId, defaultDateRange = DEFAULT_DATE_
     }
   }
 
-  return [dateRange || globalDateRange || getDateRange(defaultDateRange), saveDateRange];
+  return [dateRange || globalDateRange || getDateRange(defaultDateRange, locale), saveDateRange];
 }

lib/date.js

@@ -36,8 +36,9 @@ export function getLocalTime(t) {
   return addMinutes(new Date(t), new Date().getTimezoneOffset());
 }
 
-export function getDateRange(value) {
+export function getDateRange(value, locale = 'en-US') {
   const now = new Date();
+  const localeOptions = dateLocales[locale];
 
   const { num, unit } = value.match(/^(?<num>[0-9]+)(?<unit>hour|day|week|month|year)$/).groups;
 
@@ -52,8 +53,8 @@ export function getDateRange(value) {
         };
       case 'week':
         return {
-          startDate: startOfWeek(now),
-          endDate: endOfWeek(now),
+          startDate: startOfWeek(now, { locale: localeOptions }),
+          endDate: endOfWeek(now, { locale: localeOptions }),
           unit: 'day',
           value,
         };