From a8158edc193a3659c2543d610c4d5d6f2da624cf Mon Sep 17 00:00:00 2001 From: Casper <148681165+casperUoS@users.noreply.github.com> Date: Thu, 19 Sep 2024 20:49:48 +0100 Subject: [PATCH] Fixed UTC bug and added end time to next event --- package-lock.json | 20 ++++++++++++++++++++ package.json | 1 + src/app/_blocks/NextEvent/index.tsx | 15 ++++++++++++--- src/app/_components/EventPopUp/index.tsx | 18 +++++++++++------- src/payload/collections/Events.ts | 1 + 5 files changed, 45 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7ffe5f5..c9932fb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32,6 +32,7 @@ "express": "^4.21.0", "jssha": "^3.3.1", "md5": "^2.3.0", + "moment-timezone": "^0.5.45", "next": "^14.1.1", "next-sitemap": "^4.2.3", "node-schedule": "^2.1.1", @@ -15624,6 +15625,25 @@ "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz", "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==" }, + "node_modules/moment": { + "version": "2.30.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz", + "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==", + "engines": { + "node": "*" + } + }, + "node_modules/moment-timezone": { + "version": "0.5.45", + "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.45.tgz", + "integrity": "sha512-HIWmqA86KcmCAhnMAN0wuDOARV/525R2+lOLotuGFzn4HO+FH+/645z2wx0Dt3iDv6/p61SIvKnDstISainhLQ==", + "dependencies": { + "moment": "^2.29.4" + }, + "engines": { + "node": "*" + } + }, "node_modules/monaco-editor": { "version": "0.38.0", "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.38.0.tgz", diff --git a/package.json b/package.json index 2d065bb..4caddc8 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "express": "^4.21.0", "jssha": "^3.3.1", "md5": "^2.3.0", + "moment-timezone": "^0.5.45", "next": "^14.1.1", "next-sitemap": "^4.2.3", "node-schedule": "^2.1.1", diff --git a/src/app/_blocks/NextEvent/index.tsx b/src/app/_blocks/NextEvent/index.tsx index 4c5bab0..5b95cbd 100644 --- a/src/app/_blocks/NextEvent/index.tsx +++ b/src/app/_blocks/NextEvent/index.tsx @@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react' import { Inter } from '@next/font/google' +import moment from 'moment-timezone' import { StaticImageData } from 'next/image' import Link from 'next/link' import qs from 'qs' @@ -185,14 +186,20 @@ export const NextEventBlock: React.FC< if (typeof results.docs[0] === 'object') { const result = results.docs[0] - const date = result.date + const date = moment.utc(result.date).tz('Europe/London').format('YYYY-MM-DD HH:mm') + const endTime = moment.utc(result.endTime).tz('Europe/London').format('YYYY-MM-DD HH:mm') + let concEndTime = null const dateParts = date.split('-') const year = dateParts[0] const month = parseInt(dateParts[1], 10) - const day = dateParts[2].split('T')[0] - const time = dateParts[2].split('T')[1].split(':').slice(0, 2).join(':') + const day = dateParts[2].split(' ')[0] + const time = dateParts[2].split(' ')[1].split(':').slice(0, 2).join(':') const monthName = getMonthName(month) + if (endTime) { + const endTimeParts = endTime.split('-') + concEndTime = endTimeParts[2].split(' ')[1].split(':').slice(0, 2).join(':') + } return (
@@ -212,6 +219,8 @@ export const NextEventBlock: React.FC<
starts {time} + ends + {concEndTime}
diff --git a/src/app/_components/EventPopUp/index.tsx b/src/app/_components/EventPopUp/index.tsx index f8643a9..a6d07d3 100644 --- a/src/app/_components/EventPopUp/index.tsx +++ b/src/app/_components/EventPopUp/index.tsx @@ -2,6 +2,7 @@ import React from 'react' import { Inter } from '@next/font/google' +import moment from 'moment' import Link from 'next/link' import { Event } from '../../../payload/payload-types' @@ -54,16 +55,19 @@ export const EventPopUp: React.FC = ({ return monthNames[monthNumber - 1] } - const dateParts = date.split('-') + const localDate = moment.utc(date).tz('Europe/London').format('YYYY-MM-DD HH:mm') + const localEndTime = moment.utc(endTime).tz('Europe/London').format('YYYY-MM-DD HH:mm') + let concEndTime = null + + const dateParts = localDate.split('-') const year = dateParts[0] const month = parseInt(dateParts[1], 10) - const day = dateParts[2].split('T')[0] + const day = dateParts[2].split(' ')[0] + const time = dateParts[2].split(' ')[1].split(':').slice(0, 2).join(':') const monthName = getMonthName(month) - const time = dateParts[2].split('T')[1].split(':').slice(0, 2).join(':') - let concEndTime: string | null = null - if (endTime) { - const endTimeParts = endTime.split('-') - concEndTime = endTimeParts[2].split('T')[1].split(':').slice(0, 2).join(':') + if (localEndTime) { + const endTimeParts = localEndTime.split('-') + concEndTime = endTimeParts[2].split(' ')[1].split(':').slice(0, 2).join(':') } return ( <> diff --git a/src/payload/collections/Events.ts b/src/payload/collections/Events.ts index 8aa3ef5..b0d1ca9 100644 --- a/src/payload/collections/Events.ts +++ b/src/payload/collections/Events.ts @@ -46,6 +46,7 @@ const Events: CollectionConfig = { admin: { date: { pickerAppearance: 'timeOnly', + displayFormat: 'hh:mm', }, }, },