From b49a167d8ae5ce31cff59ead0e11cd4913c3ee6d Mon Sep 17 00:00:00 2001 From: Ewan Lyon Date: Sun, 20 Oct 2024 14:31:54 +1100 Subject: [PATCH] chore: replace date-fns-tz with date-fns/tz --- apps/keystone/admin/pages/schedule-import.tsx | 95 ++++++++----------- .../admin/util/schedule/export-horaro.ts | 6 +- package-lock.json | 89 +++++++++-------- package.json | 4 +- 4 files changed, 96 insertions(+), 98 deletions(-) diff --git a/apps/keystone/admin/pages/schedule-import.tsx b/apps/keystone/admin/pages/schedule-import.tsx index db4efff..488de29 100644 --- a/apps/keystone/admin/pages/schedule-import.tsx +++ b/apps/keystone/admin/pages/schedule-import.tsx @@ -20,11 +20,11 @@ import { OutlinedInput, Stack as MUIStack, } from "@mui/material"; -import { formatInTimeZone } from "date-fns-tz"; +import { TZDate } from "@date-fns/tz"; import { Lists } from ".keystone/types"; import { DonationIncentiveCreator, DonationIncentiveCreatorRef } from "../components/DonationIncentiveCreator"; import { RaceRunnerMatcher, RaceRunnerMatcherRef } from "../components/RaceRunnerMatcher"; -import { formatDistanceStrict } from "date-fns"; +import { formatDistanceStrict, format } from "date-fns"; import { exportHoraro } from "../util/schedule/export-horaro"; import { downloadSubmissions } from "../util/schedule/export-submissions"; import { parseScheduleToRuns } from "../util/schedule/import-schedule"; @@ -57,6 +57,11 @@ const HiddenInput = styled.input` display: none; `; +const EventMetaData = styled.div` + display: flex; + flex-direction: column; +`; + const EVENTS_LIST_QUERY = gql` query { events { @@ -150,11 +155,11 @@ interface EventQuery { } // Given the estimate and start time, get when the run ends as a date -function endRunTime(scheduled: Date, estimate: string) { +function endRunTime(scheduled: Date, estimate: string, timezone: string) { const estimateParts = estimate.split(/:/); const estimateMillis = parseInt(estimateParts[0], 10) * 60 * 60 * 1000 + parseInt(estimateParts[1], 10) * 60 * 1000; - const scheduledTime = new Date(scheduled); + const scheduledTime = new TZDate(scheduled, timezone); // scheduledTime.setTime(scheduledTime.getTime()); scheduledTime.setTime(scheduledTime.getTime() + estimateMillis); return scheduledTime; @@ -345,10 +350,13 @@ export default function ScheduleImport() { downloadAnchorNode.remove(); } - const eventStartDate = eventData?.event?.startDate ? new Date(eventData?.event?.startDate) : undefined; + const eventStartDate = eventData?.event?.startDate + ? new TZDate(eventData?.event?.startDate, eventData.event.eventTimezone) + : undefined; const eventEndDate = endRunTime( scheduleRuns[scheduleRuns.length - 1]?.scheduled ?? new Date(), scheduleRuns[scheduleRuns.length - 1]?.estimate ?? "00:00:00", + eventData?.event?.eventTimezone ?? "Australia/Melbourne", ); let prevDay = ""; @@ -356,12 +364,13 @@ export default function ScheduleImport() { console.log(row); if (!eventData?.event) return <>; let dayDivider = <>; - if (formatInTimeZone(row.scheduled, eventData.event.eventTimezone, "d") !== prevDay) { - prevDay = formatInTimeZone(row.scheduled, eventData.event.eventTimezone, "d"); + let scheduledDate = new TZDate(row.scheduled, eventData.event.eventTimezone); + if (format(scheduledDate, "d") !== prevDay) { + prevDay = format(scheduledDate, "d"); dayDivider = ( - {formatInTimeZone(row.scheduled, eventData.event.eventTimezone, "do EEEE")} + {format(scheduledDate, "do EEEE")} @@ -480,12 +489,22 @@ export default function ScheduleImport() { {eventData?.event && ( <> - Event Start Time + Event Timezone
+ {eventStartDate ? ( + {eventStartDate.timeZone} + ) : ( + Missing Event Time Zone + )} +
+ + + Event Start Time + {eventStartDate ? ( <> @@ -493,64 +512,32 @@ export default function ScheduleImport() { timeZone: eventData.event.eventTimezone, })} - - {formatInTimeZone( - eventStartDate, - eventData.event.eventTimezone, - "h:mm a", - )} - - - {formatInTimeZone( - eventStartDate, - eventData.event.eventTimezone, - "EEEE, MMMM", - )} - + {format(eventStartDate, "h:mm a")} + {format(eventStartDate, "EEEE, MMMM")} ) : ( Missing Event Start Date )} - + {scheduleRuns.length > 0 && ( <> Event End Time -
+ {eventEndDate.toLocaleDateString("en-AU", { timeZone: eventData.event.eventTimezone, })} - - {formatInTimeZone( - eventEndDate, - eventData.event.eventTimezone, - "h:mm a", - )} - - - {formatInTimeZone( - eventEndDate, - eventData.event.eventTimezone, - "EEEE, MMMM", - )} - -
+ {format(eventEndDate, "h:mm a")} + {format(eventEndDate, "EEEE, MMMM")} + {eventStartDate && ( Duration -
+ {formatDistanceStrict(eventEndDate, eventStartDate)} or {( @@ -559,16 +546,12 @@ export default function ScheduleImport() { ).toFixed(1)}{" "} hours -
+ )} # of Runs -
+ { scheduleRuns.filter( @@ -577,7 +560,7 @@ export default function ScheduleImport() { }{" "} runs -
+ )} diff --git a/apps/keystone/admin/util/schedule/export-horaro.ts b/apps/keystone/admin/util/schedule/export-horaro.ts index 7367c77..0a56b36 100644 --- a/apps/keystone/admin/util/schedule/export-horaro.ts +++ b/apps/keystone/admin/util/schedule/export-horaro.ts @@ -1,5 +1,6 @@ import { gql, ApolloClient, InMemoryCache } from '@keystone-6/core/admin-ui/apollo'; -import { format, formatInTimeZone } from 'date-fns-tz'; +import { TZDate } from '@date-fns/tz'; +import { format } from 'date-fns'; const QUERY_RUNS = gql` query GetEventRuns($eventShortname: String) { @@ -141,7 +142,8 @@ function secondsToHoraroLength(seconds: number) { } function dateToISOTimezone(date: Date, timezone: string) { - return formatInTimeZone(date, timezone, "yyyy-MM-dd'T'HH:mm:ssxxx"); + const tzDate = new TZDate(date, timezone); + return format(tzDate, "yyyy-MM-dd'T'HH:mm:ssxxx"); } function endRunTime(scheduled: Date, estimate: string) { diff --git a/package-lock.json b/package-lock.json index 86ec1c7..2d37ff8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,6 +6,7 @@ "": { "name": "ausspeedruns.com", "dependencies": { + "@date-fns/tz": "^1.1.2", "@emotion/react": "11.13.3", "@emotion/styled": "11.13.0", "@fontsource/finger-paint": "^5.1.0", @@ -29,8 +30,7 @@ "@swc/helpers": "0.5.13", "animejs": "^3.2.2", "core-js": "^3.38.1", - "date-fns": "^3.6.0", - "date-fns-tz": "^3.2.0", + "date-fns": "^4.1.0", "dotenv": "^16.4.5", "fp-ts": "^2.16.9", "jsbarcode": "^3.11.6", @@ -3466,6 +3466,11 @@ "kuler": "^2.0.0" } }, + "node_modules/@date-fns/tz": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.1.2.tgz", + "integrity": "sha512-Xmg2cPmOPQieCLAdf62KtFPU9y7wbQDq1OAzrs/bEQFvhtCPXDiks1CHDE/sTXReRfh/MICVkw/vY6OANHUGiA==" + }, "node_modules/@dnd-kit/accessibility": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.0.tgz", @@ -5897,6 +5902,15 @@ "version": "1.1.4", "license": "MIT" }, + "node_modules/@keystone-6/core/node_modules/date-fns": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz", + "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/kossnocorp" + } + }, "node_modules/@keystone-6/core/node_modules/has-flag": { "version": "4.0.0", "license": "MIT", @@ -6030,6 +6044,19 @@ "url": "https://opencollective.com/date-fns" } }, + "node_modules/@keystone-ui/fields/node_modules/react-day-picker": { + "version": "8.10.1", + "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-8.10.1.tgz", + "integrity": "sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==", + "funding": { + "type": "individual", + "url": "https://github.com/sponsors/gpbl" + }, + "peerDependencies": { + "date-fns": "^2.28.0 || ^3.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/@keystone-ui/icons": { "version": "6.0.2", "license": "MIT", @@ -15386,22 +15413,14 @@ "license": "MIT" }, "node_modules/date-fns": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz", - "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz", + "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==", "funding": { "type": "github", "url": "https://github.com/sponsors/kossnocorp" } }, - "node_modules/date-fns-tz": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-3.2.0.tgz", - "integrity": "sha512-sg8HqoTEulcbbbVXeg84u5UnlsQa8GS5QXMqjjYIhS4abEVVKIUwe0/l/UhrZdKaL/W5eWZNlbTeEIiOXTcsBQ==", - "peerDependencies": { - "date-fns": "^3.0.0 || ^4.0.0" - } - }, "node_modules/date-format": { "version": "4.0.14", "resolved": "https://registry.npmjs.org/date-format/-/date-format-4.0.14.tgz", @@ -26141,18 +26160,6 @@ "version": "2.2.1", "license": "MIT" }, - "node_modules/react-day-picker": { - "version": "8.10.1", - "license": "MIT", - "funding": { - "type": "individual", - "url": "https://github.com/sponsors/gpbl" - }, - "peerDependencies": { - "date-fns": "^2.28.0 || ^3.0.0", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, "node_modules/react-dom": { "version": "18.3.1", "license": "MIT", @@ -33268,6 +33275,11 @@ "kuler": "^2.0.0" } }, + "@date-fns/tz": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.1.2.tgz", + "integrity": "sha512-Xmg2cPmOPQieCLAdf62KtFPU9y7wbQDq1OAzrs/bEQFvhtCPXDiks1CHDE/sTXReRfh/MICVkw/vY6OANHUGiA==" + }, "@dnd-kit/accessibility": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.0.tgz", @@ -34760,6 +34772,11 @@ "color-name": { "version": "1.1.4" }, + "date-fns": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz", + "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==" + }, "has-flag": { "version": "4.0.0" }, @@ -34859,6 +34876,12 @@ "requires": { "@babel/runtime": "^7.21.0" } + }, + "react-day-picker": { + "version": "8.10.1", + "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-8.10.1.tgz", + "integrity": "sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==", + "requires": {} } } }, @@ -41017,15 +41040,9 @@ "version": "2.2.2" }, "date-fns": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz", - "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==" - }, - "date-fns-tz": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-3.2.0.tgz", - "integrity": "sha512-sg8HqoTEulcbbbVXeg84u5UnlsQa8GS5QXMqjjYIhS4abEVVKIUwe0/l/UhrZdKaL/W5eWZNlbTeEIiOXTcsBQ==", - "requires": {} + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz", + "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==" }, "date-format": { "version": "4.0.14", @@ -47886,10 +47903,6 @@ } } }, - "react-day-picker": { - "version": "8.10.1", - "requires": {} - }, "react-dom": { "version": "18.3.1", "requires": { diff --git a/package.json b/package.json index 338ac4c..f6c3bbe 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "build:nextjs": "npx nx build nextjs" }, "dependencies": { + "@date-fns/tz": "^1.1.2", "@emotion/react": "11.13.3", "@emotion/styled": "11.13.0", "@fontsource/finger-paint": "^5.1.0", @@ -31,8 +32,7 @@ "@swc/helpers": "0.5.13", "animejs": "^3.2.2", "core-js": "^3.38.1", - "date-fns": "^3.6.0", - "date-fns-tz": "^3.2.0", + "date-fns": "^4.1.0", "dotenv": "^16.4.5", "fp-ts": "^2.16.9", "jsbarcode": "^3.11.6",