Add refetchThemes function to event theme context and usage
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:
@@ -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) {
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user