Merge pull request #907 from HiEventsDev/develop

Author: daveearley

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

@@ -77,26 +77,6 @@ export const AttendeeTable = ({attendees, openCreateModal}: AttendeeTableProps)
         });
     }
 
-    if (attendees.length === 0) {
-        return <NoResultsSplash
-            heading={t`No Attendees to show`}
-            imageHref={'/blank-slate/attendees.svg'}
-            subHeading={(
-                <>
-                    <p>
-                        {t`Your attendees will appear here once they have registered for your event. You can also manually add attendees.`}
-                    </p>
-                    <Button
-                        size={'xs'}
-                        leftSection={<IconPlus/>}
-                        color={'green'}
-                        onClick={() => openCreateModal()}>{t`Manually add an Attendee`}
-                    </Button>
-                </>
-            )}
-        />
-    }
-
     const handleCancel = (attendee: Attendee) => {
         const message = attendee.status === 'CANCELLED'
             ? t`Are you sure you want to activate this attendee?`
@@ -414,6 +394,26 @@ export const AttendeeTable = ({attendees, openCreateModal}: AttendeeTableProps)
         [emailPopoverId, event, hasCheckInLists]
     );
 
+    if (attendees.length === 0) {
+        return <NoResultsSplash
+            heading={t`No Attendees to show`}
+            imageHref={'/blank-slate/attendees.svg'}
+            subHeading={(
+                <>
+                    <p>
+                        {t`Your attendees will appear here once they have registered for your event. You can also manually add attendees.`}
+                    </p>
+                    <Button
+                        size={'xs'}
+                        leftSection={<IconPlus/>}
+                        color={'green'}
+                        onClick={() => openCreateModal()}>{t`Manually add an Attendee`}
+                    </Button>
+                </>
+            )}
+        />
+    }
+
     return (
         <>
             <TanStackTable

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

@@ -68,18 +68,6 @@ export const OrdersTable = ({orders, event}: OrdersTableProps) => {
         viewModal.open();
     }));
 
-    if (orders.length === 0) {
-        return <NoResultsSplash
-            imageHref={'/blank-slate/orders.svg'}
-            heading={t`No orders to show`}
-            subHeading={(
-                <p>
-                    {t`Your orders will appear here once they start rolling in.`}
-                </p>
-            )}
-        />
-    }
-
     const handleModalClick = (orderId: IdParam, modal: { open: () => void }) => {
         setOrderId(orderId);
         modal.open();
@@ -453,6 +441,18 @@ export const OrdersTable = ({orders, event}: OrdersTableProps) => {
         [event.id, emailPopoverId]
     );
 
+    if (orders.length === 0) {
+        return <NoResultsSplash
+            imageHref={'/blank-slate/orders.svg'}
+            heading={t`No orders to show`}
+            subHeading={(
+                <p>
+                    {t`Your orders will appear here once they start rolling in.`}
+                </p>
+            )}
+        />
+    }
+
     return (
         <>
             <TanStackTable

frontend/src/hooks/useFilterQueryParamSync.ts

@@ -1,15 +1,10 @@
-import { useCallback, useMemo } from 'react';
-import { useSearchParams } from 'react-router';
-import { QueryFilters } from "../types";
+import {useCallback, useEffect, useState} from 'react';
+import {useSearchParams} from 'react-router';
+import {QueryFilters} from "../types";
 
-type FilterCondition = {
-    operator: string;
-    value: string | string[];
-};
-
-const debounce = <T extends (...args: any[]) => void>(func: T, delay: number) => {
+const debounce = (func: Function, delay: number) => {
     let timerId: ReturnType<typeof setTimeout>;
-    return (...args: Parameters<T>) => {
+    return (...args: any[]) => {
         if (timerId) clearTimeout(timerId);
         timerId = setTimeout(() => func(...args), delay);
     };
@@ -20,31 +15,32 @@ export const useFilterQueryParamSync = (): [
     (updates: Partial<QueryFilters>, replace?: boolean) => void
 ] => {
     const [searchParams, setSearchParams] = useSearchParams();
+    const [queryParams, setQueryParams] = useState<Partial<QueryFilters>>({});
 
-    const queryParams = useMemo(() => {
-        const parsedParams: Partial<QueryFilters> & Record<string, any> = {};
+    useEffect(() => {
+        const parsedParams: Partial<QueryFilters> = {};
 
         searchParams.forEach((value, key) => {
             if (key.startsWith('filterFields[')) {
                 const match = key.match(/^filterFields\[(.+)\]\[(.+)\]$/);
                 if (match) {
-                    const [, fieldName, operator] = match;
-
+                    const [_, fieldName, operator] = match;
                     if (!parsedParams.filterFields) {
                         parsedParams.filterFields = {};
                     }
-
-                    (parsedParams.filterFields as Record<string, FilterCondition>)[fieldName] = {
+                    // @ts-ignore
+                    parsedParams.filterFields[fieldName] = {
                         operator,
                         value: value.includes(',') ? value.split(',') : value
                     };
                 }
             } else {
+                // @ts-ignore - Handle non-filterFields params
                 parsedParams[key] = value;
             }
         });
 
-        return parsedParams;
+        setQueryParams(parsedParams);
     }, [searchParams]);
 
     const debouncedSetSearchParams = useCallback(
@@ -56,22 +52,22 @@ export const useFilterQueryParamSync = (): [
 
     const updateSearchParams = useCallback(
         (updates: Partial<QueryFilters>, replace: boolean = false) => {
-            // Create new params based on current URL state
             const newParams = replace ? new URLSearchParams() : new URLSearchParams(searchParams);
 
+            // Clear existing filter fields if replacing
             if (replace) {
-                // Clean up existing filter fields
-                Array.from(newParams.keys()).forEach((key) => {
+                searchParams.forEach((_, key) => {
                     if (key.startsWith('filterFields[')) {
                         newParams.delete(key);
                     }
                 });
             }
 
+            // Update params
             Object.entries(updates).forEach(([key, value]) => {
                 if (key === 'filterFields' && value) {
                     Object.entries(value).forEach(([field, condition]) => {
-                        if (condition && typeof condition === 'object' && 'operator' in condition) {
+                        if (condition) {
                             const paramKey = `filterFields[${field}][${condition.operator}]`;
                             if (Array.isArray(condition.value)) {
                                 newParams.set(paramKey, condition.value.join(','));
@@ -80,7 +76,7 @@ export const useFilterQueryParamSync = (): [
                             }
                         }
                     });
-                } else if (value !== undefined && value !== null) {
+                } else if (value !== undefined) {
                     newParams.set(key, String(value));
                 }
             });