Stats: Use moment object with site offset (#96484)

* use moment object with offset

* add hook for site zone moment

client/components/date-control/index.tsx

@@ -4,6 +4,7 @@ import { Moment } from 'moment';
 import { RefObject } from 'react';
 import DateRange from 'calypso/components/date-range';
 import { useLocalizedMoment } from 'calypso/components/localized-moment';
+import useMomentSiteZone from 'calypso/my-sites/stats/hooks/use-moment-site-zone';
 import { DateControlProps } from './types';
 import './style.scss';
 
@@ -19,12 +20,13 @@ const DateControl = ( {
 	overlay,
 }: DateControlProps ) => {
 	const moment = useLocalizedMoment();
+	const siteToday = useMomentSiteZone();
 
 	const getShortcutForRange = () => {
 		// Search the shortcut array for something matching the current date range.
 		// Returns shortcut or null;
-		const today = moment().format( 'YYYY-MM-DD' );
-		const yesterday = moment().subtract( 1, 'days' ).format( 'YYYY-MM-DD' );
+		const today = siteToday.format( 'YYYY-MM-DD' );
+		const yesterday = siteToday.clone().subtract( 1, 'days' ).format( 'YYYY-MM-DD' );
 		const shortcut = shortcutList.find( ( element ) => {
 			if (
 				yesterday === dateRange.chartEnd &&
@@ -50,6 +52,12 @@ const DateControl = ( {
 		// Generate a full date range for the label.
 		const startDate = moment( dateRange.chartStart ).format( 'LL' );
 		const endDate = moment( dateRange.chartEnd ).format( 'LL' );
+
+		// If start and end are the same, then just show one date.
+		if ( startDate === endDate ) {
+			return startDate;
+		}
+
 		return `${ startDate } - ${ endDate }`;
 	};
 
@@ -58,7 +66,7 @@ const DateControl = ( {
 			<DateRange
 				selectedStartDate={ moment( dateRange.chartStart ) }
 				selectedEndDate={ moment( dateRange.chartEnd ) }
-				lastSelectableDate={ moment() }
+				lastSelectableDate={ siteToday }
 				firstSelectableDate={ moment( '2010-01-01' ) }
 				onDateCommit={ ( startDate: Moment, endDate: Moment ) =>
 					startDate && endDate && onApplyButtonClick( startDate, endDate )

client/components/date-range/shortcuts.tsx

@@ -4,6 +4,7 @@ import clsx from 'clsx';
 import { useTranslate } from 'i18n-calypso';
 import moment, { Moment } from 'moment';
 import PropTypes from 'prop-types';
+import useMomentSiteZone from 'calypso/my-sites/stats/hooks/use-moment-site-zone';
 
 const DATERANGE_PERIOD = {
 	DAY: 'day',
@@ -29,6 +30,7 @@ const DateRangePickerShortcuts = ( {
 	endDate?: MomentOrNull;
 } ) => {
 	const translate = useTranslate();
+	const siteToday = useMomentSiteZone();
 
 	const normalizeDate = ( date: MomentOrNull ) => {
 		return date ? date.startOf( 'day' ) : date;
@@ -87,7 +89,7 @@ const DateRangePickerShortcuts = ( {
 		}
 		// Search the shortcut array for something matching the current date range.
 		// Returns shortcut or null;
-		const today = moment().startOf( 'day' );
+		const today = siteToday.clone().startOf( 'day' );
 		const daysInRange = Math.abs( endDate.diff( startDate, 'days' ) );
 		const shortcut = shortcutList.find( ( element ) => {
 			if ( endDate.isSame( today ) && daysInRange === element.range ) {
@@ -99,8 +101,9 @@ const DateRangePickerShortcuts = ( {
 	};
 
 	const handleClick = ( { id, offset, range }: { id?: string; offset: number; range: number } ) => {
-		const newToDate = moment().startOf( 'day' ).subtract( offset, 'days' );
-		const newFromDate = moment()
+		const newToDate = siteToday.clone().startOf( 'day' ).subtract( offset, 'days' );
+		const newFromDate = siteToday
+			.clone()
 			.startOf( 'day' )
 			.subtract( offset + range, 'days' );
 		onClick( newFromDate, newToDate, id || '' );

client/my-sites/stats/hooks/use-moment-site-zone.ts

@@ -0,0 +1,23 @@
+import moment, { Moment } from 'moment';
+import { useLocalizedMoment } from 'calypso/components/localized-moment';
+import { useSelector } from 'calypso/state';
+import { getSiteOption } from 'calypso/state/sites/selectors';
+import { getSelectedSiteId } from 'calypso/state/ui/selectors';
+
+export function getMomentSiteZone(
+	state: object,
+	siteId: number | null,
+	localizedMoment?: () => Moment
+) {
+	const gmtOffset = getSiteOption( state, siteId, 'gmt_offset' ) as number;
+	return ( localizedMoment || moment )().utcOffset( gmtOffset ?? 0 );
+}
+
+/**
+ * Get moment object based on site timezone.
+ */
+export default function useMomentSiteZone() {
+	const siteId = useSelector( getSelectedSiteId );
+	const localizedMoment = useLocalizedMoment();
+	return useSelector( ( state ) => getMomentSiteZone( state, siteId, localizedMoment ) );
+}

client/my-sites/stats/site.jsx

@@ -27,6 +27,7 @@ import Main from 'calypso/components/main';
 import NavigationHeader from 'calypso/components/navigation-header';
 import memoizeLast from 'calypso/lib/memoize-last';
 import { STATS_FEATURE_DATE_CONTROL_LAST_30_DAYS } from 'calypso/my-sites/stats/constants';
+import { getMomentSiteZone } from 'calypso/my-sites/stats/hooks/use-moment-site-zone';
 import {
 	recordGoogleEvent,
 	recordTracksEvent,
@@ -248,6 +249,7 @@ class StatsSite extends Component {
 			isOldJetpack,
 			shouldForceDefaultDateRange,
 			supportUserFeedback,
+			momentSiteZone,
 		} = this.props;
 		const isNewDateFilteringEnabled = config.isEnabled( 'stats/new-date-filtering' );
 		let defaultPeriod = PAST_SEVEN_DAYS;
@@ -276,7 +278,7 @@ class StatsSite extends Component {
 		if ( chartEnd ) {
 			customChartRange = { chartEnd };
 		} else {
-			customChartRange = { chartEnd: moment().format( 'YYYY-MM-DD' ) };
+			customChartRange = { chartEnd: momentSiteZone.format( 'YYYY-MM-DD' ) };
 		}
 
 		// Find the quantity of bars for the chart.
@@ -291,7 +293,8 @@ class StatsSite extends Component {
 		} else {
 			// if start date is missing let the frequency of data take over to avoid showing one bar
 			// (e.g. months defaulting to 30 days and showing one point)
-			customChartRange.chartStart = moment()
+			customChartRange.chartStart = momentSiteZone
+				.clone()
 				.subtract( daysInRange - 1, 'days' )
 				.format( 'YYYY-MM-DD' );
 		}
@@ -322,8 +325,11 @@ class StatsSite extends Component {
 
 			// For StatsDateControl
 			customChartRange.daysInRange = 7;
-			customChartRange.chartEnd = moment().format( 'YYYY-MM-DD' );
-			customChartRange.chartStart = moment().subtract( 7, 'days' ).format( 'YYYY-MM-DD' );
+			customChartRange.chartEnd = momentSiteZone.format( 'YYYY-MM-DD' );
+			customChartRange.chartStart = momentSiteZone
+				.clone()
+				.subtract( 7, 'days' )
+				.format( 'YYYY-MM-DD' );
 		}
 
 		const query = isNewDateFilteringEnabled
@@ -820,6 +826,7 @@ export default connect(
 			supportUserFeedback,
 			isOldJetpack,
 			shouldForceDefaultDateRange,
+			momentSiteZone: getMomentSiteZone( state, siteId ),
 		};
 	},
 	{