added own caching for ical feed

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,7 +71,10 @@ const toggle = (info: EventClickArg) => {
   }
 };
 
-const selectedToken = computed(() => props.token);
+
+const selectedToken = computed(() => {
+  return props.token;
+});
 
 const mobilePage = inject("mobilePage") as Ref<boolean>;
 const date: Ref<Date> = ref(new Date());
@@ -82,9 +85,25 @@ const { data: calendar } = useQuery({
   select: (data) => {
     return data;
   },
+  staleTime: 12 * 60 * 60 * 1000, // 12 hours
+  refetchOnWindowFocus: "always",
+  refetchOnReconnect: "always",
   networkMode: "offlineFirst",
-  enabled: () => tokenStore().token !== "",
+  enabled: () => tokenStore().token !== ""
-  staleTime: 5000000, // 500 seconds
+});
+
+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(() => {

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": {

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": {

frontend/src/i18n/translations/ja.json

@@ -94,7 +94,8 @@
       "success": "成功",
       "error": "エラー",
       "successDetail": "カレンダーが正常に削除されました",
-      "errorDetail": "カレンダーを削除できませんでした"
+      "errorDetail": "カレンダーを削除できませんでした",
+      "successDetailLoad": "カレンダーが正常に読み込まれました"
     }
   },
   "additionalModules": {

frontend/src/view/UserCalendar.vue

@@ -22,6 +22,8 @@ if (tokenFromUrl) {
   loadCalendar();
 }
 
+const calendarViewerRef = ref<InstanceType<typeof CalendarViewer>>();
+
 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);
   }
 });
 </script>
-
 <template>
   <DynamicPage
     :hide-content="false"
@@ -64,10 +74,10 @@ onMounted(() => {
         :label="$t('userCalender.searchButton')"
         icon="pi pi-refresh"
         @click="loadCalendar()"
-      />
+      ></Button>
     </template>
     <template #content>
-      <CalendarViewer :token="tokenStore().token" />
+      <CalendarViewer :token="tokenStore().token" ref="calendarViewerRef" />
     </template>
   </DynamicPage>
 </template>

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",