Skip to content

Commit

Permalink
Merge pull request #3736 from owid/utc-datepicker
Browse files Browse the repository at this point in the history 
✨ use UTC in the gdocs datepicker
  • Loading branch information
@ikesau
ikesau authored Jun 27, 2024
2 parents 69e3806 + 9e073ee commit 22e4d63
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 34 deletions.
40 changes: 32 additions & 8 deletions adminSiteClient/GdocsDateline.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,34 @@ export const GdocsPublishedAt = <T extends OwidGdoc>({
const { publishedAt } = gdoc

const onChangePublishedAt = (publishedAt: Dayjs | null) => {
setCurrentGdoc({
...gdoc,
publishedAt: publishedAt?.toDate() || null,
})
if (!publishedAt) {
setCurrentGdoc({ ...gdoc, publishedAt: null })
return
}
// If gdoc.publishedAt is null, it means the user has cleared the datepicker,
// which means the incoming publishedAt has been initialized by the datepicker,
// which is based on the user's timezone.
// e.g. the user is in UTC-4, and they select 09:00:00 through the datepicker:
// the incoming publishedAt will be 13:00:00 (UTC)
// but we want it to be 09:00:00 (UTC) because we want authors to always think in UTC
// so we need to offset the incoming publishedAt by the user's timezone.
// This isn't an issue when gdoc.publishedAt is not null: in that case, we pass a dayjs object to the datepicker
// that is already set to UTC.
if (gdoc.publishedAt === null) {
const offsetPublishedAt = publishedAt.add(
dayjs().utcOffset(),
"minute"
)
setCurrentGdoc({
...gdoc,
publishedAt: offsetPublishedAt.toDate(),
})
} else {
setCurrentGdoc({
...gdoc,
publishedAt: publishedAt.toDate(),
})
}
}

const publishedAtError = getPropertyMostCriticalError("publishedAt", errors)
Expand All @@ -31,22 +55,22 @@ export const GdocsPublishedAt = <T extends OwidGdoc>({
<label htmlFor="publishedAt">Publication date</label>
<DatePicker
onChange={onChangePublishedAt}
value={publishedAt ? dayjs(publishedAt) : undefined}
value={publishedAt ? dayjs(publishedAt).utc() : null}
format={PUBLISHED_AT_FORMAT}
id="publishedAt"
status={publishedAtError?.type}
showTime
// The "Today" button has been disabled because it sets
// The "Now" button has been disabled because it sets
// the time to the current time. This time change makes
// it all the way to the atom feed, which is then
// interpreted by MailChimp's RSS-to-Email as a new
// article.
showToday={false}
showNow={false}
/>
<GdocsErrorHelp
error={publishedAtError}
help={
"Used in default dateline. Visible in the citation block. Also used to sort articles in lists."
"UTC. Used in default dateline. Visible in the citation block. Also used to sort articles in lists."
}
/>
</Col>
Expand Down
55 changes: 29 additions & 26 deletions adminSiteClient/GdocsPreviewPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,7 @@ export const GdocsPreviewPage = ({ match, history }: GdocsMatchProps) => {
if (!currentGdoc) return
// set to today if not specified
const publishedAt = currentGdoc.publishedAt ?? new Date()
publishedAt.setSeconds(0, 0)
const slug = currentGdoc.slug || slugify(`${currentGdoc.content.title}`)
const publishedGdoc = await store.publish({
...currentGdoc,
Expand Down Expand Up @@ -210,6 +211,7 @@ export const GdocsPreviewPage = ({ match, history }: GdocsMatchProps) => {
</AdminLayout>
)
}
console.log("currentGdoc.publishedAt", currentGdoc?.publishedAt)

return currentGdoc ? (
<AdminLayout
Expand All @@ -235,32 +237,33 @@ export const GdocsPreviewPage = ({ match, history }: GdocsMatchProps) => {
{currentGdoc.content.title}
</Typography.Title>
[ <GdocsEditLink gdocId={currentGdoc.id} /> ]
{currentGdoc.published && (
<>
[
{currentGdoc.publishedAt &&
currentGdoc.publishedAt <= new Date() ? (
<>
<a
href={`${BAKED_BASE_URL}/${currentGdoc.slug}`}
>
View live
</a>
<Tippy
content="There might be a slight delay before content scheduled into the future becomes live."
placement="bottom"
>
<FontAwesomeIcon
icon={faQuestionCircle}
/>
</Tippy>
</>
) : (
`Scheduled for ${dayjs(currentGdoc.publishedAt).format(PUBLISHED_AT_FORMAT)}`
)}
]
</>
)}
{currentGdoc.published &&
currentGdoc.publishedAt && (
<>
[
{currentGdoc.publishedAt <=
new Date() ? (
<>
<a
href={`${BAKED_BASE_URL}/${currentGdoc.slug}`}
>
View live
</a>
<Tippy
content="There might be a slight delay before content scheduled into the future becomes live."
placement="bottom"
>
<FontAwesomeIcon
icon={faQuestionCircle}
/>
</Tippy>
</>
) : (
`Scheduled for ${dayjs(currentGdoc.publishedAt).utc().format(PUBLISHED_AT_FORMAT)} (UTC)`
)}
]
</>
)}
<div>
{!currentGdoc.published && (
<Tag color="default">Draft</Tag>
Expand Down

0 comments on commit 22e4d63

Please sign in to comment.