Fix: Handle incorrect event slugs (#835)

Author: daveearley

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

@@ -23,4 +23,4 @@ export const PublicEvent = () => {
     );
 };
 
-export default PublicEvent;
+export default PublicEvent;

frontend/src/routeLoaders/publicEventRouteLoader.ts

@@ -1,4 +1,4 @@
-import {LoaderFunctionArgs} from "react-router";
+import {LoaderFunctionArgs, redirect} from "react-router";
 import {promoCodeClientPublic} from "../api/promo-code.client.ts";
 import {getEventPublicQuery} from "../queries/useGetEventPublic.ts";
 import {getQueryClient} from "../utilites/ssrQueryClient.ts";
@@ -21,10 +21,23 @@ export const publicEventRouteLoader = async ({params, request}: LoaderFunctionAr
             promoCode,
             promoCodeValid ?? false,
         );
+
         const event = await getQueryClient().fetchQuery(eventQuery);
 
+        if (event && event.slug && params.eventSlug !== event.slug) {
+            const searchString = queryParams.toString();
+            throw redirect(
+                `/event/${event.id}/${event.slug}${searchString ? `?${searchString}` : ''}`
+            );
+        }
+
         return {event, promoCodeValid, promoCode};
     } catch (error: any) {
+        // Re-throw redirect responses so React Router can handle them
+        if (error instanceof Response) {
+            throw error;
+        }
+
         if (error?.response?.status === 404) {
             return {event: null, promoCodeValid: undefined, promoCode: null};
         }

frontend/src/routeLoaders/publicOrganizerRouteLoader.ts

@@ -1,12 +1,13 @@
-import {LoaderFunctionArgs} from "react-router";
+import {LoaderFunctionArgs, redirect} from "react-router";
 import {getQueryClient} from "../utilites/ssrQueryClient.ts";
 import {getOrganizerPublicQuery} from "../queries/useGetOrganizerPublic.ts";
 import {getOrganizerPublicEventsQuery} from "../queries/useGetOrganizerEventsPublic.ts";
 import {EventStatus, QueryFilterOperator} from "../types.ts";
 
 export const publicOrganizerRouteLoader = async ({params, request}: LoaderFunctionArgs) => {
-    const {organizerId} = params;
+    const {organizerId, organizerSlug} = params;
     const url = new URL(request.url);
+    const queryParams = new URLSearchParams(url.search);
     const isPastEvents = url.pathname.endsWith('/past-events');
     const pageNumber = url.searchParams.get('page') ? parseInt(url.searchParams.get('page')!) : 1;
 
@@ -17,6 +18,14 @@ export const publicOrganizerRouteLoader = async ({params, request}: LoaderFuncti
     try {
         const organizer = await getQueryClient().fetchQuery(getOrganizerPublicQuery(organizerId));
 
+        if (organizer && organizer.slug && organizerSlug !== organizer.slug) {
+            const searchString = queryParams.toString();
+            const pathSuffix = isPastEvents ? '/past-events' : '';
+            throw redirect(
+                `/events/${organizer.id}/${organizer.slug}${pathSuffix}${searchString ? `?${searchString}` : ''}`
+            );
+        }
+
         let filter = {};
         if (!isPastEvents) {
             filter = {
@@ -50,6 +59,11 @@ export const publicOrganizerRouteLoader = async ({params, request}: LoaderFuncti
             isPastEvents
         };
     } catch (error: any) {
+        // Re-throw redirect responses so React Router can handle them
+        if (error instanceof Response) {
+            throw error;
+        }
+
         if (error?.response?.status === 404) {
             return {organizer: null, eventsData: null, isPastEvents};
         }