Add support for fetching events by slug in context
Introduced `fetchEventBySlug` method and `event` state to the events context, enabling retrieval of event data via slugs. Updated context state to handle related loading and error states (`isLoadingEvent` and `eventError`), and integrated query logic for slug-based event fetching.
This commit is contained in:
@@ -28,16 +28,19 @@ import {
|
|||||||
// Events context state interface
|
// Events context state interface
|
||||||
interface EventsContextState {
|
interface EventsContextState {
|
||||||
// Query access methods
|
// Query access methods
|
||||||
|
event: EventResponse | undefined;
|
||||||
userEvents: PaginatedResponseEventResponse | undefined;
|
userEvents: PaginatedResponseEventResponse | undefined;
|
||||||
upcomingEvents: PaginatedResponseEventResponse | undefined;
|
upcomingEvents: PaginatedResponseEventResponse | undefined;
|
||||||
publicEvents: PaginatedResponseEventResponse | undefined;
|
publicEvents: PaginatedResponseEventResponse | undefined;
|
||||||
isLoadingUserEvents: boolean;
|
isLoadingUserEvents: boolean;
|
||||||
isLoadingUpcomingEvents: boolean;
|
isLoadingUpcomingEvents: boolean;
|
||||||
isLoadingPublicEvents: boolean;
|
isLoadingPublicEvents: boolean;
|
||||||
|
isLoadingEvent: boolean;
|
||||||
|
|
||||||
// Single event methods
|
// Single event methods
|
||||||
getEvent: (id: string) => Promise<EventResponse | undefined>;
|
getEvent: (id: string) => Promise<EventResponse | undefined>;
|
||||||
getEventBySlug: (slug: string) => Promise<EventResponse | undefined>;
|
getEventBySlug: (slug: string) => Promise<EventResponse | undefined>;
|
||||||
|
fetchEventBySlug: (slug: string) => void;
|
||||||
|
|
||||||
// Mutation methods
|
// Mutation methods
|
||||||
createEvent: (event: EventCreate) => Promise<EventResponse>;
|
createEvent: (event: EventCreate) => Promise<EventResponse>;
|
||||||
@@ -55,19 +58,23 @@ interface EventsContextState {
|
|||||||
isUpdating: boolean;
|
isUpdating: boolean;
|
||||||
isDeleting: boolean;
|
isDeleting: boolean;
|
||||||
error: Error | null;
|
error: Error | null;
|
||||||
|
eventError: Error | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Default context state
|
// Default context state
|
||||||
const defaultEventsState: EventsContextState = {
|
const defaultEventsState: EventsContextState = {
|
||||||
|
event: undefined,
|
||||||
userEvents: undefined,
|
userEvents: undefined,
|
||||||
upcomingEvents: undefined,
|
upcomingEvents: undefined,
|
||||||
publicEvents: undefined,
|
publicEvents: undefined,
|
||||||
isLoadingUserEvents: false,
|
isLoadingUserEvents: false,
|
||||||
isLoadingUpcomingEvents: false,
|
isLoadingUpcomingEvents: false,
|
||||||
isLoadingPublicEvents: false,
|
isLoadingPublicEvents: false,
|
||||||
|
isLoadingEvent: false,
|
||||||
|
|
||||||
getEvent: async () => undefined,
|
getEvent: async () => undefined,
|
||||||
getEventBySlug: async () => undefined,
|
getEventBySlug: async () => undefined,
|
||||||
|
fetchEventBySlug: () => {},
|
||||||
|
|
||||||
createEvent: async () => {
|
createEvent: async () => {
|
||||||
throw new Error("EventsProvider not initialized");
|
throw new Error("EventsProvider not initialized");
|
||||||
@@ -88,6 +95,7 @@ const defaultEventsState: EventsContextState = {
|
|||||||
isUpdating: false,
|
isUpdating: false,
|
||||||
isDeleting: false,
|
isDeleting: false,
|
||||||
error: null,
|
error: null,
|
||||||
|
eventError: null,
|
||||||
};
|
};
|
||||||
|
|
||||||
// Create context
|
// Create context
|
||||||
@@ -112,6 +120,20 @@ export const EventsProvider: React.FC<EventsProviderProps> = ({ children }) => {
|
|||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
const [pageSize, setPageSize] = useState(10);
|
const [pageSize, setPageSize] = useState(10);
|
||||||
|
const [currentSlug, setCurrentSlug] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const {
|
||||||
|
data: event,
|
||||||
|
isLoading: isLoadingEvent,
|
||||||
|
error: eventError,
|
||||||
|
} = useQuery({
|
||||||
|
...getEventBySlugOptions({ path: { slug: currentSlug || "" } }),
|
||||||
|
enabled: !!currentSlug,
|
||||||
|
});
|
||||||
|
|
||||||
|
const fetchEventBySlug = useCallback((slug: string) => {
|
||||||
|
setCurrentSlug(slug);
|
||||||
|
}, []);
|
||||||
|
|
||||||
// Query options with pagination
|
// Query options with pagination
|
||||||
const paginationParams = {
|
const paginationParams = {
|
||||||
@@ -229,15 +251,18 @@ export const EventsProvider: React.FC<EventsProviderProps> = ({ children }) => {
|
|||||||
|
|
||||||
// Context value
|
// Context value
|
||||||
const value: EventsContextState = {
|
const value: EventsContextState = {
|
||||||
|
event,
|
||||||
userEvents,
|
userEvents,
|
||||||
upcomingEvents,
|
upcomingEvents,
|
||||||
publicEvents,
|
publicEvents,
|
||||||
isLoadingUserEvents,
|
isLoadingUserEvents,
|
||||||
isLoadingUpcomingEvents,
|
isLoadingUpcomingEvents,
|
||||||
isLoadingPublicEvents,
|
isLoadingPublicEvents,
|
||||||
|
isLoadingEvent,
|
||||||
|
|
||||||
getEvent,
|
getEvent,
|
||||||
getEventBySlug,
|
getEventBySlug,
|
||||||
|
fetchEventBySlug,
|
||||||
|
|
||||||
createEvent,
|
createEvent,
|
||||||
updateEvent,
|
updateEvent,
|
||||||
@@ -252,6 +277,7 @@ export const EventsProvider: React.FC<EventsProviderProps> = ({ children }) => {
|
|||||||
isUpdating: updateEventMutationHook.isPending,
|
isUpdating: updateEventMutationHook.isPending,
|
||||||
isDeleting: deleteEventMutationHook.isPending,
|
isDeleting: deleteEventMutationHook.isPending,
|
||||||
error,
|
error,
|
||||||
|
eventError,
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
Reference in New Issue
Block a user