❌ Remove untyped inject keys

frontend/src/App.vue

@@ -4,30 +4,29 @@ import {
   inject, provide, computed, onMounted,
 } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { getPreferredTheme } from '@/utils';
+import {
+  apiUrlKey, callKey, refreshKey, isPasswordAuthKey, isFxaAuthKey, fxaEditProfileUrlKey,
+} from '@/keys';
+import { StringResponse } from '@/models';
+import { usePosthog, posthog } from '@/composables/posthog';
+import UAParser from 'ua-parser-js';
+
 import NavBar from '@/components/NavBar.vue';
 import TitleBar from '@/components/TitleBar.vue';
 import FooterBar from '@/components/FooterBar.vue';
 import SiteNotification from '@/elements/SiteNotification.vue';
-import { useSiteNotificationStore } from '@/stores/alert-store';
-import { storeToRefs } from 'pinia';
-import { getPreferredTheme } from '@/utils';
+import RouteNotFoundView from '@/views/errors/RouteNotFoundView.vue';
+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 RouteNotFoundView from '@/views/errors/RouteNotFoundView.vue';
-import NotAuthenticatedView from '@/views/errors/NotAuthenticatedView.vue';
-
-import UAParser from 'ua-parser-js';
-import {
-  apiUrlKey, callKey, refreshKey, isPasswordAuthKey, isFxaAuthKey, fxaEditProfileUrlKey,
-} from '@/keys';
-import { StringResponse } from '@/models';
-import { usePosthog, posthog } from '@/composables/posthog';
-
 // component constants
 const currentUser = useUserStore(); // data: { username, email, name, level, timezone, id }
 const apiUrl = inject(apiUrlKey);
@@ -100,18 +99,9 @@ const call = createFetch({
   },
 });
 
-// TODO: Deprecated - Please use callKey, as it's typed!
-provide('call', call);
 provide(callKey, call);
-
-// TODO: Deprecated - Please use isPasswordAuthKey, as it's typed!
-provide('isPasswordAuth', import.meta.env?.VITE_AUTH_SCHEME === 'password');
 provide(isPasswordAuthKey, import.meta.env?.VITE_AUTH_SCHEME === 'password');
-// TODO: Deprecated - Please use isFxaAuthKey, as it's typed!
-provide('isFxaAuth', import.meta.env?.VITE_AUTH_SCHEME === 'fxa');
 provide(isFxaAuthKey, import.meta.env?.VITE_AUTH_SCHEME === 'fxa');
-// TODO: Deprecated - Please use fxaEditProfileUrlKey, as it's typed!
-provide('fxaEditProfileUrl', import.meta.env?.VITE_FXA_EDIT_PROFILE);
 provide(fxaEditProfileUrlKey, import.meta.env?.VITE_FXA_EDIT_PROFILE);
 
 // menu items for main navigation
@@ -180,8 +170,6 @@ const onPageLoad = async () => {
   return data.value?.id ?? false;
 };
 
-// TODO: Deprecated - Please use refreshKey, as it's typed!
-provide('refresh', getDbData);
 // provide refresh functions for components
 provide(refreshKey, getDbData);
 

frontend/src/components/CalendarMiniMonth.vue

@@ -53,13 +53,13 @@ import {
   IconChevronLeft,
   IconChevronRight,
 } from '@tabler/icons-vue';
-import { dayjsKey } from "@/keys";
+import { dayjsKey, isoWeekdaysKey, isoFirstDayOfWeekKey } from "@/keys";
 
 // component constants
 const { t } = useI18n();
 const dj = inject(dayjsKey);
-const isoWeekdays = inject('isoWeekdays');
-const isoFirstDayOfWeek = inject('isoFirstDayOfWeek');
+const isoWeekdays = inject(isoWeekdaysKey);
+const isoFirstDayOfWeek = inject(isoFirstDayOfWeekKey);
 
 // component properties
 const props = defineProps({

frontend/src/composables/dayjs.ts

@@ -13,7 +13,7 @@ import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import weekday from 'dayjs/plugin/weekday';
 import 'dayjs/locale/de';
-import { dayjsKey, durationHumanizedKey, isoWeekdaysKey } from '@/keys';
+import { dayjsKey, durationHumanizedKey, isoWeekdaysKey, tzGuessKey, isoFirstDayOfWeekKey } from '@/keys';
 
 export type IsoWeekday = {
   iso: number,
@@ -40,7 +40,7 @@ export default function useDayJS(app: App<Element>, locale: string) {
   // provide the configured dayjs instance as well es some helper functions
   // TODO: provide method to live update the dayjs locale
   app.provide(dayjsKey, dayjs);
-  app.provide('tzGuess', dayjs.tz.guess());
+  app.provide(tzGuessKey, dayjs.tz.guess());
 
   const durationHumanized = (minutes: number): string => ((minutes < 60)
     ? dayjs.duration(minutes, 'minutes').humanize()
@@ -50,7 +50,7 @@ export default function useDayJS(app: App<Element>, locale: string) {
   // locale aware first day of week
   const firstDayOfWeek = dayjs.localeData().firstDayOfWeek();
   const isoFirstDayOfWeek = firstDayOfWeek === 0 ? 7 : firstDayOfWeek;
-  app.provide('isoFirstDayOfWeek', isoFirstDayOfWeek);
+  app.provide(isoFirstDayOfWeekKey, isoFirstDayOfWeek);
 
   // provide unified list of locale weekdays with Monday=1 to Sunday=7 (isoweekdays)
   // taking locale first day of week into account
@@ -67,6 +67,5 @@ export default function useDayJS(app: App<Element>, locale: string) {
     });
   });
 
-  app.provide('isoWeekdays', isoWeekdays); // TODO: remove if all components are typed
   app.provide(isoWeekdaysKey, isoWeekdays);
 }

frontend/src/keys.ts

@@ -17,6 +17,8 @@ type DayjsType = ((_?:ConfigType) => Dayjs) & {
 };
 export const dayjsKey = Symbol('dayjs') as InjectionKey<DayjsType>;
 export const isoWeekdaysKey = Symbol('isoWeekdays') as InjectionKey<IsoWeekday[]>;
+export const tzGuessKey = Symbol('tzGuess') as InjectionKey<string>;
+export const isoFirstDayOfWeekKey = Symbol('isoFirstDayOfWeek') as InjectionKey<number>;
 
 // Provide urls for API and booking
 export const apiUrlKey = Symbol('apiUrl') as InjectionKey<string>;

frontend/src/stores/appointment-store.ts

@@ -6,12 +6,12 @@ import { useUserStore } from '@/stores/user-store';
 import {
   Appointment, AppointmentListResponse, Fetch, Slot,
 } from '@/models';
-import { dayjsKey } from '@/keys';
+import { dayjsKey, tzGuessKey } from '@/keys';
 
 // eslint-disable-next-line import/prefer-default-export
 export const useAppointmentStore = defineStore('appointments', () => {
   const dj = inject(dayjsKey);
-  const tzGuess = inject<string>('tzGuess');
+  const tzGuess = inject(tzGuessKey);
 
   // State
   const isLoaded = ref(false);