Feature: Occurrence fixes (#1213)

Author: daveearley

frontend/src/components/common/EventCard/index.tsx

@@ -344,13 +344,25 @@ export function EventCard({event, compact = false}: EventCardProps) {
                                 )}
                             </div>
                             <div className={classes.footer}>
-                                <NavLink
-                                    to={`/manage/organizer/${event?.organizer?.id}`}
+                                <span
+                                    role="link"
+                                    tabIndex={0}
                                     className={classes.organizer}
-                                    onClick={(e) => e.stopPropagation()}
+                                    onClick={(e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        navigate(`/manage/organizer/${event?.organizer?.id}`);
+                                    }}
+                                    onKeyDown={(e) => {
+                                        if (e.key === 'Enter' || e.key === ' ') {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                            navigate(`/manage/organizer/${event?.organizer?.id}`);
+                                        }
+                                    }}
                                 >
                                     {event?.organizer?.name}
-                                </NavLink>
+                                </span>
                                 {ticketAvailability && (
                                     <span className={`${classes.ticketStatus} ${classes[`ticket-${ticketAvailability.status}`]}`}>
                                         {ticketAvailability.text}

frontend/src/components/common/EventDateRange/index.tsx

@@ -42,19 +42,19 @@ export const EventDateRange = ({event, occurrence}: EventDateRangeProps) => {
     }
 
     if (event.type === EventType.RECURRING) {
-        const activeOccurrences = (event.occurrences || [])
-            .filter(o => o.status === EventOccurrenceStatus.ACTIVE && !o.is_past)
+        const upcomingOccurrences = (event.occurrences || [])
+            .filter(o => o.status !== EventOccurrenceStatus.CANCELLED && !o.is_past)
             .sort((a, b) => a.start_date.localeCompare(b.start_date));
 
-        if (activeOccurrences.length > 0) {
-            const next = activeOccurrences[0];
-            if (activeOccurrences.length === 1) {
+        if (upcomingOccurrences.length > 0) {
+            const next = upcomingOccurrences[0];
+            if (upcomingOccurrences.length === 1) {
                 return formatRange(next.start_date, next.end_date, event.timezone);
             }
             const nextFormatted = formatDateWithLocale(next.start_date, "shortDateTime", event.timezone);
             return (
                 <span>
-                    {t`Next: ${nextFormatted}`} · {t`${activeOccurrences.length} upcoming dates`}
+                    {t`Next: ${nextFormatted}`} · {t`${upcomingOccurrences.length} upcoming dates`}
                 </span>
             );
         }

frontend/src/components/layouts/EventHomepage/index.tsx

@@ -4,7 +4,7 @@ import "../../../styles/widget/default.scss";
 import React, {useEffect, useRef, useState} from "react";
 import {EventDocumentHead} from "../../common/EventDocumentHead";
 import {eventCoverImage, eventHomepageUrl, imageUrl, organizerHomepageUrl} from "../../../utilites/urlHelper.ts";
-import {Event, EventOccurrence, EventOccurrenceStatus, EventType, LocationType, OrganizerStatus} from "../../../types.ts";
+import {Event, EventOccurrence, EventType, LocationType, OrganizerStatus} from "../../../types.ts";
 import {EventNotAvailable} from "./EventNotAvailable";
 import {
     IconArrowUpRight,
@@ -392,29 +392,15 @@ const EventHomepage = ({...loaderData}: EventHomepageProps) => {
                                         </div>
 
                                         {/* Event Ended */}
-                                        {event.type === EventType.RECURRING ? (
-                                            (event.occurrences || []).filter(o => o.status === EventOccurrenceStatus.ACTIVE && !o.is_past).length === 0 &&
-                                            (event.occurrences || []).length > 0 && (
-                                                <div className={classes.metaItem}>
-                                                    <div className={classes.metaIconBox}>
-                                                        <IconCalendarOff/>
-                                                    </div>
-                                                    <div className={classes.metaContent}>
-                                                        <div className={classes.metaPrimary}>{t`No upcoming dates`}</div>
-                                                    </div>
+                                        {event.type !== EventType.RECURRING && event.end_date && isDateInPast(event.end_date) && (
+                                            <div className={classes.metaItem}>
+                                                <div className={classes.metaIconBox}>
+                                                    <IconCalendarOff/>
                                                 </div>
-                                            )
-                                        ) : (
-                                            event.end_date && isDateInPast(event.end_date) && (
-                                                <div className={classes.metaItem}>
-                                                    <div className={classes.metaIconBox}>
-                                                        <IconCalendarOff/>
-                                                    </div>
-                                                    <div className={classes.metaContent}>
-                                                        <div className={classes.metaPrimary}>{t`This event has ended`}</div>
-                                                    </div>
+                                                <div className={classes.metaContent}>
+                                                    <div className={classes.metaPrimary}>{t`This event has ended`}</div>
                                                 </div>
-                                            )
+                                            </div>
                                         )}
 
                                         {/* Online Event */}