feat: add all-day prop to event-card

src/components/EventCard/EventCard.test.tsx

@@ -55,6 +55,23 @@ describe('The EventCard component', () => {
     expect(normalizedText).toBe('02/12/2024 | 08:30 - 03/12/2024 | 09:30');
   });
 
+  it('does not display start and end time if allDay property set "true"', () => {
+    setup({
+      event: {
+        ...defaultProps.event,
+        allDay: true,
+      },
+    });
+
+    const textContent = screen.getByText(
+      /02\/12\/2024\s*-\s*03\/12\/2024/i
+    ).textContent;
+
+    const normalizedText = textContent?.replace(/\s+/g, ' ').trim();
+
+    expect(normalizedText).toBe('02/12/2024 - 03/12/2024');
+  });
+
   it('displays the speakers', async () => {
     setup();
 

src/components/EventCard/EventCard.tsx

@@ -36,7 +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';
+import isSameDate from '../../utils/isSameDate';
 
 export interface EventCardProps {
   event: StrapiEvent;
@@ -209,22 +209,46 @@ export const EventCard = ({ event }: EventCardProps): JSX.Element => {
               color={'var(--boemly-colors-primary-700)'}
             />
             <Text size={['xsLowBold', null, null, 'smLowBold']}>
-              {formatDate(event.startDate, {
+              {formatDate(event.start, {
                 year: 'numeric',
                 month: '2-digit',
                 day: '2-digit',
               })}
-              {event.startTime &&
-                ` | ${convertStrapiTime(event.startTime, formatNumber)} `}
-              {(event.endDate || event.endTime) && ' - '}
-              {event.endDate &&
-                formatDate(event.endDate, {
-                  year: 'numeric',
-                  month: '2-digit',
-                  day: '2-digit',
-                })}
-              {event.endTime && event.endDate && ' | '}
-              {event.endTime && convertStrapiTime(event.endTime, formatNumber)}
+
+              {!event.allDay &&
+                ` | ${formatNumber(new Date(event.start).getUTCHours(), {
+                  minimumIntegerDigits: 2,
+                })}:${formatNumber(new Date(event.start).getUTCMinutes(), {
+                  minimumIntegerDigits: 2,
+                })}`}
+
+              {event.end &&
+                !isSameDate(new Date(event.start), new Date(event.end)) && (
+                  <>
+                    {' - '}
+                    {formatDate(event.end, {
+                      year: 'numeric',
+                      month: '2-digit',
+                      day: '2-digit',
+                    })}
+
+                    {!event.allDay &&
+                      ` | ${formatNumber(new Date(event.end).getUTCHours(), {
+                        minimumIntegerDigits: 2,
+                      })}:${formatNumber(new Date(event.end).getUTCMinutes(), {
+                        minimumIntegerDigits: 2,
+                      })}`}
+                  </>
+                )}
+
+              {event.end &&
+                !event.allDay &&
+                isSameDate(new Date(event.start), new Date(event.end)) &&
+                ` - ${formatNumber(new Date(event.end).getUTCHours(), {
+                  minimumIntegerDigits: 2,
+                })}:${formatNumber(new Date(event.end).getUTCMinutes(), {
+                  minimumIntegerDigits: 2,
+                })}`}
             </Text>
           </Flex>
         </Flex>

src/models/strapi/StrapiEvent.ts

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

src/slices/Events/Events.test.tsx

@@ -19,7 +19,7 @@ const pastEventMock = {
   attributes: {
     ...strapiEventMock.attributes,
     title: 'Past Event',
-    startDate: '2024-12-01',
+    start: '2024-12-01T10:00:00.000Z',
     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',
-    startDate: '2025-02-01',
+    start: '2024-12-01T10:00:00.000Z',
     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[startDate][$gte]')) {
+      if (getKey.toString().includes('filters[start][$gte]')) {
         return {
           data: [{ body: { data: [upcomingEventMock] } }],
           isLoading: false,
@@ -77,7 +77,7 @@ describe('The Events slice', () => {
           loadMore: jest.fn(),
         };
       }
-      if (getKey.toString().includes('filters[startDate][$lt]')) {
+      if (getKey.toString().includes('filters[start][$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[startDate][$lt]')) {
+      if (getKey.toString().includes('filters[start][$lt]')) {
         return {
           data: [
             {
@@ -243,7 +243,7 @@ describe('The Events slice', () => {
       await waitFor(() => {
         expect(getKeyCalls.map(decodeURIComponent)).toEqual(
           expect.arrayContaining([
-            expect.stringContaining('filters[startDate][$gte]'),
+            expect.stringContaining('filters[start][$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[startDate][$gte]'),
+            expect.stringContaining('filters[start][$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[startDate][$gte]=${NOW.toISOString()}`
+              `filters[start][$gte]=${NOW.toISOString()}`
             ),
           ])
         );
@@ -341,9 +341,7 @@ describe('The Events slice', () => {
       await waitFor(() => {
         expect(getKeyCalls.map(decodeURIComponent)).toEqual(
           expect.arrayContaining([
-            expect.stringContaining(
-              `filters[startDate][$lt]=${NOW.toISOString()}`
-            ),
+            expect.stringContaining(`filters[start][$lt]=${NOW.toISOString()}`),
           ])
         );
       });

src/slices/Events/Events.tsx

@@ -96,9 +96,9 @@ export const Events: React.FC<EventsProps> = ({ slice }: EventsProps) => {
     url.searchParams.append('pLevel', STRAPI_DEFAULT_POPULATE_DEPTH);
 
     if (sort[0] === Sort.OLDEST_FIRST) {
-      url.searchParams.append('sort', 'startDate:asc');
+      url.searchParams.append('sort', 'start:asc');
     } else {
-      url.searchParams.append('sort', 'startDate:desc');
+      url.searchParams.append('sort', 'start:desc');
     }
 
     if (eventTypeFilter.length) {
@@ -123,13 +123,12 @@ export const Events: React.FC<EventsProps> = ({ slice }: EventsProps) => {
 
   const getUpcomingKey: SWRInfiniteKeyLoader = useCallback(
     (index) =>
-      buildEventsUrl(index, UPCOMING_BATCH_SIZE, 'filters[startDate][$gte]'),
+      buildEventsUrl(index, UPCOMING_BATCH_SIZE, 'filters[start][$gte]'),
     [eventTypeFilter, languageFilter, sort]
   );
 
   const getPastKey: SWRInfiniteKeyLoader = useCallback(
-    (index) =>
-      buildEventsUrl(index, PAST_BATCH_SIZE, 'filters[startDate][$lt]'),
+    (index) => buildEventsUrl(index, PAST_BATCH_SIZE, 'filters[start][$lt]'),
     [eventTypeFilter, languageFilter, sort]
   );
 

src/test/strapiMocks/strapiEventMock.ts

@@ -14,10 +14,9 @@ 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' }],
-    startDate: new Date('2024-02-12'),
-    startTime: '08:30:00.000',
-    endDate: new Date('2024-03-12'),
-    endTime: '09:30:00.000',
+    start: new Date('2024-02-12T08:30:00Z'),
+    end: new Date('2024-03-12T09:30:00Z'),
+    allDay: false,
     title: 'Event Title',
     description: 'Event Description',
     button: { id: 1, text: 'Button text', url: 'https://tree.ly' },

src/utils/isSameDate.test.ts

@@ -0,0 +1,18 @@
+import isSameDate from './isSameDate';
+
+describe('The getCountryFlag util', () => {
+  it('returns flag icon', () => {
+    expect(
+      isSameDate(
+        new Date('2024-02-12T08:30:00Z'),
+        new Date('2024-02-12T08:30:00Z')
+      )
+    ).toEqual(true);
+    expect(
+      isSameDate(
+        new Date('2025-02-12T08:30:00Z'),
+        new Date('2024-02-10T08:30:00Z')
+      )
+    ).toEqual(false);
+  });
+});

src/utils/isSameDate.ts

@@ -0,0 +1,9 @@
+const isSameDate = (date1: Date, date2: Date): boolean => {
+  return (
+    date1.getFullYear() === date2.getFullYear() &&
+    date1.getMonth() === date2.getMonth() &&
+    date1.getDate() === date2.getDate()
+  );
+};
+
+export default isSameDate;