Fix TS for firebase + remove globals.d.ts

package.json

@@ -42,8 +42,8 @@
   "devDependencies": {
     "@playwright/test": "^1.44.1",
     "@rushstack/eslint-patch": "^1.10.3",
-    "@storybook/addon-essentials": "^8.1.8",
-    "@storybook/vue3-vite": "^8.1.8",
+    "@storybook/addon-essentials": "^8.1.9",
+    "@storybook/vue3-vite": "^8.1.9",
     "@tsconfig/node20": "^20.1.4",
     "@types/digital-goods-browser": "^2.0.3",
     "@types/google.maps": "^3.55.9",
@@ -69,7 +69,7 @@
     "rollup-plugin-visualizer": "^5.12.0",
     "sass": "^1.77.5",
     "typescript": "~5.4.0",
-    "vite": "^5.3.0",
+    "vite": "^5.3.1",
     "vite-plugin-pwa": "^0.20.0",
     "vite-plugin-vue-devtools": "^7.2.1",
     "vite-plugin-vuetify": "^2.0.3",

src/interfaces/activities.interface.ts

@@ -2,6 +2,7 @@
  * Represents an activity done by a user.
  */
 export interface Activity {
+  id?: string
   /** The name of the activity */
   name: string
   /** The local start date and time of the activity */

src/plugins/firebase/generic-db.ts

@@ -18,7 +18,9 @@ import {
   CollectionReference,
   DocumentReference,
   WhereFilterOp,
-  OrderByDirection
+  OrderByDirection,
+  DocumentSnapshot,
+  startAfter
 } from 'firebase/firestore/lite'
 import { toRaw, isRef, isReactive, isProxy } from 'vue'
 import firebaseApp from '@/plugins/firebase'
@@ -45,8 +47,8 @@ export function deepToRaw(sourceObj: any): any {
 
 const db: Firestore = getFirestore(firebaseApp)
 
-export default class GenericDB {
-  private collectionPath: string
+export default class GenericDB<T> {
+  public collectionPath: string
 
   constructor(collectionPath: string) {
     this.collectionPath = collectionPath
@@ -56,7 +58,7 @@ export default class GenericDB {
    * @param data
    * @param id
    */
-  async create(data: any, id: string | null = null): Promise<{ id: string; [key: string]: any }> {
+  async create(data: any, id?: string | null): Promise<T> {
     const collectionRef: CollectionReference = collection(db, this.collectionPath)
     const serverTimestampA = serverTimestamp()
 
@@ -81,14 +83,14 @@ export default class GenericDB {
       ...data,
       createTimestamp: new Date(),
       updateTimestamp: new Date()
-    }
+    } as T
   }
 
   /**
    * Read a document in the collection
    * @param id
    */
-  async read(id: string): Promise<{ id: string; [key: string]: any } | null> {
+  async read(id: string): Promise<(T & { id: string }) | null> {
     const docRef: DocumentReference = doc(db, this.collectionPath, id)
     const result = await getDoc(docRef)
 
@@ -98,7 +100,7 @@ export default class GenericDB {
 
     this.convertObjectTimestampPropertiesToDate(data)
 
-    return { id, ...data }
+    return { id, ...data } as T & { id: string }
   }
 
   /**
@@ -108,13 +110,15 @@ export default class GenericDB {
    * @param {string | null} order - Field to sort the results by.
    * @param {OrderByDirection} direction - Field to manage the order direction.
    * @param {number | null} amount - Maximum number of documents to retrieve.
+   * @param {DocumentSnapshot | null} lastVisible - Last visible document from the previous query.
    * @returns {Promise<any[]>} - Array of documents retrieved.
    */
   async readAll(
     constraints: Array<[string, WhereFilterOp, any]> | null = null,
     order: string | null = null,
     direction: OrderByDirection = 'desc',
-    amount: number | null = null
+    amount: number | null = null,
+    lastVisible: DocumentSnapshot | null = null
   ): Promise<any[]> {
     const collectionRef: CollectionReference = collection(db, this.collectionPath)
 
@@ -130,15 +134,19 @@ export default class GenericDB {
       combinedQuery.push(orderBy(order, direction))
     }
 
-    if (amount) {
+    if (lastVisible) {
+      combinedQuery.push(startAfter(lastVisible))
+    }
+
+    if (amount !== null) {
       combinedQuery.push(limit(amount))
     }
 
     if (combinedQuery.length > 0) {
       q = query(collectionRef, ...combinedQuery)
     }
 
-    const formatResult = (result: any) =>
+    const formatResult = (result: any): any =>
       result.docs.map((ref: any) =>
         this.convertObjectTimestampPropertiesToDate({
           id: ref.id,

src/plugins/firebase/user-activities-db.ts

@@ -1,6 +1,7 @@
 import GenericDB from './generic-db'
+import { Activity } from '@/interfaces/activities.interface'
 
-export default class UserActivitiesDB extends GenericDB {
+export default class UserActivitiesDB extends GenericDB<Activity> {
   constructor(userId: string) {
     super(`users/${userId}/activities`)
   }

src/plugins/firebase/user-workouts-db.ts

@@ -1,6 +1,7 @@
+import { Workout } from '@/interfaces/workouts.interface'
 import GenericDB from './generic-db'
 
-export default class UserWorkoutsDB extends GenericDB {
+export default class UserWorkoutsDB extends GenericDB<Workout> {
   constructor(userId: string) {
     super(`users/${userId}/workouts`)
   }

src/plugins/firebase/users-db.ts

@@ -1,6 +1,7 @@
+import { User } from '@/interfaces/authentication.interface'
 import GenericDB from './generic-db'
 
-export default class UsersDB extends GenericDB {
+export default class UsersDB extends GenericDB<User> {
   constructor() {
     super('users')
   }

src/plugins/firebase/users-workouts-db.ts

@@ -15,10 +15,11 @@ import {
 } from 'firebase/firestore/lite'
 import firebaseApp from '@/plugins/firebase'
 import GenericDB from '@/plugins/firebase/generic-db'
+import { Workout } from '@/interfaces/workouts.interface'
 
 const db: Firestore = getFirestore(firebaseApp)
 
-export default class UsersWorkoutsDB extends GenericDB {
+export default class UsersWorkoutsDB extends GenericDB<Workout> {
   constructor() {
     super('users')
   }
@@ -29,16 +30,16 @@ export default class UsersWorkoutsDB extends GenericDB {
    * @param {Array<[string, WhereFilterOp, any]> | null} constraints - Array of constraints for the query.
    * @param {string | null} order - Field to sort the results by.
    * @param {OrderByDirection} direction - Field to manage the order direction.
-   * @param {DocumentSnapshot | null} lastVisible - Last visible document from the previous query.
    * @param {number | null} amount - Maximum number of documents to retrieve.
+   * @param {DocumentSnapshot | null} lastVisible - Last visible document from the previous query.
    * @returns {Promise<any[]>} - Array of documents retrieved.
    */
   async readAll(
     constraints: Array<[string, WhereFilterOp, any]> | null = null,
     order: string | null = null,
     direction: OrderByDirection = 'desc',
-    lastVisible: DocumentSnapshot | null = null,
-    amount: number | null = null
+    amount: number | null = null,
+    lastVisible: DocumentSnapshot | null = null
   ): Promise<any[]> {
     const collectionRef = collectionGroup(db, 'workouts')
 

src/stores/activities.ts

@@ -14,8 +14,10 @@ export const useActivitiesStore = defineStore('activities', () => {
   async function fetchUserActivity() {
     if (activities.value.length) return
     const { user } = storeToRefs(useAuthenticationStore())
-    const userActivitiesDb = new UserActivitiesDB(user.value?.id)
-    activities.value = await userActivitiesDb.readAll(null, 'createTimestamp', 'desc', 20)
+    if (user.value) {
+      const userActivitiesDb = new UserActivitiesDB(user.value?.id)
+      activities.value = await userActivitiesDb.readAll(null, 'createTimestamp', 'desc', 20)
+    }
   }
   /**
    * Add a new workout for the user
@@ -24,12 +26,14 @@ export const useActivitiesStore = defineStore('activities', () => {
    */
   async function createUserActivity(activity: Activity) {
     const { user } = storeToRefs(useAuthenticationStore())
-    const userActivitiesDb = new UserActivitiesDB(user.value?.id)
+    if (user.value) {
+      const userActivitiesDb = new UserActivitiesDB(user.value.id)
 
-    const createdActivity = await userActivitiesDb.create(activity)
+      const createdActivity = await userActivitiesDb.create(activity)
 
-    // push to beginning of  workouts
-    activities.value.unshift(createdActivity)
+      // push to beginning of  workouts
+      activities.value.unshift(createdActivity)
+    }
   }
 
   return {

src/stores/authentication.ts

@@ -12,15 +12,15 @@ export const useAuthenticationStore = defineStore('authentication', () => {
   /**
    * Create new user from firebase auth user infos
    */
-  async function createNewUserFromFirebaseAuthUser(firebaseAuthUser: FirebaseUser) {
+  async function createNewUserFromFirebaseAuthUser(firebaseAuthUser: FirebaseUser): Promise<User> {
     let providerData = firebaseAuthUser.providerData[0]
     if (firebaseAuthUser.isAnonymous) {
       // eslint-disable-next-line prefer-destructuring
       providerData = firebaseAuthUser
     }
     const { displayName, photoURL, email } = providerData
     const { default: UsersDB } = await import('@/plugins/firebase/users-db')
-    const userDb = new UsersDB()
+    const usersDb = new UsersDB()
     // default user settings
     const settings: UserSettings = {
       selected: 0,
@@ -46,7 +46,7 @@ export const useAuthenticationStore = defineStore('authentication', () => {
       settings
     }
 
-    return userDb.create(user, firebaseAuthUser.uid)
+    return usersDb.create(user, firebaseAuthUser.uid)
   }
   /**
    * Callback fired when user login

src/stores/workouts.ts

@@ -31,9 +31,9 @@ export const useWorkoutsStore = defineStore('workouts', () => {
       [['subscribers', 'array-contains', authentication.user?.id]],
       'updateTimestamp',
       'desc',
+      20,
       // @ts-expect-error DocumentSnapshot
-      lastVisible,
-      20
+      lastVisible
     )
     workouts.value.push(...newWorkouts)
   }
@@ -60,9 +60,9 @@ export const useWorkoutsStore = defineStore('workouts', () => {
       constraints,
       workoutsCommunityFilter.value.value,
       'desc',
+      20,
       // @ts-expect-error DocumentSnapshot
-      lastVisible,
-      20
+      lastVisible
     )
     workoutsCommunity.value.push(...newWorkouts)
   }
@@ -75,7 +75,7 @@ export const useWorkoutsStore = defineStore('workouts', () => {
   async function fetchLeaderboard(rank = 'completed.amount') {
     if (leaderboards.value.find((leaderboard) => leaderboard.rank === rank)) return
     const usersDb = new UsersDB()
-    const leaderboard = await usersDb.readAll([[rank, '>', 0]], rank, 15)
+    const leaderboard = await usersDb.readAll([[rank, '>', 0]], rank, 'desc', 15)
     leaderboards.value.push({ rank, leaderboard })
   }
 
@@ -86,16 +86,18 @@ export const useWorkoutsStore = defineStore('workouts', () => {
    */
   async function createUserWorkout(workout: Workout) {
     const { user } = storeToRefs(useAuthenticationStore())
-    const userWorkoutDb = new UserWorkoutsDB(user.value?.id)
+    if (user.value) {
+      const userWorkoutDb = new UserWorkoutsDB(user.value.id)
 
-    const createdWorkout = await userWorkoutDb.create(workout)
+      const createdWorkout = await userWorkoutDb.create(workout)
 
-    // push to beginning of workouts
-    workouts.value.unshift(createdWorkout)
+      // push to beginning of workouts
+      workouts.value.unshift(createdWorkout)
 
-    // also add the workout as a community workout
-    if (createdWorkout.share === true) {
-      workoutsCommunity.value.unshift(createdWorkout)
+      // also add the workout as a community workout
+      if (createdWorkout.share === true) {
+        workoutsCommunity.value.unshift(createdWorkout)
+      }
     }
   }
 
@@ -106,8 +108,10 @@ export const useWorkoutsStore = defineStore('workouts', () => {
    */
   async function updateUserWorkout(payload: Workout) {
     const { user } = storeToRefs(useAuthenticationStore())
-    const userWorkoutsDb = new UserWorkoutsDB(user.value?.id)
-    await userWorkoutsDb.update(payload)
+    if (user.value) {
+      const userWorkoutsDb = new UserWorkoutsDB(user.value.id)
+      await userWorkoutsDb.update(payload)
+    }
   }
 
   /**
@@ -117,13 +121,15 @@ export const useWorkoutsStore = defineStore('workouts', () => {
    */
   async function removeUserWorkoutById(id: string) {
     const { user } = storeToRefs(useAuthenticationStore())
-    const userWorkoutsDb = new UserWorkoutsDB(user.value?.id)
+    if (user.value) {
+      const userWorkoutsDb = new UserWorkoutsDB(user.value.id)
 
-    await userWorkoutsDb.delete(id)
+      await userWorkoutsDb.delete(id)
 
-    const index = workouts.value.findIndex((workout) => workout.id === id)
+      const index = workouts.value.findIndex((workout) => workout.id === id)
 
-    workouts.value.splice(index, 1)
+      workouts.value.splice(index, 1)
+    }
   }
 
   /**