Init fetch for stores (#942)

* ➕ Add init fetch for appointment store

* ➕ Add init fetch for calendar store

* ➕ Add init fetch for external connections store

* ➕ Add init fetch for schedule connections store

* ➕ Add init fetch for ftue store

* ➕ Add booking modal store tests

* ➕ Add booking view store tests

* ➕ Add external connection store tests

* ➕ Add ftue store tests

* ➕ Add schedules store tests

* ➕ Add user activity store tests

* 🔨 Fix code formatting issues

* 🔨 Streamline user store init

* 🔨 Streamline schedule store init

* 🔨 Streamline ftue store init

* 🔨 Streamline external connections store init

* 🔨 Streamline calendar store init

* 🔨 Streamline appointment store init

Author: devmount

frontend/src/App.vue

@@ -22,9 +22,9 @@ import NotAuthenticatedView from '@/views/errors/NotAuthenticatedView.vue';
 // stores
 import { useSiteNotificationStore } from '@/stores/alert-store';
 import { useUserStore } from '@/stores/user-store';
-import { useCalendarStore } from '@/stores/calendar-store';
-import { useAppointmentStore } from '@/stores/appointment-store';
-import { useScheduleStore } from '@/stores/schedule-store';
+import { createCalendarStore } from '@/stores/calendar-store';
+import { createAppointmentStore } from '@/stores/appointment-store';
+import { createScheduleStore } from '@/stores/schedule-store';
 
 // component constants
 const user = useUserStore();
@@ -98,7 +98,7 @@ const call = createFetch({
   },
 });
 
-// Initialize API calls for user store
+// Now that we created the call function, we can initialize API calls for the user store
 user.init(call);
 
 provide(callKey, call);
@@ -114,9 +114,9 @@ const navItems = [
 ];
 
 // db tables
