change occupation to useQuery

frontend/src/components/RoomOccupation.vue

@@ -3,13 +3,16 @@ import FullCalendar from "@fullcalendar/vue3";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import timeGridPlugin from "@fullcalendar/timegrid";
-import { computed, ComputedRef, inject, ref, Ref, watch } from "vue";
+import { computed, ComputedRef, inject, ref, Ref } from "vue";
 import { CalendarOptions, DatesSetArg, EventInput } from "@fullcalendar/core";
 import { fetchEventsByRoomAndDuration } from "../api/fetchRoom.ts";
 import { useI18n } from "vue-i18n";
 import allLocales from "@fullcalendar/core/locales-all";
 import router from "@/router";
 import { formatYearMonthDay } from "@/helpers/dates";
+import { useQuery } from "@tanstack/vue-query";
+import { watch } from "vue";
+
 const { t } = useI18n({ useScope: "global" });
 
 const props = defineProps({
@@ -19,13 +22,6 @@ const props = defineProps({
   },
 });
 
-type CalenderEvent = {
-  id: number;
-  start: string;
-  end: string;
-  showFree: boolean;
-};
-
 const date: Ref<Date> = ref(new Date());
 
 // Set the selected date from the URL
@@ -48,44 +44,33 @@ setDateFromQuery();
 
 const currentDateFrom: Ref<string> = ref("");
 const currentDateTo: Ref<string> = ref("");
-const occupations: Ref<CalenderEvent[]> = ref([]);
 
 const mobilePage = inject("mobilePage") as Ref<boolean>;
 
 const selectedRoom = computed(() => props.room);
 
-watch(selectedRoom, () => {
+const { data: occupations } = useQuery({
-  getOccupation();
+  queryKey: ["roomOccupation", selectedRoom, currentDateFrom, currentDateTo],
+  queryFn: () =>
+    fetchEventsByRoomAndDuration(
+      selectedRoom.value,
+      currentDateFrom.value,
+      currentDateTo.value,
+    ),
+  select: (data) =>
+    data.map((event, index) => ({
+      id: index,
+      start: event.start.replace(/\s\+\d{4}\s\w+$/, "").replace(" ", "T"),
+      end: event.end.replace(/\s\+\d{4}\s\w+$/, "").replace(" ", "T"),
+      showFree: event.free,
+    })),
+  enabled: () => selectedRoom.value !== "" && currentDateFrom.value !== "",
+  staleTime: 5000000, // 500 seconds
 });
 
-const fullCalendar = ref<InstanceType<typeof FullCalendar>>();
+watch(occupations, () => fullCalendar.value?.getApi().refetchEvents());
 
-async function getOccupation() {
+const fullCalendar = ref<InstanceType<typeof FullCalendar>>();
-  if (selectedRoom.value === "") {
-    return;
-  }
-  fetchEventsByRoomAndDuration(
-    selectedRoom.value,
-    currentDateFrom.value,
-    currentDateTo.value,
-  )
-    .then((events) => {
-      occupations.value = events?.map((event, index) => {
-        return {
-          id: index,
-          start: event.start.replace(/\s\+\d{4}\s\w+$/, "").replace(" ", "T"),
-          end: event.end.replace(/\s\+\d{4}\s\w+$/, "").replace(" ", "T"),
-          showFree: event.free,
-        };
-      });
-    })
-    .finally(() => {
-      fullCalendar.value?.getApi().refetchEvents();
-    })
-    .catch((error) => {
-      console.error(error);
-    });
-}
 
 const calendarOptions: ComputedRef<CalendarOptions> = computed(() => ({
   locales: allLocales,
@@ -157,12 +142,12 @@ const calendarOptions: ComputedRef<CalendarOptions> = computed(() => ({
         date: formatYearMonthDay(endDate),
       },
     });
-    getOccupation();
   },
   events: function (
     _info: unknown,
     successCallback: (events: EventInput[]) => void,
   ) {
+    if (!occupations.value) return;
     successCallback(
       occupations.value.map((event) => {
         return {