🔨 Fix use fetch types

frontend/.eslintrc.cjs

@@ -22,6 +22,7 @@ module.exports = {
   rules: {
     'import/extensions': ['error', 'ignorePackages', {
       '': 'never',
+      ts: 'never',
       js: 'never',
       vue: 'off',
     }],
@@ -37,7 +38,7 @@ module.exports = {
         map: [
           ['@', './src'],
         ],
-        extensions: ['.js', '.vue'],
+        extensions: ['.ts', '.js', '.vue'],
       },
     },
   },

frontend/src/models.ts

@@ -128,14 +128,14 @@ export type Signature = {
 
 // Types and aliases used for our custom createFetch API calls and return types
 export type FetchAny = (url: string) => UseFetchReturn<any> & PromiseLike<UseFetchReturn<any>>;
-export type FetchBoolean = (url: string) => UseFetchReturn<boolean> & PromiseLike<UseFetchReturn<boolean>>;
-export type FetchSignature = (url: string) => UseFetchReturn<Signature> & PromiseLike<UseFetchReturn<Signature>>;
-export type FetchSubscriber = (url: string) => UseFetchReturn<Subscriber> & PromiseLike<UseFetchReturn<Subscriber>>;
-export type FetchToken = (url: string) => UseFetchReturn<Token> & PromiseLike<UseFetchReturn<Token>>;
-export type FetchAppointmentList = (url: string) => UseFetchReturn<Appointment[]> & PromiseLike<UseFetchReturn<Appointment[]>>;
-export type FetchCalendarList = (url: string) => UseFetchReturn<Calendar[]> & PromiseLike<UseFetchReturn<Calendar[]>>;
-export type FetchScheduleList = (url: string) => UseFetchReturn<Schedule[]> & PromiseLike<UseFetchReturn<Schedule[]>>;
-export type FetchExternalConnectionCollection = (url: string) => UseFetchReturn<ExternalConnectionCollection> & PromiseLike<UseFetchReturn<ExternalConnectionCollection>>;
+export type BooleanResponse = UseFetchReturn<boolean>;
+export type SignatureResponse = UseFetchReturn<Signature>;
+export type SubscriberResponse = UseFetchReturn<Subscriber>;
+export type TokenResponse = UseFetchReturn<Token>;
+export type AppointmentListResponse = UseFetchReturn<Appointment[]>;
+export type CalendarListResponse = UseFetchReturn<Calendar[]>;
+export type ScheduleListResponse = UseFetchReturn<Schedule[]>;
+export type ExternalConnectionCollectionResponse = UseFetchReturn<ExternalConnectionCollection>;
 
 export type Error = { error: boolean|string|null };
 export type Token = {

frontend/src/stores/appointment-store.ts

@@ -3,7 +3,7 @@ import { defineStore } from 'pinia';
 import { ref, computed, inject } from 'vue';
 import { bookingStatus } from '@/definitions';
 import { useUserStore } from '@/stores/user-store';
-import { Appointment, FetchAppointmentList, Slot } from '@/models';
+import { Appointment, AppointmentListResponse, FetchAny, Slot } from '@/models';
 
 // eslint-disable-next-line import/prefer-default-export
 export const useAppointmentStore = defineStore('appointments', () => {
@@ -38,8 +38,8 @@ export const useAppointmentStore = defineStore('appointments', () => {
    * Get all appointments for current user
    * @param call preconfigured API fetch function
    */
-  const fetch = async (call: FetchAppointmentList) => {
-    const { data, error } = await call('me/appointments').get().json();
+  const fetch = async (call: FetchAny) => {
+    const { data, error }: AppointmentListResponse = await call('me/appointments').get().json();
     if (!error.value) {
       if (data.value === null || typeof data.value === 'undefined') return;
       appointments.value = data.value;

frontend/src/stores/booking-modal-store.ts

@@ -6,7 +6,7 @@ import { modalStates } from '@/definitions';
 export const useBookingModalStore = defineStore('bookingModal', () => {
   const open = ref(false);
   const state = ref(modalStates.open);
-  const stateData = ref<string>(null);
+  const stateData = ref < string > (null);
 
   const isLoading = computed(() => state.value === modalStates.loading);
   const isFinished = computed(() => state.value === modalStates.finished);

frontend/src/stores/calendar-store.ts

@@ -1,4 +1,4 @@
-import { Calendar, FetchCalendarList } from '@/models';
+import { Calendar, CalendarListResponse, FetchAny } from '@/models';
 import { defineStore } from 'pinia';
 import { ref, computed } from 'vue';
 
@@ -18,12 +18,12 @@ export const useCalendarStore = defineStore('calendars', () => {
    * Get all calendars for current user
    * @param call preconfigured API fetch function
    */
-  const fetch = async (call: FetchCalendarList) => {
+  const fetch = async (call: FetchAny) => {
     if (isLoaded.value) {
       return;
     }
 
-    const { data, error } = await call('me/calendars?only_connected=false').get().json();
+    const { data, error }: CalendarListResponse = await call('me/calendars?only_connected=false').get().json();
     if (!error.value) {
       if (data.value === null || typeof data.value === 'undefined') return;
       calendars.value = data.value;

frontend/src/stores/external-connections-store.ts

@@ -1,4 +1,4 @@
-import { ExternalConnection, ExternalConnectionCollection, FetchExternalConnectionCollection } from '@/models';
+import { ExternalConnection, ExternalConnectionCollection, FetchAny, ExternalConnectionCollectionResponse } from '@/models';
 import { defineStore } from 'pinia';
 import { ref, computed } from 'vue';
 
@@ -22,12 +22,12 @@ export const useExternalConnectionsStore = defineStore('externalConnections', ()
    * Get all external connections for current user
    * @param call preconfigured API fetch function
    */
-  const fetch = async (call: FetchExternalConnectionCollection) => {
+  const fetch = async (call: FetchAny) => {
     if (isLoaded.value) {
       return;
     }
 
-    const { data } = await call('account/external-connections').get().json();
+    const { data }: ExternalConnectionCollectionResponse = await call('account/external-connections').get().json();
     zoom.value = data.value?.zoom ?? [];
     fxa.value = data.value?.fxa ?? [];
     google.value = data.value?.google ?? [];

frontend/src/stores/schedule-store.ts

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia';
 import { ref, computed } from 'vue';
 import { useUserStore } from '@/stores/user-store';
-import { FetchScheduleList, Schedule } from '@/models';
+import { FetchAny, Schedule, ScheduleListResponse } from '@/models';
 
 // eslint-disable-next-line import/prefer-default-export
 export const useScheduleStore = defineStore('schedules', () => {
@@ -18,12 +18,12 @@ export const useScheduleStore = defineStore('schedules', () => {
    * @param call preconfigured API fetch function
    * @param force Force a fetch even if we already have data
    */
-  const fetch = async (call: FetchScheduleList, force: boolean = false) => {
+  const fetch = async (call: FetchAny, force: boolean = false) => {
     if (isLoaded.value && !force) {
       return;
     }
 
-    const { data, error } = await call('schedule/').get().json();
+    const { data, error }: ScheduleListResponse = await call('schedule/').get().json();
 
     if (error.value || data.value === null || typeof data.value === 'undefined') {
       return;

frontend/src/stores/user-store.ts

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 import { useLocalStorage } from '@vueuse/core';
 import { i18n } from '@/composables/i18n';
 import { computed } from 'vue';
-import { Schedule, Subscriber, User, FetchAny, FetchBoolean, Error } from '@/models';
+import { Schedule, Subscriber, User, FetchAny, Error, BooleanResponse, SignatureResponse, SubscriberResponse, TokenResponse } from '@/models';
 
 const initialUserObject = {
   email: null,
@@ -57,13 +57,13 @@ export const useUserStore = defineStore('user', () => {
 
   /**
    * Retrieve the current signed url and update store
-   * @param {FetchSignature} call preconfigured API fetch function
+   * @param call preconfigured API fetch function
    */
   const updateSignedUrl = async (call: FetchAny): Promise<Error> => {
-    const { error, data: sigData } = await call('me/signature').get().json();
+    const { error, data: sigData }: SignatureResponse = await call('me/signature').get().json();
 
     if (error.value || !sigData.value?.url) {
-      return { error: sigData.value?.detail ?? error.value };
+      return { error: sigData.value ?? error.value };
     }
 
     data.value.signedUrl = sigData.value.url;
@@ -73,15 +73,15 @@ export const useUserStore = defineStore('user', () => {
 
   /**
    * Update store with profile data from db
-   * @param {FetchSubscriber} call preconfigured API fetch function
+   * @param call preconfigured API fetch function
    */
   const profile = async (call: FetchAny): Promise<Error> => {
-    const { error, data: userData } = await call('me').get().json();
+    const { error, data: userData }: SubscriberResponse = await call('me').get().json();
 
     // Failed to get profile data, log this user out and return false
     if (error.value || !userData.value) {
       $reset();
-      return { error: userData.value?.detail ?? error.value };
+      return { error: userData.value ?? error.value };
     }
 
     updateProfile(userData.value);
@@ -93,8 +93,8 @@ export const useUserStore = defineStore('user', () => {
    * Invalidate the current signed url and replace it with a new one
    * @param call preconfigured API fetch function
    */
-  const changeSignedUrl = async (call: FetchBoolean): Promise<Error> => {
-    const { error, data: sigData } = await call('me/signature').post().json();
+  const changeSignedUrl = async (call: FetchAny): Promise<Error> => {
+    const { error, data: sigData }: BooleanResponse = await call('me/signature').post().json();
 
     if (error.value) {
       return { error: sigData.value ?? error.value };
@@ -105,7 +105,7 @@ export const useUserStore = defineStore('user', () => {
 
   /**
    * Request subscriber login
-   * @param {FetchToken} call preconfigured API fetch function
+   * @param call preconfigured API fetch function
    * @param username
    * @param password or null if fxa authentication
    */
@@ -117,10 +117,10 @@ export const useUserStore = defineStore('user', () => {
       const formData = new FormData(document.createElement('form'));
       formData.set('username', username);
       formData.set('password', password);
-      const { error, data: tokenData } = await call('token').post(formData).json();
+      const { error, data: tokenData }: TokenResponse = await call('token').post(formData).json();
 
       if (error.value || !tokenData.value.access_token) {
-        return { error: tokenData.value?.detail ?? error.value };
+        return { error: tokenData.value ?? error.value };
       }
 
       data.value.accessToken = tokenData.value.access_token;
@@ -138,8 +138,8 @@ export const useUserStore = defineStore('user', () => {
    * Do subscriber logout and reset store
    * @param call preconfigured API fetch function
    */
-  const logout = async (call: FetchBoolean) => {
-    const { error } = await call('logout').get().json();
+  const logout = async (call: FetchAny) => {
+    const { error }: BooleanResponse = await call('logout').get().json();
 
     if (error.value) {
       // TODO: show error message