diff --git a/client/my-sites/stats/hooks/use-moment-site-zone.ts b/client/my-sites/stats/hooks/use-moment-site-zone.ts index 5f578b227a641..84ca43f4f7882 100644 --- a/client/my-sites/stats/hooks/use-moment-site-zone.ts +++ b/client/my-sites/stats/hooks/use-moment-site-zone.ts @@ -1,25 +1,29 @@ +import { createSelector } from '@automattic/state-utils'; import i18n from 'i18n-calypso'; import moment from '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 ) { - let localeSlug = i18n.getLocaleSlug(); - if ( localeSlug === null ) { - localeSlug = 'en'; - } +export const getMomentSiteZone = createSelector( + ( state: object, siteId: number | null ) => { + let localeSlug = i18n.getLocaleSlug(); + if ( localeSlug === null ) { + localeSlug = 'en'; + } - const localizedMoment = moment().locale( localeSlug ); + const localizedMoment = moment().locale( localeSlug ); - const gmtOffset = getSiteOption( state, siteId, 'gmt_offset' ) as number; - if ( Number.isFinite( gmtOffset ) ) { - return localizedMoment.utcOffset( gmtOffset ); - } + const gmtOffset = getSiteOption( state, siteId, 'gmt_offset' ) as number; + if ( Number.isFinite( gmtOffset ) ) { + return localizedMoment.utcOffset( gmtOffset ); + } - // Falls back to the browser's local timezone if no GMT offset is found - return localizedMoment; -} + // Falls back to the browser's local timezone if no GMT offset is found + return localizedMoment; + }, + [ ( state, siteId ) => getSiteOption( state, siteId, 'gmt_offset' ), () => i18n.getLocaleSlug() ] +); /** * Get moment object based on site timezone.