feat: update start and end in event-card

Author: lialila

package-lock.json

@@ -153,7 +153,8 @@
     "formik": "^2.4.5",
     "framer-motion": "^10.16.5",
     "mapbox-gl": "^2.15.0",
-    "swr": "^2.3.2"
+    "swr": "^2.3.2",
+    "yocto-queue": "^1.2.0"
   },
   "msw": {
     "workerDirectory": [

package.json

@@ -46,9 +46,13 @@ describe('The EventCard component', () => {
   it('displays start and end date and time correctly', () => {
     setup();
 
-    expect(
-      screen.getByText(/3\/12\/2024\s*\|\s*08:30\s*-\s*09:30/i)
-    ).toBeInTheDocument();
+    const textContent = screen.getByText(
+      /02\/12\/2024\s*\|\s*08:30\s*-\s*03\/12\/2024\s*\|\s*09:30/i
+    ).textContent;
+
+    const normalizedText = textContent?.replace(/\s+/g, ' ').trim();
+
+    expect(normalizedText).toBe('02/12/2024 | 08:30 - 03/12/2024 | 09:30');
   });
 
   it('displays the speakers', async () => {

src/components/EventCard/EventCard.test.tsx

@@ -36,6 +36,7 @@ import { BREAKPOINT_MD_QUERY } from '../../constants/breakpoints';
 import StrapiEvent, { EventType } from '../../models/strapi/StrapiEvent';
 import { IntlContext } from '../ContextProvider';
 import strapiMediaUrl from '../../utils/strapiMediaUrl';
+import convertStrapiTime from '../../utils/convertStrapiTime';
 
 export interface EventCardProps {
   event: StrapiEvent;
@@ -208,27 +209,23 @@ export const EventCard = ({ event }: EventCardProps): JSX.Element => {
               color={'var(--boemly-colors-primary-700)'}
             />
             <Text size={['xsLowBold', null, null, 'smLowBold']}>
-              {formatDate(event.start, {
-                year: 'numeric',
-                month: '2-digit',
-                day: '2-digit',
-              })}{' '}
-              |{' '}
-              {formatNumber(new Date(event.start).getUTCHours(), {
-                minimumIntegerDigits: 2,
-              })}
-              :
-              {formatNumber(new Date(event.start).getUTCMinutes(), {
-                minimumIntegerDigits: 2,
-              })}{' '}
+              {event.startDate &&
+                formatDate(event.startDate, {
+                  year: 'numeric',
+                  month: '2-digit',
+                  day: '2-digit',
+                })}
+              {event.startTime &&
+                ` | ${convertStrapiTime(event.startTime, formatNumber)} `}
               -{' '}
-              {formatNumber(new Date(event.end).getUTCHours(), {
-                minimumIntegerDigits: 2,
-              })}
-              :
-              {formatNumber(new Date(event.end).getUTCMinutes(), {
-                minimumIntegerDigits: 2,
-              })}
+              {event.endDate &&
+                formatDate(event.endDate, {
+                  year: 'numeric',
+                  month: '2-digit',
+                  day: '2-digit',
+                })}
+              {event.endTime &&
+                ` | ${convertStrapiTime(event.endTime, formatNumber)}`}
             </Text>
           </Flex>
         </Flex>

src/components/EventCard/EventCard.tsx

@@ -41,8 +41,10 @@ interface StrapiEvent {
   location?: string;
   locale: Locale;
   online?: boolean;
-  start: Date;
-  end: Date;
+  startDate?: Date;
+  startTime?: string;
+  endDate?: Date;
+  endTime?: string;
   slices: any[];
   localizations: StrapiLocalization[];
   topBanner?: StrapiTopBanner;

src/models/strapi/StrapiEvent.ts

@@ -19,7 +19,7 @@ const pastEventMock = {
   attributes: {
     ...strapiEventMock.attributes,
     title: 'Past Event',
-    start: '2024-12-01T10:00:00.000Z',
+    startDate: '2024-12-01',
     eventTypes: [{ id: 1, eventType: EventType.MEET_UP }],
     languages: [{ id: 1, language: 'English', countryCode: 'GB' }],
   },
@@ -30,7 +30,7 @@ const upcomingEventMock = {
   attributes: {
     ...strapiEventMock.attributes,
     title: 'Upcoming Event',
-    start: '2025-02-01T10:00:00.000Z',
+    startDate: '2025-02-01',
     eventTypes: [{ id: 1, eventType: EventType.CONFERENCE }],
     languages: [{ id: 1, language: 'German', countryCode: 'DE' }],
   },
@@ -68,7 +68,7 @@ describe('The Events slice', () => {
       const key = getKey(0, null);
       getKeyCalls.push(key.toString());
 
-      if (getKey.toString().includes('filters[start][$gte]')) {
+      if (getKey.toString().includes('filters[startDate][$gte]')) {
         return {
           data: [{ body: { data: [upcomingEventMock] } }],
           isLoading: false,
@@ -77,7 +77,7 @@ describe('The Events slice', () => {
           loadMore: jest.fn(),
         };
       }
-      if (getKey.toString().includes('filters[start][$lt]')) {
+      if (getKey.toString().includes('filters[startDate][$lt]')) {
         return {
           data: [{ body: { data: [pastEventMock] } }],
           isLoading: false,
@@ -149,7 +149,7 @@ describe('The Events slice', () => {
     // Use past events for the testing, because the batch for past events is defined as 2 and
     // the "Load button" will be shown when there are more then 2 past events
     (useEvents as jest.Mock).mockImplementation(({ getKey }) => {
-      if (getKey.toString().includes('filters[start][$lt]')) {
+      if (getKey.toString().includes('filters[startDate][$lt]')) {
         return {
           data: [
             {
@@ -243,7 +243,7 @@ describe('The Events slice', () => {
       await waitFor(() => {
         expect(getKeyCalls.map(decodeURIComponent)).toEqual(
           expect.arrayContaining([
-            expect.stringContaining('filters[start][$gte]'),
+            expect.stringContaining('filters[startDate][$gte]'),
             expect.stringContaining(
               'filters[$or][0][eventTypes][eventType]=Conference'
             ),
@@ -278,7 +278,7 @@ describe('The Events slice', () => {
       await waitFor(() => {
         expect(getKeyCalls.map(decodeURIComponent)).toEqual(
           expect.arrayContaining([
-            expect.stringContaining('filters[start][$gte]'),
+            expect.stringContaining('filters[startDate][$gte]'),
             expect.stringContaining(
               'filters[$or][0][languages][language]=German'
             ),
@@ -303,7 +303,7 @@ describe('The Events slice', () => {
         expect(getKeyCalls.map(decodeURIComponent)).toEqual(
           expect.arrayContaining([
             expect.stringContaining(
-              `filters[start][$gte]=${NOW.toISOString()}`
+              `filters[startDate][$gte]=${NOW.toISOString()}`
             ),
           ])
         );
@@ -341,7 +341,9 @@ describe('The Events slice', () => {
       await waitFor(() => {
         expect(getKeyCalls.map(decodeURIComponent)).toEqual(
           expect.arrayContaining([
-            expect.stringContaining(`filters[start][$lt]=${NOW.toISOString()}`),
+            expect.stringContaining(
+              `filters[startDate][$lt]=${NOW.toISOString()}`
+            ),
           ])
         );
       });

src/slices/Events/Events.test.tsx

@@ -84,7 +84,7 @@ export const Events: React.FC<EventsProps> = ({ slice }: EventsProps) => {
   ) => {
     const url = new URL(`/treely-events`, STRAPI_URI);
     url.searchParams.append(
-      'pagination[start]',
+      'pagination[startDate]',
       (index * batchSize).toString()
     );
     url.searchParams.append('pagination[limit]', batchSize.toString());
@@ -93,9 +93,9 @@ export const Events: React.FC<EventsProps> = ({ slice }: EventsProps) => {
     url.searchParams.append('pLevel', '6');
 
     if (sort[0] === Sort.OLDEST_FIRST) {
-      url.searchParams.append('sort', 'start:asc');
+      url.searchParams.append('sort', 'startDate:asc');
     } else {
-      url.searchParams.append('sort', 'start:desc');
+      url.searchParams.append('sort', 'startDate:desc');
     }
 
     if (eventTypeFilter.length) {
@@ -120,12 +120,13 @@ export const Events: React.FC<EventsProps> = ({ slice }: EventsProps) => {
 
   const getUpcomingKey: SWRInfiniteKeyLoader = useCallback(
     (index) =>
-      buildEventsUrl(index, UPCOMING_BATCH_SIZE, 'filters[start][$gte]'),
+      buildEventsUrl(index, UPCOMING_BATCH_SIZE, 'filters[startDate][$gte]'),
     [eventTypeFilter, languageFilter, sort]
   );
 
   const getPastKey: SWRInfiniteKeyLoader = useCallback(
-    (index) => buildEventsUrl(index, PAST_BATCH_SIZE, 'filters[start][$lt]'),
+    (index) =>
+      buildEventsUrl(index, PAST_BATCH_SIZE, 'filters[startDate][$lt]'),
     [eventTypeFilter, languageFilter, sort]
   );
 

src/slices/Events/Events.tsx

@@ -14,8 +14,10 @@ export const strapiEventMock: IStrapiData<StrapiEvent> = {
     logo: { id: 1, alt: 'Logo alt text 1', img: { data: strapiMediaMock } },
     eventTypes: [{ id: 1, eventType: EventType.MEET_UP }],
     languages: [{ id: 1, language: 'English', countryCode: 'GB' }],
-    start: new Date('2024-03-12T08:30:00Z'),
-    end: new Date('2024-03-12T09:30:00Z'),
+    startDate: new Date('2024-02-12'),
+    startTime: '08:30:00.000',
+    endDate: new Date('2024-03-12'),
+    endTime: '09:30:00.000',
     title: 'Event Title',
     description: 'Event Description',
     button: { id: 1, text: 'Button text', url: 'https://tree.ly' },

src/test/strapiMocks/strapiEventMock.ts

@@ -0,0 +1,21 @@
+import convertStrapiTime from './convertStrapiTime';
+
+describe('The convertStrapiTime util', () => {
+  it('returns the correct time', () => {
+    const formatNumber = jest.fn((number) =>
+      number.toString().padStart(2, '0')
+    );
+    const time = '12:45:00.000';
+
+    expect(convertStrapiTime(time, formatNumber)).toBe('12:45');
+  });
+
+  it('returns the correct amount of digits', () => {
+    const formatNumber = jest.fn((number) =>
+      number.toString().padStart(2, '0')
+    );
+    const time = '08:05:00.000';
+
+    expect(convertStrapiTime(time, formatNumber)).toBe('08:05');
+  });
+});

src/utils/convertStrapiTime.test.ts

@@ -0,0 +1,19 @@
+import { FormatNumberOptions } from 'react-intl';
+
+const convertStrapiTime = (
+  date: string,
+  formatNumber: (value: number | bigint, opts?: FormatNumberOptions) => string
+): string => {
+  let tempTime = date.split(':');
+  let dt = new Date();
+  dt.setHours(parseInt(tempTime[0], 10), parseInt(tempTime[1], 10), 0, 0);
+  const time = new Date(dt.getTime() - dt.getTimezoneOffset() * 60000);
+
+  return `${formatNumber(time.getUTCHours(), {
+    minimumIntegerDigits: 2,
+  })}:${formatNumber(time.getUTCMinutes(), {
+    minimumIntegerDigits: 2,
+  })}`;
+};
+
+export default convertStrapiTime;