diff --git a/frontend/src/components/CalendarViewer.vue b/frontend/src/components/CalendarViewer.vue index dc2e8f4..b75beef 100644 --- a/frontend/src/components/CalendarViewer.vue +++ b/frontend/src/components/CalendarViewer.vue @@ -32,7 +32,7 @@ import iCalenderPlugin from "@fullcalendar/icalendar"; import router from "@/router"; import { formatYearMonthDay } from "@/helpers/dates.ts"; import { useI18n } from "vue-i18n"; -import { useQuery } from "@tanstack/vue-query"; +import { useQuery, useQueryClient } from "@tanstack/vue-query"; import tokenStore from "@/store/tokenStore.ts"; import { parseICalData } from "@/helpers/ical.ts"; import { fetchICalendarEvents } from "@/api/loadICal.ts"; @@ -71,20 +71,39 @@ const toggle = (info: EventClickArg) => { } }; -const selectedToken = computed(() => props.token); + +const selectedToken = computed(() => { + return props.token; +}); const mobilePage = inject("mobilePage") as Ref; const date: Ref = ref(new Date()); -const { data: calendar } = useQuery({ +const { data: calendar} = useQuery({ queryKey: ["userCalendar", selectedToken], queryFn: () => fetchICalendarEvents(selectedToken.value), select: (data) => { return data; }, + staleTime: 12 * 60 * 60 * 1000, // 12 hours + refetchOnWindowFocus: "always", + refetchOnReconnect: "always", networkMode: "offlineFirst", - enabled: () => tokenStore().token !== "", - staleTime: 5000000, // 500 seconds + enabled: () => tokenStore().token !== "" +}); + +const queryClient = useQueryClient(); + +const invalidateAndRefetchCalendar = () => { + console.debug("invalidateAndRefetchCalendar", selectedToken); + const queryKey = ["userCalendar", selectedToken]; + queryClient.invalidateQueries({queryKey: queryKey}).then(() => { + queryClient.refetchQueries({queryKey: queryKey}); + }); +}; + +defineExpose({ + invalidateAndRefetchCalendar }); const events = computed(() => { diff --git a/frontend/src/i18n/translations/de.json b/frontend/src/i18n/translations/de.json index 806504f..b8953be 100644 --- a/frontend/src/i18n/translations/de.json +++ b/frontend/src/i18n/translations/de.json @@ -94,7 +94,8 @@ "success": "Erfolg", "error": "Fehler", "successDetail": "Kalender erfolgreich gelöscht", - "errorDetail": "Fehler beim Löschen des Kalenders" + "errorDetail": "Fehler beim Löschen des Kalenders", + "successDetailLoad": "Kalender erfolgreich geladen" } }, "additionalModules": { diff --git a/frontend/src/i18n/translations/en.json b/frontend/src/i18n/translations/en.json index 5a22d8c..5f24aa8 100644 --- a/frontend/src/i18n/translations/en.json +++ b/frontend/src/i18n/translations/en.json @@ -94,7 +94,8 @@ "success": "Success", "error": "Error", "successDetail": "calendar successfully deleted", - "errorDetail": "calendar could not be deleted" + "errorDetail": "calendar could not be deleted", + "successDetailLoad": "calendar successfully loaded" } }, "additionalModules": { diff --git a/frontend/src/i18n/translations/ja.json b/frontend/src/i18n/translations/ja.json index ffd1870..75c3b15 100644 --- a/frontend/src/i18n/translations/ja.json +++ b/frontend/src/i18n/translations/ja.json @@ -94,7 +94,8 @@ "success": "成功", "error": "エラー", "successDetail": "カレンダーが正常に削除されました", - "errorDetail": "カレンダーを削除できませんでした" + "errorDetail": "カレンダーを削除できませんでした", + "successDetailLoad": "カレンダーが正常に読み込まれました" } }, "additionalModules": { diff --git a/frontend/src/view/UserCalendar.vue b/frontend/src/view/UserCalendar.vue index 3cfdcdb..9ab0125 100644 --- a/frontend/src/view/UserCalendar.vue +++ b/frontend/src/view/UserCalendar.vue @@ -22,6 +22,8 @@ if (tokenFromUrl) { loadCalendar(); } +const calendarViewerRef = ref>(); + function loadCalendar() { try { token.value = extractToken(token.value); @@ -35,18 +37,26 @@ function loadCalendar() { }); return; } - moduleStore().removeAllModules(); tokenStore().setToken(token.value); + + calendarViewerRef.value?.invalidateAndRefetchCalendar(); + +toast.add({ + severity: "success", + summary: t("editCalendarView.toast.success"), + detail: t("editCalendarView.toast.successDetailLoad"), + life: 3000, +}); } onMounted(() => { if (token.value && token.value !== "") { - loadCalendar(); + //loadCalendar(); + tokenStore().setToken(token.value); } }); - diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index 4beaf0a..c5a5658 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -85,6 +85,17 @@ export default defineConfig({ globPatterns: ["**/*.{js,css,html,ico,png,svg,json,vue,txt,woff2}"], cleanupOutdatedCaches: true, runtimeCaching: [ + { + urlPattern: ({ url }) => url.pathname.startsWith('/api/feed'), + method: 'GET', + handler: 'NetworkFirst', + options: { + cacheName: 'calendar-feed-cache', + expiration: { + maxAgeSeconds: 12 * 60 * 60, // 12 hours + }, + }, + }, { urlPattern: /^https?.*/, handler: "NetworkFirst",