From c4d0333a76447d7e78e9749d8b6c2724b4a10452 Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Mon, 11 Dec 2023 13:02:55 -0800
Subject: [PATCH 1/7] Add AppointmentStore and CalendarStore.

- CalendarStore will only pull if the `isInit` value is false.
- CalendarStore cache is busted on user action.
- AppointmentStore will always pull if requested (Due to some impl concerns.)
---
 frontend/src/App.vue                         | 104 +++++++------------
 frontend/src/components/SettingsCalendar.vue |  23 ++--
 frontend/src/stores/alert-store.js           |   4 +-
 frontend/src/stores/appointment-store.js     |  66 ++++++++++++
 frontend/src/stores/calendar-store.js        |  40 +++++++
 frontend/src/stores/user-store.js            |   2 +-
 frontend/src/views/AppointmentsView.vue      |  15 ++-
 frontend/src/views/CalendarView.vue          |  34 +++---
 frontend/src/views/HomeView.vue              |   7 --
 frontend/src/views/ProfileView.vue           |  28 ++---
 frontend/src/views/ScheduleView.vue          |  27 +++--
 frontend/src/views/SettingsView.vue          |   8 +-
 12 files changed, 204 insertions(+), 154 deletions(-)
 create mode 100644 frontend/src/stores/appointment-store.js
 create mode 100644 frontend/src/stores/calendar-store.js

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 26d680097..dd2e7b554 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -10,10 +10,7 @@
     </site-notification>
     <nav-bar :nav-items="navItems" />
     <main :class="{'mx-4 pt-24 lg:mx-8 min-h-full pb-24': !routeIsHome, 'pt-32': routeIsHome}">
-      <router-view
-        :calendars="calendars"
-        :appointments="appointments"
-      />
+      <router-view />
     </main>
     <footer-bar />
   </template>
@@ -32,23 +29,26 @@
 </template>
 
 <script setup>
-import { appointmentState } from "@/definitions";
-import { createFetch } from "@vueuse/core";
-import { ref, inject, provide, onMounted, computed } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import NavBar from "@/components/NavBar";
-import TitleBar from "@/components/TitleBar";
-import FooterBar from "@/components/FooterBar.vue";
-import SiteNotification from "@/elements/SiteNotification";
-import { useSiteNotificationStore } from "@/stores/alert-store";
+import { createFetch } from '@vueuse/core';
+import {
+  inject, provide, onMounted, computed,
+} from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import NavBar from '@/components/NavBar';
+import TitleBar from '@/components/TitleBar';
+import FooterBar from '@/components/FooterBar.vue';
+import SiteNotification from '@/elements/SiteNotification';
+import { useSiteNotificationStore } from '@/stores/alert-store';
 
 // stores
 import { useUserStore } from '@/stores/user-store';
+import { useCalendarStore } from '@/stores/calendar-store';
+import { useAppointmentStore } from '@/stores/appointment-store';
 
 // component constants
 const currentUser = useUserStore(); // data: { username, email, name, level, timezone, id }
-const apiUrl = inject("apiUrl");
-const dj = inject("dayjs");
+const apiUrl = inject('apiUrl');
+const dj = inject('dayjs');
 const route = useRoute();
 const router = useRouter();
 const siteNotificationStore = useSiteNotificationStore();
