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

Use locale to determine start of week
This commit is contained in:
Mike Cao 2021-03-10 20:53:41 -08:00 committed by GitHub
commit e486acb316
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 19 additions and 10 deletions

View File

@ -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();

View File

@ -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) {

View File

@ -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)));
}
}

View File

@ -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 (

View File

@ -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];
}

View File

@ -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,
};