From 57f6b0290736044bf7b7ccb178eec122a463c2b7 Mon Sep 17 00:00:00 2001 From: simon-debruijn Date: Tue, 29 Oct 2024 15:37:55 +0100 Subject: [PATCH 01/17] Install latest date-fns and tz --- package.json | 3 ++- yarn.lock | 12 +++++++++++- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 6c6f3dcb8..7e6e0bbd2 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,8 @@ "bootstrap": "^4.5.3", "clipboard-copy": "^4.0.1", "crypto-browserify": "^3.12.0", - "date-fns": "^2.16.1", + "date-fns": "^4.1.0", + "date-fns-tz": "^3.2.0", "deep-object-diff": "^1.1.0", "draft-js": "^0.11.7", "draftjs-to-html": "^0.9.1", diff --git a/yarn.lock b/yarn.lock index 374157541..e08002f3e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6129,11 +6129,21 @@ data-urls@^2.0.0: whatwg-mimetype "^2.3.0" whatwg-url "^8.0.0" -date-fns@^2.0.1, date-fns@^2.16.1, date-fns@^2.24.0: +date-fns-tz@^3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/date-fns-tz/-/date-fns-tz-3.2.0.tgz#647dc56d38ac33a3e37b65e9d5c4cda5af5e58e6" + integrity sha512-sg8HqoTEulcbbbVXeg84u5UnlsQa8GS5QXMqjjYIhS4abEVVKIUwe0/l/UhrZdKaL/W5eWZNlbTeEIiOXTcsBQ== + +date-fns@^2.0.1, date-fns@^2.24.0: version "2.29.3" resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8" integrity sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA== +date-fns@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-4.1.0.tgz#64b3d83fff5aa80438f5b1a633c2e83b8a1c2d14" + integrity sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg== + debug@2.6.9, debug@^2.2.0, debug@^2.3.3: version "2.6.9" resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" From 28c5aa5c4b62145f328ac40ca6d86e1867c28333 Mon Sep 17 00:00:00 2001 From: simon-debruijn Date: Tue, 29 Oct 2024 15:38:35 +0100 Subject: [PATCH 02/17] Remove unused --- src/hooks/api/events.ts | 45 ----------------------------------------- 1 file changed, 45 deletions(-) diff --git a/src/hooks/api/events.ts b/src/hooks/api/events.ts index 7c6287321..3c2b6a511 100644 --- a/src/hooks/api/events.ts +++ b/src/hooks/api/events.ts @@ -415,50 +415,6 @@ const useChangeNameMutation = (configuration = {}) => ...configuration, }); -const changeCalendar = async ({ - headers, - id, - calendarType, - timeSpans, - subEvent, - start, - end, - startDate, - endDate, - openingHours, - dayOfWeek, - opens, - closes, -}) => { - return fetchFromApi({ - path: `/events/${id.toString()}/calendar`, - options: { - method: 'PUT', - body: JSON.stringify({ - calendarType, - timeSpans, - subEvent, - start, - end, - startDate, - endDate, - openingHours, - dayOfWeek, - opens, - closes, - }), - headers, - }, - }); -}; - -const useChangeCalendarMutation = (configuration = {}) => - useAuthenticatedMutation({ - mutationFn: changeCalendar, - mutationKey: 'events-change-calendar', - ...configuration, - }); - const changeStatus = async ({ headers, id, type, reason }) => fetchFromApi({ path: `/events/${id.toString()}/status`, @@ -637,7 +593,6 @@ export { useChangeAttendanceModeMutation, useChangeAudienceMutation, useChangeAvailableFromMutation, - useChangeCalendarMutation, useChangeLocationMutation, useChangeNameMutation, useChangeOnlineUrlMutation, From 19975378737ce4cbde7f03be03b15ae4b99c7bb3 Mon Sep 17 00:00:00 2001 From: simon-debruijn Date: Tue, 29 Oct 2024 15:39:52 +0100 Subject: [PATCH 03/17] Convert timezone in changeOfferCalendar --- src/hooks/api/offers.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/hooks/api/offers.ts b/src/hooks/api/offers.ts index 6e77970d7..30c096ff7 100644 --- a/src/hooks/api/offers.ts +++ b/src/hooks/api/offers.ts @@ -4,7 +4,7 @@ import { UseMutationOptions } from 'react-query'; import { OfferTypes, ScopeTypes } from '@/constants/OfferType'; import { useGetEventByIdQuery } from '@/hooks/api/events'; import { useGetPlaceByIdQuery } from '@/hooks/api/places'; -import { Offer } from '@/types/Offer'; +import { Offer, type SubEvent } from '@/types/Offer'; import { createEmbededCalendarSummaries } from '@/utils/createEmbededCalendarSummaries'; import { createSortingArgument } from '@/utils/createSortingArgument'; import { fetchFromApi, isErrorObject } from '@/utils/fetchFromApi'; @@ -18,6 +18,7 @@ import { useAuthenticatedQuery, } from './authenticated-query'; import type { User } from './user'; +import { fromZonedTime } from 'date-fns-tz'; const getOffersByCreator = async ({ headers, ...queryData }) => { const res = await fetchFromApi({ @@ -162,11 +163,15 @@ const changeOfferCalendar = async ({ body: JSON.stringify({ calendarType, timeSpans, - subEvent, + subEvent: (subEvent as SubEvent[]).map((it) => ({ + ...it, + startDate: fromZonedTime(it.startDate, 'Europe/Brussels'), + endDate: fromZonedTime(it.endDate, 'Europe/Brussels'), + })), start, end, - startDate, - endDate, + startDate: fromZonedTime(startDate, 'Europe/Brussels'), + endDate: fromZonedTime(endDate, 'Europe/Brussels'), openingHours, dayOfWeek, opens, From 1a0eb12752c0b7eced58d5de48ae256dd46982ad Mon Sep 17 00:00:00 2001 From: simon-debruijn Date: Tue, 29 Oct 2024 15:40:30 +0100 Subject: [PATCH 04/17] Convert timezone in addEvent --- src/hooks/api/events.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/hooks/api/events.ts b/src/hooks/api/events.ts index 3c2b6a511..8ac2c939e 100644 --- a/src/hooks/api/events.ts +++ b/src/hooks/api/events.ts @@ -37,6 +37,7 @@ import { } from './authenticated-query'; import type { Headers } from './types/Headers'; import type { User } from './user'; +import { fromZonedTime, toZonedTime } from 'date-fns-tz'; type EventArguments = { description: string; @@ -108,7 +109,11 @@ const addEvent = async ({ calendarType, startDate, endDate, - subEvent, + subEvent: subEvent.map((it) => ({ + ...it, + startDate: fromZonedTime(it.startDate, 'Europe/Brussels'), + endDate: fromZonedTime(it.endDate, 'Europe/Brussels'), + })), openingHours, terms, location, From bb61fc70501b5d50d1673e318024bd0f9433e415 Mon Sep 17 00:00:00 2001 From: simon-debruijn Date: Tue, 29 Oct 2024 15:41:02 +0100 Subject: [PATCH 05/17] Convert timezone in getEventById --- src/hooks/api/events.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/hooks/api/events.ts b/src/hooks/api/events.ts index 8ac2c939e..39ef6c3bc 100644 --- a/src/hooks/api/events.ts +++ b/src/hooks/api/events.ts @@ -189,7 +189,17 @@ const getEventById = async ({ headers, id }) => { // eslint-disable-next-line no-console return console.error(res); } - return await res.json(); + const data = (await res.json()) as Event; + return { + ...data, + subEvent: data.subEvent.map((it) => ({ + ...it, + startDate: toZonedTime(it.startDate, 'Europe/Brussels').toISOString(), + endDate: toZonedTime(it.endDate, 'Europe/Brussels').toISOString(), + })), + startDate: toZonedTime(data.startDate, 'Europe/Brussels').toISOString(), + endDate: toZonedTime(data.endDate, 'Europe/Brussels').toISOString(), + } as Event; }; type UseGetEventByIdArguments = ServerSideQueryOptions & { From 73aac2d17553447f17bb8653123f7a61b6cd5a60 Mon Sep 17 00:00:00 2001 From: simon-debruijn Date: Tue, 29 Oct 2024 15:44:51 +0100 Subject: [PATCH 06/17] Only map when subEvents defined --- src/hooks/api/offers.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/hooks/api/offers.ts b/src/hooks/api/offers.ts index 30c096ff7..c12dc85bc 100644 --- a/src/hooks/api/offers.ts +++ b/src/hooks/api/offers.ts @@ -163,11 +163,13 @@ const changeOfferCalendar = async ({ body: JSON.stringify({ calendarType, timeSpans, - subEvent: (subEvent as SubEvent[]).map((it) => ({ - ...it, - startDate: fromZonedTime(it.startDate, 'Europe/Brussels'), - endDate: fromZonedTime(it.endDate, 'Europe/Brussels'), - })), + subEvent: !!subEvent + ? (subEvent as SubEvent[]).map((it) => ({ + ...it, + startDate: fromZonedTime(it.startDate, 'Europe/Brussels'), + endDate: fromZonedTime(it.endDate, 'Europe/Brussels'), + })) + : undefined, start, end, startDate: fromZonedTime(startDate, 'Europe/Brussels'), From 0b5249814768c935bc5f5d5fa40ff44e87519803 Mon Sep 17 00:00:00 2001 From: simon-debruijn Date: Tue, 29 Oct 2024 17:04:04 +0100 Subject: [PATCH 07/17] Convert start and endDate in addEvent --- src/hooks/api/events.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/hooks/api/events.ts b/src/hooks/api/events.ts index 39ef6c3bc..fa7b4d960 100644 --- a/src/hooks/api/events.ts +++ b/src/hooks/api/events.ts @@ -107,8 +107,8 @@ const addEvent = async ({ mainLanguage, name, calendarType, - startDate, - endDate, + startDate: fromZonedTime(startDate, 'Europe/Brussels'), + endDate: fromZonedTime(endDate, 'Europe/Brussels'), subEvent: subEvent.map((it) => ({ ...it, startDate: fromZonedTime(it.startDate, 'Europe/Brussels'), From f35e791050a8eedb43032e13612b8b43f4a92e06 Mon Sep 17 00:00:00 2001 From: simon-debruijn Date: Tue, 29 Oct 2024 17:04:16 +0100 Subject: [PATCH 08/17] Add withTimezone helper --- src/test/e2e/withTimezone.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 src/test/e2e/withTimezone.ts diff --git a/src/test/e2e/withTimezone.ts b/src/test/e2e/withTimezone.ts new file mode 100644 index 000000000..f9a626517 --- /dev/null +++ b/src/test/e2e/withTimezone.ts @@ -0,0 +1,11 @@ +import { type Page, type Browser } from '@playwright/test'; + +export async function withTimezone( + ctx: { browser: Browser; timezoneId: string }, + testFn: (page: Page) => Promise, +) { + const context = await ctx.browser.newContext({ timezoneId: ctx.timezoneId }); + const page = await context.newPage(); + await testFn(page); + await context.close(); +} From 28fbdf07cf58fd91987ebb9fad08a6d224c0dcea Mon Sep 17 00:00:00 2001 From: simon-debruijn Date: Tue, 29 Oct 2024 17:05:15 +0100 Subject: [PATCH 09/17] Add test for timezone --- .../e2e/events/create-calendar-single.spec.ts | 61 ++++++++++++++++++- 1 file changed, 60 insertions(+), 1 deletion(-) diff --git a/src/test/e2e/events/create-calendar-single.spec.ts b/src/test/e2e/events/create-calendar-single.spec.ts index 82e14fb4d..5c556bcaf 100644 --- a/src/test/e2e/events/create-calendar-single.spec.ts +++ b/src/test/e2e/events/create-calendar-single.spec.ts @@ -1,4 +1,5 @@ -import { test } from '@playwright/test'; +import { expect, test } from '@playwright/test'; +import { withTimezone } from '@/test/e2e/withTimezone'; const dummyEvent = { name: 'E2E test event with calendarType single', @@ -44,3 +45,61 @@ test('create an event with calendarType single', async ({ baseURL, page }) => { // Publish await page.getByRole('button', { name: 'Publiceren', exact: true }).click(); }); + +test('create an event with calendarType single in Tokyo', async ({ + baseURL, + browser, +}) => { + let url; + + await withTimezone({ browser, timezoneId: 'Asia/Tokyo' }, async (page) => { + await page.goto(`${baseURL}/create`); + // 1. Select event + await page.getByRole('button', { name: 'Evenement' }).click(); + // 2. Type + await page.getByRole('button', { name: 'Concert' }).click(); + + // 3. Date + // Use current date + await page.getByLabel('Beginuur').click(); + await page.getByLabel('01:00').click(); + + // 4. Address + await page.getByLabel('Gemeente').click(); + await page.getByLabel('Gemeente').fill(dummyEvent.address.zip); + await page + .getByRole('option', { name: dummyEvent.address.municipality }) + .click(); + await page.getByLabel('Kies een locatie').click(); + + await page + .getByLabel('Kies een locatie') + .fill(dummyEvent.address.place.substring(0, 3)); + + await page + .getByRole('option', { name: dummyEvent.address.place, exact: true }) + .first() + .click(); + + // 5. Name and Age + await page.getByLabel('Naam van het evenement').click(); + await page.getByLabel('Naam van het evenement').fill(dummyEvent.name); + await page.getByRole('button', { name: 'Volwassenen 18+' }).click(); + await page.getByRole('button', { name: 'Opslaan' }).click(); + + // Publish + await page.getByRole('button', { name: 'Publiceren', exact: true }).click(); + + url = page.url(); + }); + + await withTimezone( + { browser, timezoneId: 'Europe/Brussels' }, + async (page) => { + await page.goto(url); + const startHour = page.getByLabel('Beginuur'); + await expect(startHour).toBeVisible(); + expect(await startHour.inputValue()).toEqual('01:00'); + }, + ); +}); From 02491c1d200922bd2619d14e42062cd12e47a0d1 Mon Sep 17 00:00:00 2001 From: simon-debruijn Date: Wed, 30 Oct 2024 12:31:28 +0100 Subject: [PATCH 10/17] Handle undefined subEvent --- src/hooks/api/events.ts | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/hooks/api/events.ts b/src/hooks/api/events.ts index fa7b4d960..eeb8c3d07 100644 --- a/src/hooks/api/events.ts +++ b/src/hooks/api/events.ts @@ -45,7 +45,7 @@ type EventArguments = { calendarType: Values; startDate: string; endDate: string; - subEvent: SubEvent[]; + subEvent: SubEvent[] | undefined; openingHours: OpeningHours[]; terms: Term[]; workflowStatus: WorkflowStatus; @@ -109,11 +109,13 @@ const addEvent = async ({ calendarType, startDate: fromZonedTime(startDate, 'Europe/Brussels'), endDate: fromZonedTime(endDate, 'Europe/Brussels'), - subEvent: subEvent.map((it) => ({ - ...it, - startDate: fromZonedTime(it.startDate, 'Europe/Brussels'), - endDate: fromZonedTime(it.endDate, 'Europe/Brussels'), - })), + subEvent: subEvent + ? subEvent.map((it) => ({ + ...it, + startDate: fromZonedTime(it.startDate, 'Europe/Brussels'), + endDate: fromZonedTime(it.endDate, 'Europe/Brussels'), + })) + : undefined, openingHours, terms, location, From 44d34e279ac4e95acaa11c7d6b8f599da450c881 Mon Sep 17 00:00:00 2001 From: simon-debruijn Date: Wed, 30 Oct 2024 13:36:39 +0100 Subject: [PATCH 11/17] Don't include undefined in json playload --- src/hooks/api/events.ts | 27 +++++++++++++++++++-------- 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/src/hooks/api/events.ts b/src/hooks/api/events.ts index eeb8c3d07..3980a56a5 100644 --- a/src/hooks/api/events.ts +++ b/src/hooks/api/events.ts @@ -1,3 +1,4 @@ +import { fromZonedTime, toZonedTime } from 'date-fns-tz'; import type { UseQueryOptions } from 'react-query'; import type { CalendarType } from '@/constants/CalendarType'; @@ -37,7 +38,6 @@ import { } from './authenticated-query'; import type { Headers } from './types/Headers'; import type { User } from './user'; -import { fromZonedTime, toZonedTime } from 'date-fns-tz'; type EventArguments = { description: string; @@ -192,16 +192,27 @@ const getEventById = async ({ headers, id }) => { return console.error(res); } const data = (await res.json()) as Event; - return { - ...data, - subEvent: data.subEvent.map((it) => ({ + + if (data.subEvent) { + data.subEvent = data.subEvent.map((it) => ({ ...it, startDate: toZonedTime(it.startDate, 'Europe/Brussels').toISOString(), endDate: toZonedTime(it.endDate, 'Europe/Brussels').toISOString(), - })), - startDate: toZonedTime(data.startDate, 'Europe/Brussels').toISOString(), - endDate: toZonedTime(data.endDate, 'Europe/Brussels').toISOString(), - } as Event; + })); + } + + if (data.startDate) { + data.startDate = toZonedTime( + data.startDate, + 'Europe/Brussels', + ).toISOString(); + } + + if (data.endDate) { + data.endDate = toZonedTime(data.endDate, 'Europe/Brussels').toISOString(); + } + + return data; }; type UseGetEventByIdArguments = ServerSideQueryOptions & { From a2523b318871ad6cbce0cae0120d16dea3adc5b8 Mon Sep 17 00:00:00 2001 From: simon-debruijn Date: Wed, 30 Oct 2024 13:37:08 +0100 Subject: [PATCH 12/17] Increase timeouts --- playwright.config.ts | 2 +- src/test/e2e/events/create-calendar-single.spec.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/playwright.config.ts b/playwright.config.ts index f6ed676b5..8db5e1045 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -8,7 +8,7 @@ import { defineConfig, devices } from '@playwright/test'; export default defineConfig({ testDir: './src/test/e2e', /* Maximum time one test can run for. */ - timeout: 60 * 1000, + timeout: 120 * 1000, expect: { /** * Maximum time expect() should wait for the condition to be met. diff --git a/src/test/e2e/events/create-calendar-single.spec.ts b/src/test/e2e/events/create-calendar-single.spec.ts index 5c556bcaf..7f0dc4880 100644 --- a/src/test/e2e/events/create-calendar-single.spec.ts +++ b/src/test/e2e/events/create-calendar-single.spec.ts @@ -1,4 +1,5 @@ import { expect, test } from '@playwright/test'; + import { withTimezone } from '@/test/e2e/withTimezone'; const dummyEvent = { @@ -98,8 +99,7 @@ test('create an event with calendarType single in Tokyo', async ({ async (page) => { await page.goto(url); const startHour = page.getByLabel('Beginuur'); - await expect(startHour).toBeVisible(); - expect(await startHour.inputValue()).toEqual('01:00'); + expect(await startHour.inputValue({ timeout: 10_000 })).toEqual('01:00'); }, ); }); From 7ec023ec0dec724a33c6c93ff5632c48f8f170a1 Mon Sep 17 00:00:00 2001 From: simon-debruijn Date: Wed, 30 Oct 2024 16:05:55 +0100 Subject: [PATCH 13/17] Fix lint --- src/hooks/api/offers.ts | 4 ++-- src/test/e2e/withTimezone.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/hooks/api/offers.ts b/src/hooks/api/offers.ts index c12dc85bc..f155fa337 100644 --- a/src/hooks/api/offers.ts +++ b/src/hooks/api/offers.ts @@ -1,10 +1,11 @@ +import { fromZonedTime } from 'date-fns-tz'; import type { UseQueryOptions } from 'react-query'; import { UseMutationOptions } from 'react-query'; import { OfferTypes, ScopeTypes } from '@/constants/OfferType'; import { useGetEventByIdQuery } from '@/hooks/api/events'; import { useGetPlaceByIdQuery } from '@/hooks/api/places'; -import { Offer, type SubEvent } from '@/types/Offer'; +import { type SubEvent,Offer } from '@/types/Offer'; import { createEmbededCalendarSummaries } from '@/utils/createEmbededCalendarSummaries'; import { createSortingArgument } from '@/utils/createSortingArgument'; import { fetchFromApi, isErrorObject } from '@/utils/fetchFromApi'; @@ -18,7 +19,6 @@ import { useAuthenticatedQuery, } from './authenticated-query'; import type { User } from './user'; -import { fromZonedTime } from 'date-fns-tz'; const getOffersByCreator = async ({ headers, ...queryData }) => { const res = await fetchFromApi({ diff --git a/src/test/e2e/withTimezone.ts b/src/test/e2e/withTimezone.ts index f9a626517..da983d1e0 100644 --- a/src/test/e2e/withTimezone.ts +++ b/src/test/e2e/withTimezone.ts @@ -1,4 +1,4 @@ -import { type Page, type Browser } from '@playwright/test'; +import { type Browser,type Page } from '@playwright/test'; export async function withTimezone( ctx: { browser: Browser; timezoneId: string }, From f1bf0a4056af17e1ebd1f79da0423905c86d78e0 Mon Sep 17 00:00:00 2001 From: simon-debruijn Date: Wed, 30 Oct 2024 16:06:20 +0100 Subject: [PATCH 14/17] Fix format --- src/hooks/api/offers.ts | 2 +- src/test/e2e/withTimezone.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/hooks/api/offers.ts b/src/hooks/api/offers.ts index f155fa337..6b2c9a7bb 100644 --- a/src/hooks/api/offers.ts +++ b/src/hooks/api/offers.ts @@ -5,7 +5,7 @@ import { UseMutationOptions } from 'react-query'; import { OfferTypes, ScopeTypes } from '@/constants/OfferType'; import { useGetEventByIdQuery } from '@/hooks/api/events'; import { useGetPlaceByIdQuery } from '@/hooks/api/places'; -import { type SubEvent,Offer } from '@/types/Offer'; +import { type SubEvent, Offer } from '@/types/Offer'; import { createEmbededCalendarSummaries } from '@/utils/createEmbededCalendarSummaries'; import { createSortingArgument } from '@/utils/createSortingArgument'; import { fetchFromApi, isErrorObject } from '@/utils/fetchFromApi'; diff --git a/src/test/e2e/withTimezone.ts b/src/test/e2e/withTimezone.ts index da983d1e0..f46a5a978 100644 --- a/src/test/e2e/withTimezone.ts +++ b/src/test/e2e/withTimezone.ts @@ -1,4 +1,4 @@ -import { type Browser,type Page } from '@playwright/test'; +import { type Browser, type Page } from '@playwright/test'; export async function withTimezone( ctx: { browser: Browser; timezoneId: string }, From 68bd33c039632bf157b0960ef4e719c490eebd56 Mon Sep 17 00:00:00 2001 From: simon-debruijn Date: Tue, 5 Nov 2024 10:47:20 +0100 Subject: [PATCH 15/17] Fix date-fns --- package.json | 5 +- src/ui/DatePicker.tsx | 4 +- src/utils/formatPeriod.ts | 3 +- yarn.lock | 107 +++++++++++++++++++++----------------- 4 files changed, 63 insertions(+), 56 deletions(-) diff --git a/package.json b/package.json index 7e6e0bbd2..5867f4678 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ "bootstrap": "^4.5.3", "clipboard-copy": "^4.0.1", "crypto-browserify": "^3.12.0", - "date-fns": "^4.1.0", + "date-fns": "^3.6", "date-fns-tz": "^3.2.0", "deep-object-diff": "^1.1.0", "draft-js": "^0.11.7", @@ -63,7 +63,7 @@ "react-bootstrap": "^1.4.0", "react-bootstrap-typeahead": "^5.1.2", "react-cookie": "^4.0.3", - "react-datepicker": "^4.8.0", + "react-datepicker": "^7.5.0", "react-dom": "^17.0.2", "react-draft-wysiwyg": "^1.15.0", "react-gauge-component": "^1.2.0", @@ -98,7 +98,6 @@ "@testing-library/user-event": "^12.8.0", "@types/lodash": "^4.14.168", "@types/react-bootstrap-typeahead": "^5.1.8", - "@types/react-datepicker": "^4.8.0", "@types/react-query": "^1.1.2", "@types/styled-components": "^5.1.9", "@types/uuid": "^9.0.0", diff --git a/src/ui/DatePicker.tsx b/src/ui/DatePicker.tsx index ff10d640d..f16876758 100644 --- a/src/ui/DatePicker.tsx +++ b/src/ui/DatePicker.tsx @@ -1,8 +1,6 @@ import 'react-datepicker/dist/react-datepicker.css'; -import de from 'date-fns/locale/de'; -import fr from 'date-fns/locale/fr'; -import nl from 'date-fns/locale/nl'; +import { de, fr, nl } from 'date-fns/locale'; import { useRef } from 'react'; import ReactDatePicker, { registerLocale, diff --git a/src/utils/formatPeriod.ts b/src/utils/formatPeriod.ts index 8bdee09fe..fe3e27331 100644 --- a/src/utils/formatPeriod.ts +++ b/src/utils/formatPeriod.ts @@ -1,6 +1,5 @@ import { differenceInDays, format } from 'date-fns'; -import fr from 'date-fns/locale/fr'; -import nl from 'date-fns/locale/nl-BE'; +import { fr, nl } from 'date-fns/locale'; import capitalize from 'lodash/capitalize'; import type { TFunction } from 'react-i18next'; diff --git a/yarn.lock b/yarn.lock index e08002f3e..ad68a2580 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1230,6 +1230,42 @@ resolved "https://registry.yarnpkg.com/@faker-js/faker/-/faker-8.0.2.tgz#bab698c5d3da9c52744e966e0e3eedb6c8b05c37" integrity sha512-Uo3pGspElQW91PCvKSIAXoEgAUlRnH29sX2/p89kg7sP1m2PzCufHINd0FhTXQf6DYGiUlVncdSPa2F9wxed2A== +"@floating-ui/core@^1.6.0": + version "1.6.8" + resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.8.tgz#aa43561be075815879305965020f492cdb43da12" + integrity sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA== + dependencies: + "@floating-ui/utils" "^0.2.8" + +"@floating-ui/dom@^1.0.0": + version "1.6.12" + resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.12.tgz#6333dcb5a8ead3b2bf82f33d6bc410e95f54e556" + integrity sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w== + dependencies: + "@floating-ui/core" "^1.6.0" + "@floating-ui/utils" "^0.2.8" + +"@floating-ui/react-dom@^2.1.2": + version "2.1.2" + resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.2.tgz#a1349bbf6a0e5cb5ded55d023766f20a4d439a31" + integrity sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A== + dependencies: + "@floating-ui/dom" "^1.0.0" + +"@floating-ui/react@^0.26.23": + version "0.26.26" + resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.26.26.tgz#ab4b8675b21a61c1c868c392d44b2ccb5d5359a2" + integrity sha512-iv2BjdcyoF1j1708Z9CrGtMc9ZZvMPZnDqyB1FrSWYCi+/nlPArUO/u9QhwC4E1Pi4T0g18GZ4W702m0NDh9bw== + dependencies: + "@floating-ui/react-dom" "^2.1.2" + "@floating-ui/utils" "^0.2.8" + tabbable "^6.0.0" + +"@floating-ui/utils@^0.2.8": + version "0.2.8" + resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.8.tgz#21a907684723bbbaa5f0974cf7730bd797eb8e62" + integrity sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig== + "@fortawesome/fontawesome-common-types@^0.2.36": version "0.2.36" resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz#b44e52db3b6b20523e0c57ef8c42d315532cb903" @@ -1792,7 +1828,7 @@ schema-utils "^3.0.0" source-map "^0.7.3" -"@popperjs/core@^2.11.6", "@popperjs/core@^2.9.2": +"@popperjs/core@^2.11.6": version "2.11.6" resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45" integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw== @@ -3475,16 +3511,6 @@ dependencies: "@types/react" "*" -"@types/react-datepicker@^4.8.0": - version "4.8.0" - resolved "https://registry.yarnpkg.com/@types/react-datepicker/-/react-datepicker-4.8.0.tgz#0221bd38725b7db64cd08a89f49a93d816c2f691" - integrity sha512-20uzZsIf4moPAjjHDfPvH8UaOHZBxrkiQZoLS3wgKq8Xhp+95gdercLEdoA7/I8nR9R5Jz2qQkdMIM+Lq4AS1A== - dependencies: - "@popperjs/core" "^2.9.2" - "@types/react" "*" - date-fns "^2.0.1" - react-popper "^2.2.5" - "@types/react-dom@>=16.9.0": version "18.0.10" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.10.tgz#3b66dec56aa0f16a6cc26da9e9ca96c35c0b4352" @@ -5380,6 +5406,11 @@ clone-deep@^4.0.1: kind-of "^6.0.2" shallow-clone "^3.0.0" +clsx@^2.1.1: + version "2.1.1" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999" + integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA== + co@^4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184" @@ -6134,15 +6165,10 @@ date-fns-tz@^3.2.0: resolved "https://registry.yarnpkg.com/date-fns-tz/-/date-fns-tz-3.2.0.tgz#647dc56d38ac33a3e37b65e9d5c4cda5af5e58e6" integrity sha512-sg8HqoTEulcbbbVXeg84u5UnlsQa8GS5QXMqjjYIhS4abEVVKIUwe0/l/UhrZdKaL/W5eWZNlbTeEIiOXTcsBQ== -date-fns@^2.0.1, date-fns@^2.24.0: - version "2.29.3" - resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8" - integrity sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA== - -date-fns@^4.1.0: - version "4.1.0" - resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-4.1.0.tgz#64b3d83fff5aa80438f5b1a633c2e83b8a1c2d14" - integrity sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg== +date-fns@^3.6, date-fns@^3.6.0: + version "3.6.0" + resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.6.0.tgz#f20ca4fe94f8b754951b24240676e8618c0206bf" + integrity sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww== debug@2.6.9, debug@^2.2.0, debug@^2.3.3: version "2.6.9" @@ -11890,17 +11916,15 @@ react-cookie@^4.0.3: hoist-non-react-statics "^3.0.0" universal-cookie "^4.0.0" -react-datepicker@^4.8.0: - version "4.10.0" - resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-4.10.0.tgz#3f386ac5873dac5ea56544e51cdc01109938796c" - integrity sha512-6IfBCZyWj54ZZGLmEZJ9c4Yph0s9MVfEGDC2evOvf9AmVz+RRcfP2Czqad88Ff9wREbcbqa4dk7IFYeXF1d3Ag== +react-datepicker@^7.5.0: + version "7.5.0" + resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-7.5.0.tgz#e7b1014a6dbd3b314839a5c57a6dacfbb16074e4" + integrity sha512-6MzeamV8cWSOcduwePHfGqY40acuGlS1cG//ePHT6bVbLxWyqngaStenfH03n1wbzOibFggF66kWaBTb1SbTtQ== dependencies: - "@popperjs/core" "^2.9.2" - classnames "^2.2.6" - date-fns "^2.24.0" - prop-types "^15.7.2" - react-onclickoutside "^6.12.2" - react-popper "^2.3.0" + "@floating-ui/react" "^0.26.23" + clsx "^2.1.1" + date-fns "^3.6.0" + prop-types "^15.8.1" react-docgen-typescript@^2.1.1: version "2.2.2" @@ -11959,11 +11983,6 @@ react-error-boundary@^3.1.0: dependencies: "@babel/runtime" "^7.12.5" -react-fast-compare@^3.0.1: - version "3.2.0" - resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb" - integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA== - react-gauge-component@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/react-gauge-component/-/react-gauge-component-1.2.0.tgz#e95e0032f1a22e4fc32a9c427e7dba1002350bfe" @@ -12015,11 +12034,6 @@ react-lifecycles-compat@^3.0.4: resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== -react-onclickoutside@^6.12.2: - version "6.12.2" - resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.12.2.tgz#8e6cf80c7d17a79f2c908399918158a7b02dda01" - integrity sha512-NMXGa223OnsrGVp5dJHkuKxQ4czdLmXSp5jSV9OqiCky9LOpPATn3vLldc+q5fK3gKbEHvr7J1u0yhBh/xYkpA== - react-overlays@^5.1.0, react-overlays@^5.1.2: version "5.2.1" resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-5.2.1.tgz#49dc007321adb6784e1f212403f0fb37a74ab86b" @@ -12047,14 +12061,6 @@ react-popper@^1.0.0: typed-styles "^0.0.7" warning "^4.0.2" -react-popper@^2.2.5, react-popper@^2.3.0: - version "2.3.0" - resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.3.0.tgz#17891c620e1320dce318bad9fede46a5f71c70ba" - integrity sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q== - dependencies: - react-fast-compare "^3.0.1" - warning "^4.0.2" - react-query@*, react-query@^3.2.0: version "3.39.3" resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.39.3.tgz#4cea7127c6c26bdea2de5fb63e51044330b03f35" @@ -13445,6 +13451,11 @@ synckit@^0.8.4: "@pkgr/utils" "^2.3.1" tslib "^2.5.0" +tabbable@^6.0.0: + version "6.2.0" + resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97" + integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew== + tapable@^1.0.0, tapable@^1.1.3: version "1.1.3" resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2" From 7bf934f26e9ee95eb676c01979157605763260a6 Mon Sep 17 00:00:00 2001 From: simon-debruijn Date: Tue, 5 Nov 2024 10:48:58 +0100 Subject: [PATCH 16/17] Use nlBE --- src/ui/DatePicker.tsx | 2 +- src/utils/formatPeriod.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ui/DatePicker.tsx b/src/ui/DatePicker.tsx index f16876758..f081218c1 100644 --- a/src/ui/DatePicker.tsx +++ b/src/ui/DatePicker.tsx @@ -1,6 +1,6 @@ import 'react-datepicker/dist/react-datepicker.css'; -import { de, fr, nl } from 'date-fns/locale'; +import { de, fr, nlBE as nl } from 'date-fns/locale'; import { useRef } from 'react'; import ReactDatePicker, { registerLocale, diff --git a/src/utils/formatPeriod.ts b/src/utils/formatPeriod.ts index fe3e27331..800c9f03c 100644 --- a/src/utils/formatPeriod.ts +++ b/src/utils/formatPeriod.ts @@ -1,5 +1,5 @@ import { differenceInDays, format } from 'date-fns'; -import { fr, nl } from 'date-fns/locale'; +import { fr, nlBE as nl } from 'date-fns/locale'; import capitalize from 'lodash/capitalize'; import type { TFunction } from 'react-i18next'; From 5a0c991e21cdf1032c32711332ef26ee58a21977 Mon Sep 17 00:00:00 2001 From: simon-debruijn Date: Tue, 5 Nov 2024 11:14:20 +0100 Subject: [PATCH 17/17] Fix ts issues --- src/pages/steps/PlaceStep.tsx | 2 +- src/ui/Box.tsx | 2 +- src/ui/Pagination.tsx | 2 +- src/ui/TimeTable.tsx | 2 +- src/ui/ToggleBox.tsx | 4 ++-- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/pages/steps/PlaceStep.tsx b/src/pages/steps/PlaceStep.tsx index fb2dbd2fc..6895a51d6 100644 --- a/src/pages/steps/PlaceStep.tsx +++ b/src/pages/steps/PlaceStep.tsx @@ -34,7 +34,7 @@ const getGlobalValue = getValueFromTheme('global'); type PlaceStepProps = StackProps & StepProps & { - terms: Array>; + terms?: Array>; municipality?: City; country?: Country; chooseLabel: (t: TFunction) => string; diff --git a/src/ui/Box.tsx b/src/ui/Box.tsx index c1b6d0647..f0c6c5b34 100644 --- a/src/ui/Box.tsx +++ b/src/ui/Box.tsx @@ -12,7 +12,7 @@ import type { } from 'react'; import { forwardRef } from 'react'; import { AsyncTypeaheadProps, TypeaheadModel } from 'react-bootstrap-typeahead'; -import { ReactDatePickerProps } from 'react-datepicker'; +import { DatePickerProps as ReactDatePickerProps } from 'react-datepicker'; import type { FlattenInterpolation, FlattenSimpleInterpolation, diff --git a/src/ui/Pagination.tsx b/src/ui/Pagination.tsx index 2ca462f4e..448c3aafc 100644 --- a/src/ui/Pagination.tsx +++ b/src/ui/Pagination.tsx @@ -12,7 +12,7 @@ type PaginationProps = InlineProps & { currentPage: number; totalItems: number; perPage: number; - limitPages: number; + limitPages?: number; onChangePage?: (newValue: number) => void; }; diff --git a/src/ui/TimeTable.tsx b/src/ui/TimeTable.tsx index 1dc1902dd..1b21cb2b3 100644 --- a/src/ui/TimeTable.tsx +++ b/src/ui/TimeTable.tsx @@ -113,7 +113,7 @@ type CopyPayload = } | { method: 'all'; data: { [key: string]: Data } }; -type RowProps = InlineProps & { +type RowProps = Omit & { data: Record; date: string; onCopy: (date: string) => void; diff --git a/src/ui/ToggleBox.tsx b/src/ui/ToggleBox.tsx index e77409ade..69a066cfd 100644 --- a/src/ui/ToggleBox.tsx +++ b/src/ui/ToggleBox.tsx @@ -53,9 +53,9 @@ const SuccessIcon = ({ active }: SuccessIconProps) => { }; type Props = StackProps & { - active: boolean; + active?: boolean; icon?: JSX.Element; - text: ReactNode; + text?: ReactNode; disabled?: boolean; };