-const calendarStore = useCalendarStore();
-const appointmentStore = useAppointmentStore();
-const scheduleStore = useScheduleStore();
+const calendarStore = createCalendarStore(call);
+const appointmentStore = createAppointmentStore(call);
+const scheduleStore = createScheduleStore(call);
 
 // true if route can be accessed without authentication
 const routeIsPublic = computed(
@@ -134,9 +134,9 @@ const getDbData = async () => {
   if (user?.authenticated) {
     await Promise.all([
       user.profile(),
-      calendarStore.fetch(call),
-      appointmentStore.fetch(call),
-      scheduleStore.fetch(call),
+      calendarStore.fetch(),
+      appointmentStore.fetch(),
+      scheduleStore.fetch(),
     ]);
   }
 };

frontend/src/components/FTUE/CalendarProvider.vue

@@ -3,26 +3,23 @@ import {
   inject, ref,
 } from 'vue';
 import { callKey } from '@/keys';
-import { useFTUEStore } from '@/stores/ftue-store';
+import { createFTUEStore } from '@/stores/ftue-store';
 import { storeToRefs } from 'pinia';
 import { Alert } from '@/models';
 import GoogleOauthProvider from '@/components/FTUE/GoogleOauthProvider.vue';
 import CalDavProvider from '@/components/FTUE/CalDavProvider.vue';
 
-const ftueStore = useFTUEStore();
-const {
-  errorMessage,
-} = storeToRefs(ftueStore);
-const { previousStep, nextStep } = ftueStore;
 const call = inject(callKey);
+const ftueStore = createFTUEStore(call);
+const { errorMessage } = storeToRefs(ftueStore);
 const provider = ref('google');
 
 const onNext = async () => {
-  await nextStep(call);
+  await ftueStore.nextStep();
 };
 
 const onPrevious = () => {
-  previousStep();
+  ftueStore.previousStep();
 };
 
 const onSwitch = () => {

frontend/src/components/FTUE/ConnectCalendars.vue

@@ -7,8 +7,8 @@ import { storeToRefs } from 'pinia';
 import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
 import SecondaryButton from '@/tbpro/elements/SecondaryButton.vue';
 import SyncCard from '@/tbpro/elements/SyncCard.vue';
-import { useFTUEStore } from '@/stores/ftue-store';
-import { useCalendarStore } from '@/stores/calendar-store';
+import { createFTUEStore } from '@/stores/ftue-store';
+import { createCalendarStore } from '@/stores/calendar-store';
 import { callKey } from '@/keys';
 import { CalendarItem } from '@/models';
 
@@ -18,14 +18,12 @@ const call = inject(callKey);
 
 const isLoading = ref(false);
 
-const ftueStore = useFTUEStore();
+const ftueStore = createFTUEStore(call);
 const {
   hasNextStep, hasPreviousStep, infoMessage, warningMessage,
 } = storeToRefs(ftueStore);
 
-const { previousStep, nextStep } = ftueStore;
-
-const calendarStore = useCalendarStore();
+const calendarStore = createCalendarStore(call);
 const calendars = ref<CalendarItem[]>([]);
 const selectedCount = computed(() => calendars.value.filter((item) => item.checked).length);
 const continueTitle = computed(() => (selectedCount.value ? t('label.continue') : t('ftue.oneCalendarRequired')));
@@ -49,7 +47,7 @@ onMounted(async () => {
     details: null,
   };
 
-  await calendarStore.fetch(call, true);
+  await calendarStore.fetch(true);
   calendars.value = calendarStore.calendars.map((calendar) => ({
     key: calendar.id,
     label: calendar.title,
@@ -64,10 +62,10 @@ const onSubmit = async () => {
   // FIXME: This is just lazy, we should be checking for checkbox dirty state but no one really should have a calendar connected here!
   const calendarKeysConnect = calendars.value.filter((calendar) => calendar.checked).map((calendar) => calendar.key);
   const calendarKeysDisconnect = calendars.value.filter((calendar) => !calendar.checked).map((calendar) => calendar.key);
-  await Promise.all(calendarKeysDisconnect.map((id) => calendarStore.disconnectCalendar(call, id)));
-  await Promise.all(calendarKeysConnect.map((id) => calendarStore.connectCalendar(call, id)));
+  await Promise.all(calendarKeysDisconnect.map((id) => calendarStore.disconnectCalendar(id)));
+  await Promise.all(calendarKeysConnect.map((id) => calendarStore.connectCalendar(id)));
 
-  await nextStep(call);
+  await ftueStore.nextStep();
 };
 
 </script>
@@ -90,7 +88,7 @@ const onSubmit = async () => {
       :title="t('label.back')"
       v-if="hasPreviousStep"
       :disabled="isLoading"
-      @click="previousStep()"
+      @click="ftueStore.previousStep()"
     >
       {{ t('label.back') }}
     </secondary-button>

frontend/src/components/FTUE/ConnectVideo.vue

@@ -5,37 +5,36 @@ import { storeToRefs } from 'pinia';
 import SecondaryButton from '@/tbpro/elements/SecondaryButton.vue';
 import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
 import TextInput from '@/tbpro/elements/TextInput.vue';
-import { useFTUEStore } from '@/stores/ftue-store';
-import { useExternalConnectionsStore } from '@/stores/external-connections-store';
+import { createFTUEStore } from '@/stores/ftue-store';
+import { createExternalConnectionsStore } from '@/stores/external-connections-store';
 import { callKey } from '@/keys';
 import {
   AuthUrl, AuthUrlResponse, BooleanResponse, Error, Exception, ExceptionDetail,
 } from '@/models';
-import { useScheduleStore } from '@/stores/schedule-store';
+import { createScheduleStore } from '@/stores/schedule-store';
 
 const { t } = useI18n();
 
 const call = inject(callKey);
 const isLoading = ref(false);
 
-const ftueStore = useFTUEStore();
-const scheduleStore = useScheduleStore();
+const ftueStore = createFTUEStore(call);
+const scheduleStore = createScheduleStore(call);
+const externalConnectionStore = createExternalConnectionsStore(call);
 
 const {
   hasNextStep, hasPreviousStep, errorMessage,
 } = storeToRefs(ftueStore);
-const { previousStep, nextStep } = ftueStore;
 const { schedules } = storeToRefs(scheduleStore);
 
-const externalConnectionStore = useExternalConnectionsStore();
 const customMeetingLink = ref('');
 const customMeetingLinkRef = ref<typeof TextInput>();
 
 const initFlowKey = 'tba/startedMeetingConnect';
 
 onMounted(async () => {
   isLoading.value = true;
-  await externalConnectionStore.fetch(call);
+  await externalConnectionStore.fetch();
   isLoading.value = false;
 
   const isBackFromConnectFlow = localStorage?.getItem(initFlowKey);
@@ -52,14 +51,14 @@ onMounted(async () => {
       return;
     }
 
-    await nextStep(call);
+    await ftueStore.nextStep();
   }
 });
 
 const onSubmit = async () => {
   isLoading.value = true;
 
-  const data = await scheduleStore.updateSchedule(call, schedules.value[0].id, {
+  const data = await scheduleStore.updateSchedule(schedules.value[0].id, {
     ...schedules.value[0],
     location_url: customMeetingLink.value,
   });
@@ -70,18 +69,18 @@ const onSubmit = async () => {
     return;
   }
 
-  await nextStep(call);
+  await ftueStore.nextStep();
 };
 
 const onSkip = async () => {
   isLoading.value = true;
-  await nextStep(call);
+  await ftueStore.nextStep();
 };
 
 const connectZoom = async () => {
   // If they have zoom attached, just skip for now.
   if (externalConnectionStore.zoom.length > 0) {
-    await nextStep(call);
+    await ftueStore.nextStep();
     return;
   }
 
@@ -129,7 +128,7 @@ const connectZoom = async () => {
       :title="t('label.back')"
       v-if="hasPreviousStep"
       :disabled="isLoading"
-      @click="previousStep()"
+      @click="ftueStore.previousStep()"
     >{{ t('label.back') }}
     </secondary-button>
     <primary-button

frontend/src/components/FTUE/GoogleOauthProvider.vue

@@ -5,9 +5,9 @@ import { storeToRefs } from 'pinia';
 import { useRoute, useRouter } from 'vue-router';
 import SecondaryButton from '@/tbpro/elements/SecondaryButton.vue';
 import { useFTUEStore } from '@/stores/ftue-store';
-import { useCalendarStore } from '@/stores/calendar-store';
+import { createCalendarStore } from '@/stores/calendar-store';
 import { useUserStore } from '@/stores/user-store';
-import { useExternalConnectionsStore } from '@/stores/external-connections-store';
+import { createExternalConnectionsStore } from '@/stores/external-connections-store';
 import { callKey } from '@/keys';
 import { ExternalConnectionProviders } from '@/definitions';
 import {
@@ -32,17 +32,15 @@ const emits = defineEmits(['next', 'previous', 'switch']);
 const isLoading = ref(false);
 
 const ftueStore = useFTUEStore();
-const {
-  hasNextStep, errorMessage,
-} = storeToRefs(ftueStore);
+const { hasNextStep, errorMessage } = storeToRefs(ftueStore);
 
-const calendarStore = useCalendarStore();
-const externalConnectionStore = useExternalConnectionsStore();
+const calendarStore = createCalendarStore(call);
+const externalConnectionStore = createExternalConnectionsStore(call);
 const { calendars } = storeToRefs(calendarStore);
 const initFlowKey = 'tba/startedCalConnect';
 
 onMounted(async () => {
-  await calendarStore.fetch(call, true);
+  await calendarStore.fetch(true);
   const hasFlowKey = localStorage?.getItem(initFlowKey);
   const noCalendarsError = hasFlowKey && calendars.value.length === 0;
 
@@ -57,7 +55,7 @@ onMounted(async () => {
 
       // Also remove the google calendar
       if (externalConnectionStore.google.length > 0) {
-        await externalConnectionStore.disconnect(call, ExternalConnectionProviders.Google);
+        await externalConnectionStore.disconnect(ExternalConnectionProviders.Google);
       }
     } else {
       errorMessage.value = {
@@ -92,7 +90,7 @@ const onSubmit = async () => {
 
   // Create key so we can move to the next page after we come back
   localStorage?.setItem(initFlowKey, 'true');
-  await calendarStore.connectGoogleCalendar(call, user.data.email);
+  await calendarStore.connectGoogleCalendar(user.data.email);
 };
 
 </script>

frontend/src/components/FTUE/SetupProfile.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { inject, ref } from 'vue';
 import { storeToRefs } from 'pinia';
-import { useFTUEStore } from '@/stores/ftue-store';
-import { useUserStore } from '@/stores/user-store';
+import { createFTUEStore } from '@/stores/ftue-store';
+import { createUserStore } from '@/stores/user-store';
 import { useI18n } from 'vue-i18n';
 import { dayjsKey, callKey } from '@/keys';
 import TextInput from '@/tbpro/elements/TextInput.vue';
@@ -13,11 +13,9 @@ const { t } = useI18n();
 const dj = inject(dayjsKey);
 const call = inject(callKey);
 
-const ftueStore = useFTUEStore();
+const ftueStore = createFTUEStore(call);
 const { hasNextStep } = storeToRefs(ftueStore);
-const { nextStep } = ftueStore;
-const user = useUserStore();
-user.init(call);
+const user = createUserStore(call);
 
 // @ts-expect-error ignore type err
 // See https://github.com/microsoft/TypeScript/issues/49231
@@ -62,7 +60,7 @@ const onSubmit = async () => {
     return;
   }
 
-  await nextStep(call);
+  await ftueStore.nextStep();
 };
 
 </script>

frontend/src/components/FTUE/SetupSchedule.vue

@@ -10,10 +10,10 @@ import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
 import SecondaryButton from '@/tbpro/elements/SecondaryButton.vue';
 import BubbleSelect from '@/tbpro/elements/BubbleSelect.vue';
 import { DateFormatStrings, DEFAULT_SLOT_DURATION, SLOT_DURATION_OPTIONS } from '@/definitions';
-import { useFTUEStore } from '@/stores/ftue-store';
+import { createFTUEStore } from '@/stores/ftue-store';
 import { useUserStore } from '@/stores/user-store';
-import { useCalendarStore } from '@/stores/calendar-store';
-import { useScheduleStore } from '@/stores/schedule-store';
+import { createCalendarStore } from '@/stores/calendar-store';
+import { createScheduleStore } from '@/stores/schedule-store';
 import {
   dayjsKey, callKey, isoWeekdaysKey,
 } from '@/keys';
@@ -24,15 +24,14 @@ const dj = inject(dayjsKey);
 const call = inject(callKey);
 const isoWeekdays = inject(isoWeekdaysKey);
 
-const ftueStore = useFTUEStore();
+const ftueStore = createFTUEStore(call);
 const {
   hasNextStep, hasPreviousStep,
 } = storeToRefs(ftueStore);
-const { nextStep, previousStep } = ftueStore;
 const { errorMessage, infoMessage } = storeToRefs(ftueStore);
 const user = useUserStore();
-const calendarStore = useCalendarStore();
-const scheduleStore = useScheduleStore();
+const calendarStore = createCalendarStore(call);
+const scheduleStore = createScheduleStore(call);
 const { connectedCalendars } = storeToRefs(calendarStore);
 const { schedules } = storeToRefs(scheduleStore);
 const { timeToBackendTime, timeToFrontendTime } = scheduleStore;
@@ -95,8 +94,8 @@ const onSubmit = async () => {
   };
 
   const data = schedules.value.length > 0
-    ? await scheduleStore.updateSchedule(call, schedules.value[0].id, scheduleData)
-    : await scheduleStore.createSchedule(call, scheduleData);
+    ? await scheduleStore.updateSchedule(schedules.value[0].id, scheduleData)
+    : await scheduleStore.createSchedule(scheduleData);
 
   if ((data as Error)?.error) {
     errorMessage.value = {
@@ -107,7 +106,7 @@ const onSubmit = async () => {
     return;
   }
 
-  await nextStep(call);
+  await ftueStore.nextStep();
 };
 
 onMounted(async () => {
@@ -118,8 +117,8 @@ onMounted(async () => {
   };
 
   await Promise.all([
-    calendarStore.fetch(call, true),
-    scheduleStore.fetch(call, true),
+    calendarStore.fetch(true),
+    scheduleStore.fetch(true),
   ]);
 
   schedule.value.calendar = connectedCalendars.value[0].id;
@@ -185,7 +184,7 @@ onMounted(async () => {
       :title="t('label.back')"
       v-if="hasPreviousStep"
       :disabled="isLoading"
-      @click="previousStep()"
+      @click="ftueStore.previousStep()"
     >
       {{ t('label.back') }}
     </secondary-button>