@@ -68,8 +68,8 @@ const call = createFetch({
     async onFetchError({ data, response, error }) {
       // Catch any google refresh error that may occur
       if (
-        data?.detail?.error === 'google_refresh_error' &&
-        !siteNotificationStore.isSameNotification('google_refresh_error')
+        data?.detail?.error === 'google_refresh_error'
+        && !siteNotificationStore.isSameNotification('google_refresh_error')
       ) {
         // Ensure other async calls don't reach here
         siteNotificationStore.lock(data.detail.error);
@@ -97,26 +97,26 @@ const call = createFetch({
     },
   },
   fetchOptions: {
-    mode: "cors",
-    credentials: "include",
+    mode: 'cors',
+    credentials: 'include',
   },
 });
-provide("call", call);
+provide('call', call);
 provide('isPasswordAuth', import.meta.env?.VITE_AUTH_SCHEME === 'password');
 provide('isFxaAuth', import.meta.env?.VITE_AUTH_SCHEME === 'fxa');
 provide('fxaEditProfileUrl', import.meta.env?.VITE_FXA_EDIT_PROFILE);
 
 // menu items for main navigation
 const navItems = [
-  "calendar",
-  "schedule",
-  "appointments",
-  "settings",
+  'calendar',
+  'schedule',
+  'appointments',
+  'settings',
 ];
 
 // db tables
-const calendars = ref([]);
-const appointments = ref([]);
+const calendarStore = useCalendarStore();
+const appointmentStore = useAppointmentStore();
 
 // true if route can be accessed without authentication
 const routeIsPublic = computed(
@@ -127,63 +127,37 @@ const routeIsHome = computed(
 );
 
 // query db for all calendar data
-const getDbCalendars = async (onlyConnected = true) => {
-  const { data, error } = await call(`me/calendars?only_connected=${onlyConnected}`).get().json();
-  if (!error.value) {
-    if (data.value === null || typeof data.value === "undefined") return;
-    calendars.value = data.value;
+const getDbCalendars = async () => {
+  if (calendarStore.isLoaded) {
+    return;
   }
+  await calendarStore.fetch(call);
 };
 // query db for all appointments data
 const getDbAppointments = async () => {
-  const { data, error } = await call("me/appointments").get().json();
-  if (!error.value) {
-    if (data.value === null || typeof data.value === "undefined") return;
-    appointments.value = data.value;
-  }
+  // We don't have a good way to determine stale slots, so always grab appointments
+  await appointmentStore.fetch(call);
 };
 
 // check appointment status for current state (past|pending|booked)
-const getAppointmentStatus = (a) => {
-  // check past events
-  if (a.slots.filter((s) => dj(s.start).isAfter(dj())).length === 0) {
-    return appointmentState.past;
-  }
-  // check booked events
-  if (a.slots.filter((s) => s.attendee_id != null).length > 0) {
-    return appointmentState.booked;
-  }
-  // else event is still wating to be booked
-  return appointmentState.pending;
-};
+const getAppointmentStatus = (a) => appointmentStore.status(a);
 
 // extend retrieved data
 const extendDbData = () => {
   // build { calendarId => calendarData } object for direct lookup
   const calendarsById = {};
-  calendars.value.forEach((c) => {
+  calendarStore.allCalendars.forEach((c) => {
     calendarsById[c.id] = c;
   });
   // extend appointments data with active state and calendar title and color
-  appointments.value.forEach((a) => {
-    a.calendar_title = calendarsById[a.calendar_id]?.title;
-    a.calendar_color = calendarsById[a.calendar_id]?.color;
-    a.status = getAppointmentStatus(a);
-    a.active = a.status !== appointmentState.past; // TODO
-    // convert start dates from UTC back to users timezone
-    a.slots.forEach((s) => {
-      s.start = dj.utc(s.start).tz(currentUser.data.timezone ?? dj.tz.guess());
-    });
-  });
+  appointmentStore.mergeCalendarInfo(calendarsById);
 };
 
 // retrieve calendars and appointments after checking login and persisting user to db
-const getDbData = async (options = {}) => {
-  const { onlyConnectedCalendars = true } = options;
-
+const getDbData = async () => {
   if (currentUser?.exists()) {
     await Promise.all([
-      getDbCalendars(onlyConnectedCalendars),
+      getDbCalendars(),
       getDbAppointments(),
     ]);
     extendDbData();
@@ -196,6 +170,6 @@ onMounted(async () => {
 });
 
 // provide refresh functions for components
-provide("refresh", getDbData);
-provide("getAppointmentStatus", getAppointmentStatus);
+provide('refresh', getDbData);
+provide('getAppointmentStatus', getAppointmentStatus);
 </script>
diff --git a/frontend/src/components/SettingsCalendar.vue b/frontend/src/components/SettingsCalendar.vue
index f2041e561..88e5b883e 100644
--- a/frontend/src/components/SettingsCalendar.vue
+++ b/frontend/src/components/SettingsCalendar.vue
@@ -8,7 +8,7 @@
     <calendar-management
       :title="t('heading.calendarsUnconnected')"
       :type="calendarManagementType.connect"
-      :calendars="calendars"
+      :calendars="calendarStore.unconnectedCalendars"
       :loading="loading"
       @sync="syncCalendars"
       @modify="connectCalendar"
@@ -18,7 +18,7 @@
     <calendar-management
       :title="t('heading.calendarsConnected')"
       :type="calendarManagementType.edit"
-      :calendars="calendars"
+      :calendars="calendarStore.connectedCalendars"
       :loading="loading"
       @remove="deleteCalendar"
       @modify="editCalendar"
@@ -199,7 +199,9 @@
 <script setup>
 import { calendarManagementType } from '@/definitions';
 import { IconArrowRight } from '@tabler/icons-vue';
-import { ref, reactive, inject, onMounted, computed } from 'vue';
+import {
+  ref, reactive, inject, onMounted, computed,
+} from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import AlertBox from '@/elements/AlertBox';
@@ -208,12 +210,14 @@ import GoogleSignInBtn from '@/assets/img/google/1x/btn_google_signin_light_norm
 import GoogleSignInBtn2x from '@/assets/img/google/2x/btn_google_signin_light_normal_web@2x.png';
 import PrimaryButton from '@/elements/PrimaryButton';
 import SecondaryButton from '@/elements/SecondaryButton';
-import ConfirmationModal from "@/components/ConfirmationModal.vue";
+import ConfirmationModal from '@/components/ConfirmationModal.vue';
+import { useCalendarStore } from '@/stores/calendar-store';
 
 // component constants
 const { t } = useI18n({ useScope: 'global' });
 const call = inject('call');
 const refresh = inject('refresh');
+const calendarStore = useCalendarStore();
 
 const calendarConnectError = ref('');
 
@@ -223,11 +227,6 @@ const deleteCalendarModalTarget = ref(null);
 // Temp until we get a store solution rolling
 const loading = ref(false);
 
-// view properties
-defineProps({
-  calendars: Array, // list of calendars from db
-});
-
 // handle calendar user input to add or edit calendar connections
 const inputModes = {
   hidden: 0,
@@ -264,7 +263,9 @@ const closeModals = async () => {
 };
 
 const refreshData = async () => {
-  await refresh({ onlyConnectedCalendars: false });
+  // Invalidate our calendar store
+  await calendarStore.reset();
+  await refresh();
   loading.value = false;
 };
 
@@ -391,7 +392,5 @@ onMounted(async () => {
     calendarConnectError.value = route.query.error;
     await router.replace(route.path);
   }
-
-  await refreshData();
 });
 </script>
diff --git a/frontend/src/stores/alert-store.js b/frontend/src/stores/alert-store.js
index 074c0eac2..9f0d2d153 100644
--- a/frontend/src/stores/alert-store.js
+++ b/frontend/src/stores/alert-store.js
@@ -13,7 +13,7 @@ const initialSiteNotificationObject = {
 // eslint-disable-next-line import/prefer-default-export
 export const useSiteNotificationStore = defineStore('siteNotification', {
   state: () => ({
-    data: initialSiteNotificationObject,
+    data: structuredClone(initialSiteNotificationObject),
   }),
   getters: {
     isVisible() {
@@ -50,7 +50,7 @@ export const useSiteNotificationStore = defineStore('siteNotification', {
       });
     },
     reset() {
-      this.$patch({ data: initialSiteNotificationObject });
+      this.$patch({ data: structuredClone(initialSiteNotificationObject) });
     },
   },
 });
diff --git a/frontend/src/stores/appointment-store.js b/frontend/src/stores/appointment-store.js
new file mode 100644
index 000000000..d0d04bc19
--- /dev/null
+++ b/frontend/src/stores/appointment-store.js
@@ -0,0 +1,66 @@
+import { defineStore } from 'pinia';
+import { appointmentState } from '@/definitions';
+import { useUserStore } from '@/stores/user-store';
+import dj from 'dayjs';
+
+const initialData = {
+  appointments: [],
+  isInit: false,
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export const useAppointmentStore = defineStore('appointments', {
+  state: () => ({
+    data: structuredClone(initialData),
+  }),
+  getters: {
+    isLoaded() {
+      return this.data.isInit;
+    },
+    appointments() {
+      return this.data.appointments;
+    },
+    pendingAppointments() {
+      return this.data.appointments.filter((a) => a.status === appointmentState.pending);
+    },
+  },
+  actions: {
+    status(appointment) {
+      // check past events
+      if (appointment.slots.filter((s) => dj(s.start).isAfter(dj())).length === 0) {
+        return appointmentState.past;
+      }
+      // check booked events
+      if (appointment.slots.filter((s) => s.attendee_id != null).length > 0) {
+        return appointmentState.booked;
+      }
+      // else event is still wating to be booked
+      return appointmentState.pending;
+    },
+    reset() {
+      this.$patch({ data: structuredClone(initialData) });
+    },
+    async mergeCalendarInfo(calendarsById) {
+      const userStore = useUserStore();
+
+      this.data.appointments.forEach((a) => {
+        a.calendar_title = calendarsById[a.calendar_id]?.title;
+        a.calendar_color = calendarsById[a.calendar_id]?.color;
+        a.status = this.status(a);
+        a.active = a.status !== appointmentState.past; // TODO
+        // convert start dates from UTC back to users timezone
+        a.slots.forEach((s) => {
+          s.start = dj.utc(s.start).tz(userStore.data.timezone ?? dj.tz.guess());
+        });
+      });
+    },
+    async fetch(call) {
+      const { data, error } = await call('me/appointments').get().json();
+      if (!error.value) {
+        if (data.value === null || typeof data.value === 'undefined') return;
+        this.data.appointments = data.value;
+        this.data.isInit = true;
+      }
+    },
+  },
+});
diff --git a/frontend/src/stores/calendar-store.js b/frontend/src/stores/calendar-store.js
new file mode 100644
index 000000000..b622af7da
--- /dev/null
+++ b/frontend/src/stores/calendar-store.js
@@ -0,0 +1,40 @@
+import { defineStore } from 'pinia';
+
+const initialData = {
+  calendars: [],
+  isInit: false,
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export const useCalendarStore = defineStore('calendars', {
+  state: () => ({
+    data: structuredClone(initialData),
+  }),
+  getters: {
+    isLoaded() {
+      return this.data.isInit;
+    },
+    unconnectedCalendars() {
+      return this.data.calendars.filter((cal) => !cal.connected);
+    },
+    connectedCalendars() {
+      return this.data.calendars.filter((cal) => cal.connected);
+    },
+    allCalendars() {
+      return this.data.calendars;
+    },
+  },
+  actions: {
+    reset() {
+      this.$patch({ data: structuredClone(initialData) });
+    },
+    async fetch(call) {
+      const { data, error } = await call('me/calendars?only_connected=false').get().json();
+      if (!error.value) {
+        if (data.value === null || typeof data.value === 'undefined') return;
+        this.data.calendars = data.value;
+        this.data.isInit = true;
+      }
+    },
+  },
+});
diff --git a/frontend/src/stores/user-store.js b/frontend/src/stores/user-store.js
index 542428436..74f63aa62 100644
--- a/frontend/src/stores/user-store.js
+++ b/frontend/src/stores/user-store.js
@@ -20,7 +20,7 @@ export const useUserStore = defineStore('user', {
       return this.data.accessToken !== null;
     },
     reset() {
-      this.$patch({ data: initialUserObject });
+      this.$patch({ data: structuredClone(initialUserObject) });
     },
     async profile(fetch) {
       const { error, data } = await fetch('me').get().json();
diff --git a/frontend/src/views/AppointmentsView.vue b/frontend/src/views/AppointmentsView.vue
index 3f0b84878..2c2824cf0 100644
--- a/frontend/src/views/AppointmentsView.vue
+++ b/frontend/src/views/AppointmentsView.vue
@@ -6,7 +6,7 @@
       <tab-bar :tab-items="views" :active="tabActive" @update="updateTab" class="text-xl" />
       <primary-button
         :label="t('label.createAppointments')"
-        :disabled="!calendars.length || creationStatus !== appointmentCreationState.hidden"
+        :disabled="!calendarStore.connectedCalendars.length || creationStatus !== appointmentCreationState.hidden"
         @click="creationStatus = appointmentCreationState.details"
       />
     </div>
@@ -202,7 +202,7 @@
       <appointment-creation
         v-else
         :status="creationStatus"
-        :calendars="calendars"
+        :calendars="calendarStore.connectedCalendars"
         @start="creationStatus = appointmentCreationState.details"
         @next="creationStatus = appointmentCreationState.availability"
         @create="creationStatus = appointmentCreationState.finished; refresh();"
@@ -249,6 +249,8 @@ import {
   IconList,
   IconSearch,
 } from '@tabler/icons-vue';
+import {useAppointmentStore} from "@/stores/appointment-store";
+import {useCalendarStore} from "@/stores/calendar-store";
 
 // component constants
 const { t } = useI18n();
@@ -258,11 +260,8 @@ const dj = inject('dayjs');
 const bookingUrl = inject('bookingUrl');
 const refresh = inject('refresh');
 
-// view properties
-const props = defineProps({
-  calendars: Array, // list of calendars from db
-  appointments: Array, // list of appointments from db
-});
+const appointmentStore = useAppointmentStore();
+const calendarStore = useCalendarStore();
 
 // handle calendar output
 const activeDate = ref(dj()); // current selected date, defaults to now
@@ -324,7 +323,7 @@ const restoreColumnOrder = () => {
 
 // handle filtered appointments list
 const filteredAppointments = computed(() => {
-  let list = props.appointments ? [...props.appointments] : [];
+  let list = appointmentStore.appointments ? [...appointmentStore.appointments] : [];
   // by search input
   if (search.value !== '') {
     list = list.filter((a) => a.title.toLowerCase().includes(search.value.toLowerCase()));
diff --git a/frontend/src/views/CalendarView.vue b/frontend/src/views/CalendarView.vue
index 7891d1850..6431f431e 100644
--- a/frontend/src/views/CalendarView.vue
+++ b/frontend/src/views/CalendarView.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col lg:flex-row w-full m-8 mt-0 justify-center">
-    <alert-box title="Calendar Setup" scheme="alert" v-if="calendars.length === 0 && !hideUntilRefreshed">
+    <alert-box title="Calendar Setup" scheme="alert" v-if="calendarStore.connectedCalendars.length === 0 && !hideUntilRefreshed">
       <i18n-t keypath="error.noConnectedCalendars" tag="label" for="error.noConnectedCalendars">
         <a class="underline" href="/settings/calendar" target="_blank">{{ t('error.noConnectedCalendarsLink') }}</a>
       </i18n-t>
@@ -28,7 +28,7 @@
       />
       <primary-button
         :label="t('label.createAppointments')"
-        :disabled="!calendars.length || creationStatus !== appointmentCreationState.hidden"
+        :disabled="!calendarStore.connectedCalendars.length || creationStatus !== appointmentCreationState.hidden"
         @click="creationStatus = appointmentCreationState.details"
       />
     </div>
@@ -43,21 +43,21 @@
       v-show="tabActive === calendarViews.month"
       class="w-full md:w-4/5"
       :selected="activeDate"
-      :appointments="pendingAppointments"
+      :appointments="appointmentStore.pendingAppointments"
       :events="calendarEvents"
     />
     <calendar-week
       v-show="tabActive === calendarViews.week"
       class="w-full md:w-4/5"
       :selected="activeDate"
-      :appointments="pendingAppointments"
+      :appointments="appointmentStore.pendingAppointments"
       :events="calendarEvents"
     />
     <calendar-day
       v-show="tabActive === calendarViews.day"
       class="w-full md:w-4/5"
       :selected="activeDate"
-      :appointments="pendingAppointments"
+      :appointments="appointmentStore.pendingAppointments"
       :events="calendarEvents"
       popup-position="top"
     />
@@ -88,7 +88,7 @@
             </router-link>
           </div>
           <div
-            v-if="pendingAppointments.length === 0"
+            v-if="appointmentStore.pendingAppointments.length === 0"
             class="mt-4 flex flex-col gap-8 justify-center items-center text-gray-500"
           >
             <div class="text-center mt-4">
@@ -96,13 +96,13 @@
             </div>
             <primary-button
               :label="t('label.createAppointments')"
-              :disabled="!calendars.length || creationStatus !== appointmentCreationState.hidden"
+              :disabled="!calendarStore.connectedCalendars.length || creationStatus !== appointmentCreationState.hidden"
               @click="creationStatus = appointmentCreationState.details"
             />
           </div>
           <div v-else class="flex flex-col gap-8 mt-4">
             <appointment-list-item
-              v-for="a in pendingAppointments"
+              v-for="a in appointmentStore.pendingAppointments"
               :key="a.id"
               :appointment="a"
             />
@@ -113,7 +113,7 @@
       <appointment-creation
         v-else
         :status="creationStatus"
-        :calendars="calendars"
+        :calendars="calendarStore.connectedCalendars"
         @start="creationStatus = appointmentCreationState.details"
         @next="creationStatus = appointmentCreationState.availability"
         @create="
@@ -139,7 +139,9 @@ import CalendarPageHeading from '@/elements/CalendarPageHeading';
 import CalendarWeek from '@/components/CalendarWeek';
 import PrimaryButton from '@/elements/PrimaryButton';
 import TabBar from '@/components/TabBar';
-import AlertBox from "@/elements/AlertBox.vue";
+import AlertBox from '@/elements/AlertBox.vue';
+import { useCalendarStore } from '@/stores/calendar-store';
+import { useAppointmentStore } from '@/stores/appointment-store';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -148,11 +150,8 @@ const dj = inject('dayjs');
 const call = inject('call');
 const refresh = inject('refresh');
 
-// view properties
-const props = defineProps({
-  calendars: Array, // list of calendars from db
-  appointments: Array, // list of appointments from db
-});
+const appointmentStore = useAppointmentStore();
+const calendarStore = useCalendarStore();
 
 // current selected date, if not in route: defaults to now
 const activeDate = ref(route.params.date ? dj(route.params.date) : dj());
@@ -206,9 +205,6 @@ const dateNav = (unit = 'auto', forward = true) => {
 // appointment creation state
 const creationStatus = ref(appointmentCreationState.hidden);
 
-// list of all pending appointments
-const pendingAppointments = computed(() => props.appointments?.filter((a) => a.status === appointmentState.pending));
-
 // get remote calendar data for current year
 const calendarEvents = ref([]);
 
@@ -217,7 +213,7 @@ const hideUntilRefreshed = ref(true);
 
 const getRemoteEvents = async (from, to) => {
   calendarEvents.value = [];
-  await Promise.all(props.calendars.map(async (calendar) => {
+  await Promise.all(calendarStore.connectedCalendars.map(async (calendar) => {
     const { data } = await call(`rmt/cal/${calendar.id}/${from}/${to}`).get().json();
     if (Array.isArray(data.value)) {
       calendarEvents.value.push(...data.value.map((e) => ({ ...e, duration: dj(e.end).diff(dj(e.start), 'minutes') })));
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 39ff78564..ff47edad7 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -82,14 +82,12 @@
 </template>
 
 <script setup>
-import { inject, onMounted} from 'vue';
 import PrimaryButton from '@/elements/PrimaryButton.vue';
 import InfoBox from '@/elements/home/InfoBox.vue';
 import HomeFooter from '@/components/HomeFooter.vue';
 import { useUserStore } from '@/stores/user-store';
 import { useRouter } from 'vue-router';
 
-const refresh = inject('refresh');
 const router = useRouter();
 
 const isAuthenticated = useUserStore().exists();
@@ -100,9 +98,4 @@ const enter = () => {
 const login = () => {
   router.push('/login');
 };
-
-// initially load data when component gets remounted
-onMounted(async () => {
-  await refresh();
-});
 </script>
diff --git a/frontend/src/views/ProfileView.vue b/frontend/src/views/ProfileView.vue
index 9d72a9796..9b8c976e9 100644
--- a/frontend/src/views/ProfileView.vue
+++ b/frontend/src/views/ProfileView.vue
@@ -16,12 +16,12 @@
     <div class="grid grid-cols-2 mt-8 mb-12 gap-8">
       <!-- calendars -->
       <div class="flex flex-col items-center">
-        <div class="text-3xl font-semibold">{{ calendars.length }}/&infin;</div>
+        <div class="text-3xl font-semibold">{{ calendarStore.connectedCalendars.length }}/&infin;</div>
         <div class="text-gray-500 text-center">{{ t('heading.calendarsConnected') }}</div>
       </div>
       <!-- appointments -->
       <div class="flex flex-col items-center">
-        <div class="text-3xl font-semibold">{{ pendingAppointments.length }}</div>
+        <div class="text-3xl font-semibold">{{ appointmentStore.pendingAppointments.length }}</div>
         <div class="text-gray-500 text-center">{{ t('heading.pendingAppointments') }}</div>
       </div>
     </div>
@@ -31,10 +31,10 @@
 </template>
 
 <script setup>
-import { inject, computed, onMounted } from 'vue';
+import { inject } from 'vue';
 import { keyByValue } from '@/utils';
 import { useI18n } from 'vue-i18n';
-import { subscriberLevels, appointmentState } from '@/definitions';
+import { subscriberLevels } from '@/definitions';
 import { useUserStore } from '@/stores/user-store';
 import PrimaryButton from '@/elements/PrimaryButton';
 import SecondaryButton from '@/elements/SecondaryButton';
@@ -43,25 +43,22 @@ import SecondaryButton from '@/elements/SecondaryButton';
 import { IconPencil } from '@tabler/icons-vue';
 import { useRouter } from 'vue-router';
 
+// Stores
+import { useCalendarStore } from '@/stores/calendar-store';
+import { useAppointmentStore } from '@/stores/appointment-store';
+
 // component constants
 const user = useUserStore();
 const router = useRouter();
 
 // component constants
 const { t } = useI18n();
-const refresh = inject('refresh');
 const call = inject('call');
 const fxaEditProfileUrl = inject('fxaEditProfileUrl');
 const isFxaAuth = inject('isFxaAuth');
 
-// view properties
-const props = defineProps({
-  calendars: Array, // list of calendars from db
-  appointments: Array, // list of appointments from db
-});
-
-// list of pending appointments
-const pendingAppointments = computed(() => props.appointments.filter((a) => a.status === appointmentState.pending));
+const appointmentStore = useAppointmentStore();
+const calendarStore = useCalendarStore();
 
 // do log out
 const logout = async () => {
@@ -72,9 +69,4 @@ const logout = async () => {
 const editProfile = async () => {
   window.location = fxaEditProfileUrl;
 };
-
-// initially load data when component gets remounted
-onMounted(async () => {
-  await refresh();
-});
 </script>
diff --git a/frontend/src/views/ScheduleView.vue b/frontend/src/views/ScheduleView.vue
index ae601c256..026515134 100644
--- a/frontend/src/views/ScheduleView.vue
+++ b/frontend/src/views/ScheduleView.vue
@@ -38,7 +38,7 @@
     <div class="w-full sm:w-1/2 md:w-1/5 mx-auto mb-10 md:mb-0 min-w-[310px]">
       <schedule-creation
         v-if="schedulesReady"
-        :calendars="calendars"
+        :calendars="calendarStore.connectedCalendars"
         :schedule="firstSchedule"
         :active-date="activeDate"
         @created="getFirstSchedule"
@@ -50,7 +50,7 @@
       v-show="tabActive === calendarViews.month"
       class="w-full md:w-4/5"
       :selected="activeDate"
-      :appointments="pendingAppointments"
+      :appointments="appointmentStore.pendingAppointments"
       :events="calendarEvents"
       :schedules="schedulesPreviews"
       popup-position="left"
@@ -59,7 +59,7 @@
       v-show="tabActive === calendarViews.week"
       class="w-full md:w-4/5"
       :selected="activeDate"
-      :appointments="pendingAppointments"
+      :appointments="appointmentStore.pendingAppointments"
       :events="calendarEvents"
       popup-position="left"
     />
@@ -67,7 +67,7 @@
       v-show="tabActive === calendarViews.day"
       class="w-full md:w-4/5"
       :selected="activeDate"
-      :appointments="pendingAppointments"
+      :appointments="appointmentStore.pendingAppointments"
       :events="calendarEvents"
       popup-position="top"
     />
@@ -75,7 +75,7 @@
 </template>
 
 <script setup>
-import { calendarViews, appointmentState } from '@/definitions';
+import { calendarViews } from '@/definitions';
 import { ref, inject, computed, watch, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
@@ -87,6 +87,9 @@ import TabBar from '@/components/TabBar';
 
 // icons
 import { IconChevronLeft, IconChevronRight } from "@tabler/icons-vue";
+// stores
+import { useAppointmentStore } from '@/stores/appointment-store';
+import { useCalendarStore } from '@/stores/calendar-store';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -94,11 +97,8 @@ const dj = inject('dayjs');
 const call = inject('call');
 const refresh = inject('refresh');
 
-// view properties
-const props = defineProps({
-  calendars: Array, // list of calendars from db
-  appointments: Array, // list of appointments from db
-});
+const appointmentStore = useAppointmentStore();
+const calendarStore = useCalendarStore();
 
 // current selected date, if not in route: defaults to now
 const activeDate = ref(route.params.date ? dj(route.params.date) : dj());
@@ -141,14 +141,11 @@ const dateNav = (unit = 'auto', forward = true) => {
   }
 };
 
-// list of all pending appointments
-const pendingAppointments = computed(() => props.appointments?.filter((a) => a.status === appointmentState.pending));
-
 // get remote calendar data for current year
 const calendarEvents = ref([]);
 const getRemoteEvents = async (from, to) => {
   calendarEvents.value = [];
-  await Promise.all(props.calendars.map(async (calendar) => {
+  await Promise.all(calendarStore.connectedCalendars.map(async (calendar) => {
     const { data } = await call(`rmt/cal/${calendar.id}/${from}/${to}`).get().json();
     if (Array.isArray(data.value)) {
       calendarEvents.value.push(...data.value.map((e) => ({ ...e, duration: dj(e.end).diff(dj(e.start), 'minutes') })));
@@ -158,7 +155,7 @@ const getRemoteEvents = async (from, to) => {
 
 // user configured schedules from db (only the first for now, later multiple schedules will be available)
 const schedules = ref([]);
-const firstSchedule = computed(() => schedules.value?.length > 0 ? schedules.value[0] : null );
+const firstSchedule = computed(() => schedules.value?.length > 0 ? schedules.value[0] : null);
 const schedulesReady = ref(false);
 const getFirstSchedule = async () => {
   calendarEvents.value = [];
diff --git a/frontend/src/views/SettingsView.vue b/frontend/src/views/SettingsView.vue
index 0acddc96f..a27d7dd68 100644
--- a/frontend/src/views/SettingsView.vue
+++ b/frontend/src/views/SettingsView.vue
@@ -49,7 +49,7 @@
       <settings-general v-if="activeView === settingsSections.general" />
 
       <!-- calendar settings -->
-      <settings-calendar v-if="activeView === settingsSections.calendar" :calendars="calendars" />
+      <settings-calendar v-if="activeView === settingsSections.calendar" />
 
       <!-- appointments and booking settings -->
       <div v-if="activeView === settingsSections.appointmentsAndBooking">
@@ -93,12 +93,6 @@ const { t } = useI18n({ useScope: 'global' });
 const route = useRoute();
 const router = useRouter();
 
-// view properties
-defineProps({
-  calendars: Array, // list of calendars from db
-  appointments: Array, // list of appointments from db
-});
-
 // menu navigation of different views
 const activeView = ref(route.params.view ? settingsSections[route.params.view] : settingsSections.general);
 const show = (key) => {

From 5c7d1ab69a3797c80cab3f3776c34e6989ad20d7 Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Mon, 11 Dec 2023 13:20:45 -0800
Subject: [PATCH 2/7] Hook up external connections store, and move the isLoaded
 check to inside the stores.

---
 frontend/src/App.vue                          |  3 --
 frontend/src/components/SettingsAccount.vue   | 18 ++++----
 frontend/src/stores/calendar-store.js         |  4 ++
 .../src/stores/external-connections-store.js  | 41 +++++++++++++++++++
 4 files changed, 53 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/stores/external-connections-store.js

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index dd2e7b554..3b8be79c0 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -128,9 +128,6 @@ const routeIsHome = computed(
 
 // query db for all calendar data
 const getDbCalendars = async () => {
-  if (calendarStore.isLoaded) {
-    return;
-  }
   await calendarStore.fetch(call);
 };
 // query db for all appointments data
diff --git a/frontend/src/components/SettingsAccount.vue b/frontend/src/components/SettingsAccount.vue
index f11a16caa..1e0ac778b 100644
--- a/frontend/src/components/SettingsAccount.vue
+++ b/frontend/src/components/SettingsAccount.vue
@@ -164,17 +164,19 @@ import TextButton from '@/elements/TextButton.vue';
 // icons
 import { IconExternalLink } from '@tabler/icons-vue';
 
+// stores
+import { useExternalConnectionsStore } from '@/stores/external-connections-store';
+
 // component constants
 const { t } = useI18n({ useScope: 'global' });
 const call = inject('call');
 const refresh = inject('refresh');
 const router = useRouter();
 const user = useUserStore();
-const logout = inject('logout');
+const externalConnectionsStore = useExternalConnectionsStore();
 
-const externalConnections = ref({});
-const hasZoomAccountConnected = computed(() => (externalConnections.value?.zoom?.length ?? []) > 0);
-const zoomAccountName = computed(() => (externalConnections.value?.zoom[0].name ?? null));
+const hasZoomAccountConnected = computed(() => (externalConnectionsStore.zoom.length) > 0);
+const zoomAccountName = computed(() => (externalConnectionsStore.zoom[0].name ?? null));
 
 const activeUsername = ref(user.data.username);
 const activeDisplayName = ref(user.data.name);
@@ -205,14 +207,9 @@ const getSignedUserUrl = async () => {
   signedUserUrl.value = data.value.url;
 };
 
-const getExternalConnections = async () => {
-  const { data } = await call('account/external-connections').get().json();
-  externalConnections.value = data.value;
-};
-
 const refreshData = async () => Promise.all([
   getSignedUserUrl(),
-  getExternalConnections(),
+  externalConnectionsStore.fetch(call),
   refresh(),
 ]);
 
@@ -261,6 +258,7 @@ const connectZoom = async () => {
 };
 const disconnectZoom = async () => {
   await call('zoom/disconnect').post();
+  await useExternalConnectionsStore().reset();
   await refreshData();
 };
 
diff --git a/frontend/src/stores/calendar-store.js b/frontend/src/stores/calendar-store.js
index b622af7da..589b8d4ce 100644
--- a/frontend/src/stores/calendar-store.js
+++ b/frontend/src/stores/calendar-store.js
@@ -29,6 +29,10 @@ export const useCalendarStore = defineStore('calendars', {
       this.$patch({ data: structuredClone(initialData) });
     },
     async fetch(call) {
+      if (this.isLoaded) {
+        return;
+      }
+
       const { data, error } = await call('me/calendars?only_connected=false').get().json();
       if (!error.value) {
         if (data.value === null || typeof data.value === 'undefined') return;
diff --git a/frontend/src/stores/external-connections-store.js b/frontend/src/stores/external-connections-store.js
new file mode 100644
index 000000000..c3748fa12
--- /dev/null
+++ b/frontend/src/stores/external-connections-store.js
@@ -0,0 +1,41 @@
+import { defineStore } from 'pinia';
+
+const initialData = {
+  zoom: [],
+  fxa: [],
+  isInit: false,
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export const useExternalConnectionsStore = defineStore('externalConnections', {
+  state: () => ({
+    data: structuredClone(initialData),
+  }),
+  getters: {
+    isLoaded() {
+      return this.data.isInit;
+    },
+    connections() {
+      return this.data;
+    },
+    fxa() {
+      return this.data.fxa ?? [];
+    },
+    zoom() {
+      return this.data.zoom ?? [];
+    },
+  },
+  actions: {
+    reset() {
+      this.$patch({ data: structuredClone(initialData) });
+    },
+    async fetch(call) {
+      if (this.isLoaded) {
+        return;
+      }
+
+      const { data } = await call('account/external-connections').get().json();
+      this.$patch({ data: { ...data.value, isInit: true } });
+    },
+  },
+});

From a4d4aa64271b28d5402f5fb49caafb836658046a Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Mon, 11 Dec 2023 13:24:42 -0800
Subject: [PATCH 3/7] We don't need to retrieve appointments or calendars on
 the account settings page.

---
 frontend/src/components/SettingsAccount.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/frontend/src/components/SettingsAccount.vue b/frontend/src/components/SettingsAccount.vue
index 1e0ac778b..65073c51c 100644
--- a/frontend/src/components/SettingsAccount.vue
+++ b/frontend/src/components/SettingsAccount.vue
@@ -151,7 +151,6 @@
 
 <script setup>
 import { ref, inject, onMounted, computed } from 'vue';
-import { useAuth0 } from '@auth0/auth0-vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useUserStore } from '@/stores/user-store';
@@ -170,7 +169,6 @@ import { useExternalConnectionsStore } from '@/stores/external-connections-store
 // component constants
 const { t } = useI18n({ useScope: 'global' });
 const call = inject('call');
-const refresh = inject('refresh');
 const router = useRouter();
 const user = useUserStore();
 const externalConnectionsStore = useExternalConnectionsStore();
@@ -210,7 +208,6 @@ const getSignedUserUrl = async () => {
 const refreshData = async () => Promise.all([
   getSignedUserUrl(),
   externalConnectionsStore.fetch(call),
-  refresh(),
 ]);
 
 // save user data

From 8dd4f0fab78cb0d5fd7b7121e3aa4acaed8f9231 Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Mon, 11 Dec 2023 13:42:23 -0800
Subject: [PATCH 4/7] Clean up

---
 frontend/src/App.vue                | 15 ++-------------
 frontend/src/views/CalendarView.vue |  4 ++--
 2 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 3b8be79c0..5ea121610 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -48,7 +48,6 @@ import { useAppointmentStore } from '@/stores/appointment-store';
 // component constants
 const currentUser = useUserStore(); // data: { username, email, name, level, timezone, id }
 const apiUrl = inject('apiUrl');
-const dj = inject('dayjs');
 const route = useRoute();
 const router = useRouter();
 const siteNotificationStore = useSiteNotificationStore();
@@ -126,16 +125,6 @@ const routeIsHome = computed(
   () => ['home'].includes(route.name),
 );
 
-// query db for all calendar data
-const getDbCalendars = async () => {
-  await calendarStore.fetch(call);
-};
-// query db for all appointments data
-const getDbAppointments = async () => {
-  // We don't have a good way to determine stale slots, so always grab appointments
-  await appointmentStore.fetch(call);
-};
-
 // check appointment status for current state (past|pending|booked)
 const getAppointmentStatus = (a) => appointmentStore.status(a);
 
@@ -154,8 +143,8 @@ const extendDbData = () => {
 const getDbData = async () => {
   if (currentUser?.exists()) {
     await Promise.all([
-      getDbCalendars(),
-      getDbAppointments(),
+      calendarStore.fetch(call),
+      appointmentStore.fetch(call),
     ]);
     extendDbData();
   }
diff --git a/frontend/src/views/CalendarView.vue b/frontend/src/views/CalendarView.vue
index 6431f431e..a0a2162df 100644
--- a/frontend/src/views/CalendarView.vue
+++ b/frontend/src/views/CalendarView.vue
@@ -127,8 +127,8 @@
 </template>
 
 <script setup>
-import { appointmentCreationState, calendarViews, appointmentState } from '@/definitions';
-import {ref, inject, computed, watch, onMounted, reactive} from 'vue';
+import { appointmentCreationState, calendarViews } from '@/definitions';
+import { ref, inject, computed, watch, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import AppointmentCreation from '@/components/AppointmentCreation';

From b7cb0148b747949180c9bce9d314722bd7319059 Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Fri, 15 Dec 2023 10:36:11 -0800
Subject: [PATCH 5/7] Provide calendar title and colour for `/me/appointments`

---
 backend/src/appointment/database/schemas.py | 6 ++++++
 backend/src/appointment/routes/api.py       | 7 ++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/backend/src/appointment/database/schemas.py b/backend/src/appointment/database/schemas.py
index 23b25e5ce..d7cec473e 100644
--- a/backend/src/appointment/database/schemas.py
+++ b/backend/src/appointment/database/schemas.py
@@ -108,6 +108,12 @@ class Config:
         from_attributes = True
 
 
+class AppointmentWithCalendarOut(Appointment):
+    """For /me/appointments"""
+    calendar_title: str
+    calendar_color: str
+
+
 class AppointmentOut(AppointmentBase):
     id: int | None = None
     owner_name: str | None = None
diff --git a/backend/src/appointment/routes/api.py b/backend/src/appointment/routes/api.py
index 17c9b007a..d69a5dd15 100644
--- a/backend/src/appointment/routes/api.py
+++ b/backend/src/appointment/routes/api.py
@@ -63,12 +63,17 @@ def read_my_calendars(
     return [schemas.CalendarOut(id=c.id, title=c.title, color=c.color, connected=c.connected) for c in calendars]
 
 
-@router.get("/me/appointments", response_model=list[schemas.Appointment])
+@router.get("/me/appointments", response_model=list[schemas.AppointmentWithCalendarOut])
 def read_my_appointments(db: Session = Depends(get_db), subscriber: Subscriber = Depends(get_subscriber)):
     """get all appointments of authenticated subscriber"""
     if not subscriber:
         raise HTTPException(status_code=401, detail="No valid authentication credentials provided")
     appointments = repo.get_appointments_by_subscriber(db, subscriber_id=subscriber.id)
+    # Mix in calendar title and color.
+    # Note because we `__dict__` any relationship values won't be carried over, so don't forget to manually add those!
+    appointments = map(
+        lambda x: schemas.AppointmentWithCalendarOut(**x.__dict__, slots=x.slots, calendar_title=x.calendar.title,
+                                                     calendar_color=x.calendar.color), appointments)
     return appointments
 
 

From 47aefc5c4d38e989a0667ce7eb5dc2c2593c5392 Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Fri, 15 Dec 2023 10:37:47 -0800
Subject: [PATCH 6/7] Remove the initial calendar/appointment load, and the
 calendar merge with appointments.

We don't need to merge the calendar data anymore since we do on the backend, and we now call the db refresh function on all pages that may require appointments. This prevents doubling requests if you start on the Calendars page for example.
---
 frontend/src/App.vue                         | 17 -----------------
 frontend/src/components/SettingsCalendar.vue |  2 ++
 frontend/src/stores/appointment-store.js     |  6 +++---
 3 files changed, 5 insertions(+), 20 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 5ea121610..dcd03810a 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -128,17 +128,6 @@ const routeIsHome = computed(
 // check appointment status for current state (past|pending|booked)
 const getAppointmentStatus = (a) => appointmentStore.status(a);
 
-// extend retrieved data
-const extendDbData = () => {
-  // build { calendarId => calendarData } object for direct lookup
-  const calendarsById = {};
-  calendarStore.allCalendars.forEach((c) => {
-    calendarsById[c.id] = c;
-  });
-  // extend appointments data with active state and calendar title and color
-  appointmentStore.mergeCalendarInfo(calendarsById);
-};
-
 // retrieve calendars and appointments after checking login and persisting user to db
 const getDbData = async () => {
   if (currentUser?.exists()) {
@@ -146,15 +135,9 @@ const getDbData = async () => {
       calendarStore.fetch(call),
       appointmentStore.fetch(call),
     ]);
-    extendDbData();
   }
 };
 
-// get the data initially
-onMounted(async () => {
-  await getDbData();
-});
-
 // provide refresh functions for components
 provide('refresh', getDbData);
 provide('getAppointmentStatus', getAppointmentStatus);
diff --git a/frontend/src/components/SettingsCalendar.vue b/frontend/src/components/SettingsCalendar.vue
index 88e5b883e..39d524f5f 100644
--- a/frontend/src/components/SettingsCalendar.vue
+++ b/frontend/src/components/SettingsCalendar.vue
@@ -392,5 +392,7 @@ onMounted(async () => {
     calendarConnectError.value = route.query.error;
     await router.replace(route.path);
   }
+
+  await refresh();
 });
 </script>
diff --git a/frontend/src/stores/appointment-store.js b/frontend/src/stores/appointment-store.js
index d0d04bc19..e68bed600 100644
--- a/frontend/src/stores/appointment-store.js
+++ b/frontend/src/stores/appointment-store.js
@@ -40,12 +40,10 @@ export const useAppointmentStore = defineStore('appointments', {
     reset() {
       this.$patch({ data: structuredClone(initialData) });
     },
-    async mergeCalendarInfo(calendarsById) {
+    async postFetchProcess() {
       const userStore = useUserStore();
 
       this.data.appointments.forEach((a) => {
-        a.calendar_title = calendarsById[a.calendar_id]?.title;
-        a.calendar_color = calendarsById[a.calendar_id]?.color;
         a.status = this.status(a);
         a.active = a.status !== appointmentState.past; // TODO
         // convert start dates from UTC back to users timezone
@@ -61,6 +59,8 @@ export const useAppointmentStore = defineStore('appointments', {
         this.data.appointments = data.value;
         this.data.isInit = true;
       }
+      // After we fetch the data, apply some processing
+      await this.postFetchProcess();
     },
   },
 });

From b8d0ce6cb67402b8a540c9aa13eadcf546d1a397 Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Fri, 15 Dec 2023 10:41:00 -0800
Subject: [PATCH 7/7] PR suggestions

---
 frontend/src/App.vue                        | 4 +---
 frontend/src/components/SettingsAccount.vue | 3 ++-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index dcd03810a..0fad1a3b8 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -30,9 +30,7 @@
 
 <script setup>
 import { createFetch } from '@vueuse/core';
-import {
-  inject, provide, onMounted, computed,
-} from 'vue';
+import { inject, provide, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import NavBar from '@/components/NavBar';
 import TitleBar from '@/components/TitleBar';
diff --git a/frontend/src/components/SettingsAccount.vue b/frontend/src/components/SettingsAccount.vue
index 65073c51c..e5e9077a5 100644
--- a/frontend/src/components/SettingsAccount.vue
+++ b/frontend/src/components/SettingsAccount.vue
@@ -173,8 +173,9 @@ const router = useRouter();
 const user = useUserStore();
 const externalConnectionsStore = useExternalConnectionsStore();
 
+// Currently we only support one zoom account being connected at once.
 const hasZoomAccountConnected = computed(() => (externalConnectionsStore.zoom.length) > 0);
-const zoomAccountName = computed(() => (externalConnectionsStore.zoom[0].name ?? null));
+const zoomAccountName = computed(() => (externalConnectionsStore.zoom[0]?.name ?? null));
 
 const activeUsername = ref(user.data.username);
 const activeDisplayName = ref(user.data.name);