Add refetchThemes function to event theme context and usage
Some checks failed
Build and Push Docker Images / changes (push) Successful in 5s
Build and Push Docker Images / build-backend (push) Has been skipped
Build and Push Docker Images / build-frontend (push) Failing after 50s

Introduce a new `refetchThemes` function in the event theme context to allow for refreshing event theme data. Update `EventThemeForm` to call `refetchThemes` after updating a theme, ensuring the data stays synchronized. This enhances the consistency of the UI after changes to event themes.
This commit is contained in:
2025-03-14 04:43:29 +01:00
parent 0fa298ef4b
commit 9d13760b5f
2 changed files with 21 additions and 6 deletions

View File

@@ -36,7 +36,7 @@ type ThemeFormProps = {
export function EventThemeForm({ theme, mode }: ThemeFormProps) { export function EventThemeForm({ theme, mode }: ThemeFormProps) {
const router = useRouter(); const router = useRouter();
const { createTheme, updateTheme } = useEventThemes(); const { createTheme, updateTheme, refetchThemes } = useEventThemes();
// Form state // Form state
const [formState, setFormState] = useState< const [formState, setFormState] = useState<
@@ -202,6 +202,7 @@ export function EventThemeForm({ theme, mode }: ThemeFormProps) {
router.push("/dashboard/event-themes"); router.push("/dashboard/event-themes");
} else if (mode === "edit" && theme) { } else if (mode === "edit" && theme) {
await updateTheme(theme.id, formState as EventThemeUpdate); await updateTheme(theme.id, formState as EventThemeUpdate);
await refetchThemes();
router.push("/dashboard/event-themes"); router.push("/dashboard/event-themes");
} }
} catch (err) { } catch (err) {

View File

@@ -7,7 +7,12 @@ import React, {
useContext, useContext,
useState, useState,
} from "react"; } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import {
RefetchOptions,
useMutation,
useQuery,
useQueryClient,
} from "@tanstack/react-query";
import { import {
getEventThemeOptions, getEventThemeOptions,
listEventThemesOptions, listEventThemesOptions,
@@ -26,6 +31,9 @@ interface EventThemesContextState {
isLoadingThemes: boolean; isLoadingThemes: boolean;
isLoadingTheme: boolean; isLoadingTheme: boolean;
refetchThemes: (
options?: RefetchOptions | undefined,
) => Promise<any | undefined>;
createTheme: ( createTheme: (
data: EventThemeCreate, data: EventThemeCreate,
) => Promise<EventThemeResponse | undefined>; ) => Promise<EventThemeResponse | undefined>;
@@ -48,6 +56,10 @@ const defaultEventThemesState: EventThemesContextState = {
isLoadingThemes: false, isLoadingThemes: false,
isLoadingTheme: false, isLoadingTheme: false,
refetchThemes: async () => {
throw new Error("EventThemesProvider not initialized");
},
createTheme: async () => { createTheme: async () => {
throw new Error("EventThemesProvider not initialized"); throw new Error("EventThemesProvider not initialized");
}, },
@@ -95,6 +107,7 @@ export const EventThemesProvider: React.FC<EventThemesProviderProps> = ({
data: themes, data: themes,
isLoading: isLoadingThemes, isLoading: isLoadingThemes,
error, error,
refetch: refetchThemes,
} = useQuery({ } = useQuery({
...listEventThemesOptions(), ...listEventThemesOptions(),
refetchOnWindowFocus: "always", refetchOnWindowFocus: "always",
@@ -124,10 +137,11 @@ export const EventThemesProvider: React.FC<EventThemesProviderProps> = ({
}); });
const updateMutation = useMutation({ const updateMutation = useMutation({
mutationFn: ({ id, data }: { id: string; data: EventThemeUpdate }) => mutationFn: ({ id, data }: { id: string; data: EventThemeUpdate }) => {
updateEventTheme({ path: { theme_id: id }, body: data }).then( return updateEventTheme({ path: { theme_id: id }, body: data }).then(
(result) => result.data, (result) => result.data,
), );
},
onSuccess: () => onSuccess: () =>
queryClient.invalidateQueries({ queryClient.invalidateQueries({
@@ -165,7 +179,7 @@ export const EventThemesProvider: React.FC<EventThemesProviderProps> = ({
themes, themes,
isLoadingThemes, isLoadingThemes,
isLoadingTheme, isLoadingTheme,
refetchThemes,
createTheme, createTheme,
updateTheme, updateTheme,
deleteTheme, deleteTheme,